InfoWindow on Marker使用MarkerClusterer

Question

这是我的HTML代码。我尝试过在标记上添加infowindow，但它不想工作。我的数据是从“Alle_Ortswahlen.page1.xml”文件加载的。 有没有人有一个想法如何添加infoWindow到每个标记？

<script type="text/javascript"> 
    google.load('maps', '3', { 
    other_params: 'sensor=false' 
    }); 
    google.setOnLoadCallback(initialize); 
function initialize() { 

    var stack = []; 

    var center = new google.maps.LatLng(48.136, 11.586); 
    var options = { 
     'zoom': 5, 
     'center': center, 
     'mapTypeId': google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), options); 
    GDownloadUrl("Alle_Ortswahlen.page1.xml", function(doc) { 
    var xmlDoc = GXml.parse(doc); 
    var markers = xmlDoc.documentElement.getElementsByTagName("ROW"); 
    for (var i = 0; i < markers.length; i++) { 
     // obtain the attribues of each marker 
     var lat = parseFloat(markers[i].getAttribute("Field4")); 
     var lng = parseFloat(markers[i].getAttribute("Field6")); 
     var marker = new google.maps.Marker({ 
      position : new google.maps.LatLng(lat, lng), 
      map: map, 
      title:"This is a marker" 
     });  
     stack.push(marker); 
    } 
    var mc = new MarkerClusterer(map,stack); 
    }); 
} 
</script> 

Answer 1

所以你需要做的是添加一些代码，里面的for循环，每个相关联的标记信息窗口onclick事件处理程序。我假设您只想一次显示1个infowindow，即您单击某个标记，infowindow会显示相关内容。如果您再点击另一个标记，第一个infowindow会消失，并且一个新的标记重新出现在另一个标记上。而不是让多个infowindows同时可见。

GDownloadUrl("Alle_Ortswahlen.page1.xml", function(doc) { 
    var xmlDoc = GXml.parse(doc); 
    var markers = xmlDoc.documentElement.getElementsByTagName("ROW"); 
    // just create one infowindow without any content in it 
    var infowindow = new google.maps.InfoWindow({ 
     content: '' 
    }); 
    for (var i = 0; i < markers.length; i++) { 
     // obtain the attribues of each marker 
     var lat = parseFloat(markers[i].getAttribute("Field4")); 
     var lng = parseFloat(markers[i].getAttribute("Field6")); 
     var marker = new google.maps.Marker({ 
      position : new google.maps.LatLng(lat, lng), 
      map: map, 
      title:"This is a marker" 
     });  
     // add an event listener for this marker 
     google.maps.event.addListener(marker , 'click', function() { 
     // assuming you have some content in a field called Field123 
       infowindow.setContent(markers[i].getAttribute("Field123")); 
       infowindow.open(map, this); 
     }); 
     stack.push(marker); 
    } 
    var mc = new MarkerClusterer(map,stack); 
    }); 

Answer 2

在for循环之前，创建一个空的infowindow对象。

var infowindow = new google.maps.InfoWindow(); 

比在为周期，在标记后，添加事件侦听器，像这样：

  google.maps.event.addListener(marker, 'click', (function(marker, i) { 
       return function() { 
        infowindow.setContent("You might put some content here from your XML"); 
        infowindow.open(map, marker); 
       } 
      })(marker, i)); 

有一些封闭的魔法传递回调参数传递给addListener方法时发生的事情。如果你不熟悉它，看看这里：

Mozilla Dev Center: Working with Closures

所以，你的代码应该是这个样子：

google.load('maps', '3', { 
      other_params: 'sensor=false' 
     }); 

     google.setOnLoadCallback(initialize); 

     function initialize() { 

      var stack = []; 

      var center = new google.maps.LatLng(48.136, 11.586); 
      var options = { 
       'zoom': 5, 
       'center': center, 
       'mapTypeId': google.maps.MapTypeId.ROADMAP 
      }; 
      var map = new google.maps.Map(document.getElementById("map_canvas"), options); 
      var infowindow = new google.maps.InfoWindow(); 
      GDownloadUrl("Alle_Ortswahlen.page1.xml", function(doc) { 
       var xmlDoc = GXml.parse(doc); 
       var markers = xmlDoc.documentElement.getElementsByTagName("ROW"); 
       for (var i = 0; i < markers.length; i++) { 
        // obtain the attribues of each marker 
        var lat = parseFloat(markers[i].getAttribute("Field4")); 
        var lng = parseFloat(markers[i].getAttribute("Field6")); 
        var marker = new google.maps.Marker({ 
         position : new google.maps.LatLng(lat, lng), 
         map: map, 
         title:"This is a marker" 
        });  
        google.maps.event.addListener(marker, 'click', (function(marker, i) { 
         return function() { 
          infowindow.setContent("You might put some content here from your XML"); 
          infowindow.open(map, marker); 
         } 
        })(marker, i)); 
        stack.push(marker); 
       } 
       var mc = new MarkerClusterer(map,stack); 
      }); 
     }