InfoWindow on Marker MarkerClusterer kullanarak

Question

Bu benim html kodum. İşaretleyicilere bir sürü eklemek için her şeyi deniyorum ama çalışmak istemiyorum. Verilerim "Alle_Ortswahlen.page1.xml" dosyasından yükleniyor. Herkesin bir fikri var mı? Her bir işaretçiye infoWindow'u nasıl ekleyebilirim?

<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

Yani yapmanız gereken sizin için-döngü, her işaretleyici ile infowindow onclick olay işleyicisi ilişkilendirerek içinde bazı kodlar eklemektir. Tek bir seferde sadece 1 adet gösterim yapmak istediğinizi varsayardım, yani bir işaretçiyi tıklatırsanız, ilgili pencere ile ilgili pencere görünür. Daha sonra başka bir işaretçiyi tıklarsanız, ilk hava perdesi kaybolur ve diğer işaretçiye eklenmiş olan yeni bir görünüm görüntülenir. Aynı anda görünür birden çok infowindows sahip olmak yerine.

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

Döngüden önce, boş bir infowindow nesnesi oluşturun.

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

döngüsü için de daha, işaretleyici sonra, bu gibi bir olay dinleyicisi ekleyin:

  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 yöntemine geri arama bağımsız değişkeni geçerken oluyor bazı kapatma büyü vardır. Onunla aşina değilseniz, burada bir göz atın:

Mozilla Dev Center: Working with Closures

Yani, kod aşağıdaki gibi görünmelidir:

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