InfoWindow trên Marker sử dụng MarkerClusterer

Question

Đây là mã html của tôi. Tôi đã thử bất cứ điều gì để thêm một infowindow trên các dấu hiệu nhưng nó không muốn làm việc. Dữ liệu của tôi đang tải từ tệp "Alle_Ortswahlen.page1.xml". Có ai có ý tưởng làm thế nào tôi có thể thêm infoWindow vào mỗi điểm đánh dấu?

<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

Vì vậy, những gì bạn cần làm là thêm một số mã, bên trong vòng lặp của bạn, liên kết trình xử lý sự kiện onclick với mỗi điểm đánh dấu. Tôi giả sử bạn chỉ muốn có 1 infowindow hiển thị tại một thời điểm, tức là bạn bấm vào một điểm đánh dấu, infowindow xuất hiện với nội dung có liên quan. Nếu sau đó bạn nhấp vào một điểm đánh dấu khác, infowindow đầu tiên biến mất và một điểm mới xuất hiện lại được gắn với điểm đánh dấu khác. Thay vì có nhiều infowindows tất cả có thể nhìn thấy cùng một lúc.

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

Trước khi tạo chu kỳ, hãy tạo một đối tượng infowindow trống.

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

Thần trong cho chu kỳ, sau khi đánh dấu, thêm một người biết lắng nghe sự kiện, như thế này:

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

Có một số kỳ diệu xảy ra khi đóng cửa đi qua các tham số callback với phương pháp addListener. Nếu bạn không quen thuộc với nó, hãy nhìn vào đây:

Mozilla Dev Center: Working with Closures

Vì vậy, mã của bạn nên tìm một cái gì đó như thế này:

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