【问题标题】:Close opened infowindows - google maps api关闭打开的 infowindows - google maps api
【发布时间】:2017-03-29 02:52:34
【问题描述】:

我正在尝试当用户单击标记时,它会打开和关闭所有以前打开的标记。我正在尝试使用此代码,但没有运气,知道该怎么做吗?

更新了我正在使用的完整脚本并基于答案的可能解决方案:

    (function($) {

    /*
    *  new_map
    *
    *  This function will render a Google Map onto the selected jQuery element
    *
    *  @type  function
    *  @date  8/11/2013
    *  @since 4.3.0
    *
    *  @param $el (jQuery element)
    *  @return  n/a
    */

    function new_map( $el ) {

      // var
      var $markers = $el.find('.marker');


      // vars
      var args = {
        scrollwheel: false,
        zoom    : 5,
        center    : new google.maps.LatLng(0, 0),
        mapTypeId : google.maps.MapTypeId.ROADMAP
      };


      // create map           
      var map = new google.maps.Map( $el[0], args);


      // add a markers reference
      map.markers = [];


      // add markers
      $markers.each(function(){

          add_marker( $(this), map );

      });


      // center map
      center_map( map );


      // return
      return map;

    }

    /*
    *  add_marker
    *
    *  This function will add a marker to the selected Google Map
    *
    *  @type  function
    *  @date  8/11/2013
    *  @since 4.3.0
    *
    *  @param $marker (jQuery element)
    *  @param map (Google Map object)
    *  @return  n/a
    */

    function add_marker( $marker, map ) {

      // var
      var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );

      // create marker
      var marker = new google.maps.Marker({
        position  : latlng,
        map     : map,
        icon: '<?php echo get_template_directory_uri(); ?>/assets/img/google-map-marker.png',
      });

      // add to array
      map.markers.push( marker );

      if( $marker.html() ){
         var infoWindows = [];
        // show info window when marker is clicked
        google.maps.event.addListener(marker, 'click', function() {

           // Need to clear up old info windows before adding new ones
          for (var i = 0; i < infoWindows.length; i++) {
            infoWindows[i].setMap(null);
          }

        // create info window
          var infoWindow = new google.maps.InfoWindow({
            content   : $marker.html()
          });

          infoWindow.open( map, marker );
          infoWindows.push(infoWindow);
        });
      }  

    }


    /*
    *  center_map
    *
    *  This function will center the map, showing all markers attached to this map
    *
    *  @type  function
    *  @date  8/11/2013
    *  @since 4.3.0
    *
    *  @param map (Google Map object)
    *  @return  n/a
    */

    function center_map( map ) {

      // vars
      var bounds = new google.maps.LatLngBounds();

      // loop through all markers and create bounds
      $.each( map.markers, function( i, marker ){

        var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );

        bounds.extend( latlng );

      });

      // only 1 marker?
      if( map.markers.length == 1 )
      {
        // set center of map
          map.setCenter( bounds.getCenter() );
          map.setZoom( 16 );
      }
      else
      {
        // fit to bounds
        map.fitBounds( bounds );
      }

    }

    /*
    *  document ready
    *
    *  This function will render each map when the document is ready (page has loaded)
    *
    *  @type  function
    *  @date  8/11/2013
    *  @since 5.0.0
    *
    *  @param n/a
    *  @return  n/a
    */
    // global var
    var map = null;

    $(document).ready(function(){

      $('.acf-map').each(function(){

        // create map
        map = new_map( $(this) );

      });

    });

    })(jQuery);

【问题讨论】:

标签: javascript google-maps


【解决方案1】:

我对你的代码做了一点改动。

var infoWindows = [];
if( $marker.html() ){

    // Need to clear up old info windows before adding new ones
    for (var i = 0; i < infoWindows.length; i++) {
      infoWindows[i].setMap(null);
    }
  // show info window when marker is clicked
  google.maps.event.addListener(marker, 'click', function() {

  // create info window
    var infoWindow = new google.maps.InfoWindow({
      content   : $marker.html()
    });

    infoWindow.open( map, marker );
    infoWindows.push(infoWindow);
  });
}

我希望它会起作用。如果没有,请告诉我有关您的代码的更多详细信息。 谢谢

【讨论】:

  • 我正在使用您的代码,但是当我单击标记时出现以下错误:infoWindows is not defined
  • 我在我的答案中进行了编辑。添加 var infoWindows = [];在您的代码之上。您需要在将对象推入之前声明数组变量(在您的情况下为“infoWindows”)。
  • 谢谢。它已修复,我没有收到任何错误,但问题仍未解决,当我单击另一个标记时,它会保持所有 infowindows 打开
  • 尝试将 for 循环放在标记点击事件的一侧。或者你可以把你的示例代码放在 jsfiddle 上?
猜你喜欢
  • 1970-01-01
  • 2011-02-13
  • 2023-04-04
  • 2016-07-26
  • 2012-06-21
  • 1970-01-01
  • 1970-01-01
  • 2012-08-19
  • 1970-01-01
相关资源
最近更新 更多