谷歌地图在缩放变化时添加信息窗口监听器答案

【问题标题】：Google maps add infowindow listener on zoom change谷歌地图在缩放变化时添加信息窗口监听器
【发布时间】：2014-04-25 21:50:03
【问题描述】：

我想为我拥有的每个标记添加一个信息窗口，并在缩放更改时打开信息窗口。我已经尝试添加一个标准的 onclick 信息窗口并且它可以工作，但是“zoom_changed”不起作用。

完整代码如下：

<!DOCTYPE html>
<html>
  <head>
    <title>NextNine customer map</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <META HTTP-EQUIV="Refresh" CONTENT="500">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }

       .labels {
     color: black;
     background-color: #6699FF;
     font-family: "Lucida Grande", "Arial", sans-serif;
     font-size: 10px;
     font-weight: bold;
     text-align: center;
     width: 100px;     
     border: 2px solid #6699FF;
     white-space: nowrap;}
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://jquery-xml2json-plugin.googlecode.com/svn/trunk/jquery.xml2json.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
    <script src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.0.1/src/markerwithlabel.js"></script>
    <script>
var markers = [];
var map = null;
var counter =0;
var counter_part =0;

var contencts = new Array();
contencts [0] = "NextNine89";
contencts [1] = "NextNine69";

function initialize() {
    var chicago = new google.maps.LatLng(35.890026,-5.523652);
    var mapOptions = {
        zoom: 3,
        center: chicago,
        mapTypeId: google.maps.MapTypeId.ROADMAP 
  }

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);

  $.get('Customers.xml', function(xml) {
      var jsonObj = $.xml2json(xml);
        $.each(jsonObj.Marker, function(){
            var stat = this.status == "Critical" ? 'http://maps.google.com/mapfiles/ms/micons/red-dot.png' : 'http://maps.google.com/mapfiles/ms/micons/green-dot.png';
                 var mark = {
                        title: this.title,
                        latitude: this.latitude,
                        longitude: this.longitude,
                        icon: stat
                        }
                markers.push(mark);
        });
        for(var i=0; i< markers.length; i++){
          var lon = markers[i].longitude;
          var lat = markers[i].latitude;
          var image = markers[i].icon;
          var custname = markers[i].title;
          PlaceMarker(lat,lon, image, custname); 
        } 
});     

function PlaceMarker(lat, lon, image, custname) {

     var myLatlng = new google.maps.LatLng(lat,lon);
     var marker = new MarkerWithLabel({
       position: myLatlng,
       map: map,
       icon: image,
       labelContent: custname,
       labelAnchor: new google.maps.Point(22, 0),
       labelClass: "labels", // the CSS class for the label
       labelStyle: {opacity: 0.75}
     });

     var infowindow = new google.maps.InfoWindow({
      content: 'Site Info:'});

     google.maps.event.addListener(marker, 'zoom_changed', function() {
    infowindow.open(map,marker);});
}

function recenter ()
{
    var location = new google.maps.LatLng(markers[counter].latitude,markers[counter].longitude);
    map.setCenter (location);
    map.setZoom (9);
}

function centerback()
{
    var location = new google.maps.LatLng(35.890026,-5.523652);
    map.setCenter (location);
    map.setZoom (3);
}

window.setInterval(function(){
  recenter();
  if(counter==(markers.length-1))
  {
    counter=0;
    counter_part=0;
    centerback();
  }
  else
  {
    if(counter_part==5)
    {
        centerback();
        counter_part=0;}
    else
        {
            recenter();
            counter++;
            counter_part++;}
  }

}, 15000);
    </script>
  </head>
  <body>
     <div id="map-canvas"></div>
  </body>
</html>

每 X 秒我放大一个不同的标记，当我放大时我想打开一个信息窗口。一旦我放大到不同的标记，我希望信息窗口关闭。

【问题讨论】：

标记没有zoom_changed 事件。 Insted，将该事件绑定到地图。但是，这会改变您代码的行为，您可能需要检查您的代码。
如果我将事件绑定到地图，我可以控制打开哪个信息窗口吗？
我说过，您应该考虑在地图缩放更改时会打开哪些信息窗口。或者您可以更具体地说明您想要实现的目标。
每隔 X 秒我放大一个不同的标记，当我放大时我想打开一个信息窗口。一旦我放大到不同的标记，我希望信息窗口关闭。

标签： javascript google-maps google-maps-api-3 google-maps-markers

【解决方案1】：

我为您的问题创建了一个FIDDLE。

关于我所做的不同之处以及您应该做的更多的一些说明：

您正在向markers[] 数组推送一些信息，但它的元素不是 Google 地图标记对象。因此，最好将 MarkerWithLabel 对象推送到该数组，因为我们正在使用它们传递给 infowindow open() 方法。
由于我们不知道将根据缩放信息打开哪个标记，因此我将 infowindow 设为全局并在您的 recenter() 函数中动态更改其内容。
我们正在从数组中获取标记对象，我们只需要在当前选定的标记上显示信息窗口。因此，不再需要 zoom_changed 事件。

在我的小提琴中，我创建了一个 JSON 对象，它与您从 XML 文件中获得的类型相同。所以你需要调整你的$.get() 方法。

此外，在我的本地计算机上，这段代码没有问题，但在小提琴中，我对第一个标记有问题，它的中心很好地聚焦，但信息窗口在第二个标记的顶部打开。

【讨论】：