Hinzufügen von Info-Fenstern zu mehreren Kreis-Overlays

Ich habe Probleme beim Hinzufügen eines Info-Fensters zu jedem von mehreren Kreis-Overlays. Wenn ich auf einen Kreis klicke, erscheint ein Info-Fenster, aber nicht auf dem Kreis klickte ich aber eher auf den letzten Kreis. Es scheint, dass jedes Mal, wenn die Schleife ausgeführt wird, der Ereignis-Listener jedem Kreis hinzugefügt wird, aber der Inhalt des Info-Fensters aus dem letzten hinzugefügten Kreis abgeleitet wird.

for (i in cityPoints) { var magnitudeOptions = { map: map, center: cityPoints[i].center, radius: cityPoints[i].magnitude, id:cityPoints[i].id, addr:cityPoints[i].addr, infoWindowIndex: i }; cityCircle = new google.maps.Circle(magnitudeOptions); circlesArray.push(cityCircle); infoWindow = new google.maps.InfoWindow({ content: cityPoints[i].id + " " + cityPoints[i].addr }); infoWindowsArray.push(infoWindow); google.maps.event.addListener(circlesArray[i], 'click', function (ev) { infoWindowsArray[i].setPosition(cityPoints[i].center); infoWindowsArray[i].open(map); }); } 

  • Machen Sie den Google Map-Fokus auf bestimmte Orte
  • Google Map API v3 Schatten alles außer für Polygon
  • Google Map API - mehrere Icons an falscher Stelle
  • Google Map wird nicht angezeigt
  • Das Update-Panel kann nicht richtig funktionieren
  • Center Google Maps (V3) auf Browser-Größe (ansprechend)
  • Google Maps API v3.5 Geocoder Sprachoption
  • Google Maps: Stellen Sie benutzerdefinierte Farbe für die Art der Marker ein
  • Ungenaue Google Maps Elevation Service Antwort bei der Aufteilung eines zu großen Pfades
  • Google Maps div zeigt sich nicht in JSBin
  • Konvertieren Sie Latitude / Longitude To Address
  • Google Maps API 3 - Begrenzung der Pan- / Kartenbegrenzungen
  • 2 Solutions collect form web for “Hinzufügen von Info-Fenstern zu mehreren Kreis-Overlays”

    Das ist, weil der I-Parameter, den du passierst, der letzte ist, immer. Versuche dies

     <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>Circles</title> <style> #map-canvas { height: 500px; width: 500px; </style> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <script> // Create an object containing LatLng, population. var cityPoints = {}; cityPoints[0] = { center: new google.maps.LatLng(41.878113, -87.629798), id: 0, addr: 'avenue0', magnitude: 100000 }; cityPoints[1] = { center: new google.maps.LatLng(40.714352, -74.005973), id: 1, addr: 'avenue1', magnitude: 100000 }; cityPoints[2] = { center: new google.maps.LatLng(34.052234, -118.243684), id: 2, addr: 'avenue2', magnitude: 100000 } var cityCircle; var infoWindow = new google.maps.InfoWindow(); function initialize() { var mapOptions = { zoom: 4, center: new google.maps.LatLng(37.09024, -95.712891), mapTypeId: google.maps.MapTypeId.TERRAIN }; var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); for (i in cityPoints) { var magnitudeOptions = { map: map, center: cityPoints[i].center, radius: cityPoints[i].magnitude, id:cityPoints[i].id, addr:cityPoints[i].addr, infoWindowIndex: i }; cityCircle = new google.maps.Circle(magnitudeOptions); google.maps.event.addListener(cityCircle, 'click', (function(cityCircle, i) { return function() { infoWindow.setContent(cityPoints[i].id + " " + cityPoints[i].addr); infoWindow.setPosition(cityCircle.getCenter()); infoWindow.open(map); } })(cityCircle, i)); } } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map-canvas"></div> </body> </html> 

    Dies wird als Schließung bezeichnet , und Google hat Informationen darüber, wie man es mit Markierungen macht. Unten ist, wie man es mit Kreisen macht. Im Code ist "Orte" ein Array, das alle Breiten und Längengrade enthält, die ich als Kreise darstellen möchte.

     for (i = 0; i < locations.length; i++) { currentLocation = locations[i].latlng; var currentLatLng = new google.maps.LatLng(parseFloat(currentLocation[0]),parseFloat(currentLocation[1]) ) var newCircle = new google.maps.Circle({ center: currentLatLng, radius:10000, strokeColor:"#0000FF", strokeOpacity:0.8, strokeWeight:2, fillColor:"#0000FF", fillOpacity:0.4, map:map, clickable:true, }); attachSecretMessage(locations[i].instname+', Tuition: $'+locations[i].tuitionfee02_tf) } function attachSecretMessage(tuitionInfo){ var infowindow = new google.maps.InfoWindow({ content: tuitionInfo, position: currentLatLng }); myCity.addListener('click', function() { infowindow.open(map); }); } 
    Lassen Sie uns Javascript Schönheit und nützlich machen.