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); 
      }); 
     }