hinzufügen Onclick Zuhörers zu Google Maps Marker JavaScript

Question

Ich schrieb diesen Code:

<script type="text/javascript"> 
    var address = JSON.parse('<?php echo $jsonLocations ?>'); 
    console.log(address.locations[0]); 
    var latitude = '1'; 
    var longitude = '1'; 

    function initMap() { 
     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 12, 
      center: new google.maps.LatLng(latitude, longitude) 
     }); 
     for(var i = 0; i < address.locations.length; i++){ 

      new google.maps.Marker({ 
       position: new google.maps.LatLng(address.locations[i]['lat'], address.locations[i]['long']), 
       map: map 
      }).addListener('click', function(){ 
       new google.maps.InfoWindow({ 
        content: '<div id="content">'+ 
      '<div id="siteNotice">'+ 
      '</div>'+ 
      '<h5>' + i +'</h5>'+ 
      '<div id="bodyContent">'+ 
      '</div>'+ 
      '</div>' 
       }).open(map, this); 
      }) 
     } 
    } 

</script> 

Ich versuche i onClick der Markierung angezeigt werden soll. So zum ersten Hersteller sollte ich 0 sein und für die zweite 1. Aber irgendwie i ist immer der gleiche Wert

Answer 1

Dies ist ein klassisches Verschluss Problem lesen kann. Die Funktion, die die Variable i verwendet, ist ein asynchroner Rückruf.

Das erste, was passiert, ist, dass alle Marker erstellt werden. Daher wird iaddress.locations.length am Ende der Schleife sein. Die asynchronen Callbacks verweisen jetzt auf diese exakte Variable.

Es gibt einige mögliche Lösungen dafür:

der LET-Anweisung verwenden, wenn Sie in der Lage sind ES6 JavaScript Funktion zu nutzen:

for(let i = 0; i < address.locations.length; i++){ 
    [...] 
} 

Das zweite ist ein Verschluss mit genau dieser Bindung zu erstellen:

for(var i = 0; i < address.locations.length; i++){ 
    (function(i){ 
     [...] 
    })(i) 
} 

die letzte Option für Sie ist es, die Function.bind Methode zu verwenden.

for(var i = 0; i < address.locations.length; i++){ 

    new google.maps.Marker({ 
     position: new google.maps.LatLng(address.locations[i]['lat'], address.locations[i]['long']), 
     map: map 
    }).addListener('click', (function(i){ 
     new google.maps.InfoWindow({ 
      content: '<div id="content">'+ 
    '<div id="siteNotice">'+ 
    '</div>'+ 
    '<h5>' + i +'</h5>'+ 
    '<div id="bodyContent">'+ 
    '</div>'+ 
    '</div>' 
     }).open(map, this); 
    }).bind(this,i)) 
} 

Ich hoffe, dass eine dieser Methoden für Sie arbeiten wird.

Answer 2

Dies geschieht, weil das Click-Ereignis später in der Zeit passiert, und dann i hat den letzten Wert ...

Um dies zu beheben, können Sie eine selbstaufrufende anonyme Funktion innerhalb der for-Schleife verwenden - auf diese Weise erstellen Sie einen Bereich für jede Schleife und der Wert i bleibt für die click, wenn es passiert.

Dies wird Closure genannt - Sie mehr über Schließungen here und here

function initMap() { 
 

 
    var address = { 
 
    locations: [{ 
 
     "lat": 30.53625, 
 
     "lng": -111.92674, 
 
    }, { 
 
     "lat": 33.53625, 
 
     "lng": -112.92674, 
 
    }, { 
 
     "lat": 32.53625, 
 
     "lng": -111.92674, 
 
    }, { 
 
     "lat": 33.53625, 
 
     "lng": -115.92674, 
 
    }] 
 
    }; 
 

 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 4, 
 
    center: new google.maps.LatLng(32.53625, -111.92674) 
 
    }); 
 
    var markers = []; 
 
    for (var i = 0; i < address.locations.length; i++) { 
 

 
    (function(index) { /* <--- Self invoking function */ 
 
     var marker = new google.maps.Marker({ 
 
     position: new google.maps.LatLng(address.locations[index]['lat'], address.locations[index]['lng']), 
 
     map: map 
 
     }); 
 

 
     marker.addListener('click', function() { 
 
     new google.maps.InfoWindow({ 
 
      content: '<div id="content">' + 
 
      '<div id="siteNotice">' + 
 
      '</div>' + 
 
      '<h5>' + index + '</h5>' + 
 
      '<div id="bodyContent">' + 
 
      '</div>' + 
 
      '</div>' 
 
     }).open(map, this); 
 

 
     markers.push(marker); 
 
     }); 
 
    })(i); /* <---- Pass the index to the closure to keep its value */ 
 
    } 
 

 
}

<script async defer type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&callback=initMap"></script> 
 

 
<div id="map" style="width:500px;height:150px"></div>