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

  • Wie kann ich den Kreis in die Sektoren in Google Maps aufteilen?
  • Wie man mit brng.toRad umgehen kann, ist keine Funktion
  • Google Map im Bootstrap Tab
  • Wiederverwendung von Google Maps API auf Single Page Application
  • ScaleControl wird nicht korrekt in .net angezeigt
  • Mehrere Typen von Google-Plätzen zurückgeben autocompleteService.getPlacePredictions
  • Google Maps API ändern?
  • Hinzufügen eines einfachen Marker-Clusters zu Google Maps
  • Google Map API v3 - Grenzen setzen und zentrieren
  • Wie zeichnet man einen rechteckigen Bereich auf einer großen Google Map und Abfragedatenbank, um Orte / Punkte zu finden, die im Rechteck vorhanden sind?
  • Google Maps Klickereignis auf Route
  • JS Google Maps API v3 Animierte Marker zwischen Koordinaten
  • 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.