Question

我想为每个标记添加一个信息窗口，并在缩放发生变化时打开信息窗口。我尝试添加一个标准的onclick infowindow并且它可以工作，但“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秒，我放大一个不同的标记，当我放大时，我想打开一个信息窗口。一旦我缩放到另一个标记，我希望infowindow关闭。

Answer 1

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

关于我做了哪些不同以及你应该做些什么的一些注意事项：

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

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

此外，在我的本地计算机上，这段代码没有问题，但是在小提琴中，我对第一个标记有问题，它的中心得到了很好的集中，但是infowindow正在第二个标记的顶部打开。

Google地图会在缩放更改时添加infowindow侦听器

1 个答案: