Javascript 向多个圆形覆盖添加信息窗口_Javascript_Google Maps Api 3

Javascript 向多个圆形覆盖添加信息窗口

javascript google-maps-api-3

Javascript 向多个圆形覆盖添加信息窗口,javascript,google-maps-api-3,Javascript,Google Maps Api 3,我在为多个圆形重叠中的每一个添加信息窗口时遇到问题。当我点击一个圆圈时，会出现一个信息窗口，但不是在我点击的圆圈上，而是在最后添加的圆圈上。似乎每次循环执行时，事件侦听器都会添加到每个循环中，但信息窗口的内容是从添加的最后一个循环中派生出来的 for (i in cityPoints) { var magnitudeOptions = { map: map, center: cityPoints[i].center, radius: ci

我在为多个圆形重叠中的每一个添加信息窗口时遇到问题。当我点击一个圆圈时，会出现一个信息窗口，但不是在我点击的圆圈上，而是在最后添加的圆圈上。似乎每次循环执行时，事件侦听器都会添加到每个循环中，但信息窗口的内容是从添加的最后一个循环中派生出来的

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

}

这是因为您传递的i参数始终是最后一个。试试这个

<!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>


圈子
#地图画布{
高度：500px；
宽度：500px；
//创建包含板条、填充的对象。
var cityPoints={}；
城市点[0]={
中心：新google.maps.LatLng（41.878113，-87.629798），
id:0，
地址：“avenue0”，
震级：100000
};
城市点[1]={
中心：新google.maps.LatLng（40.714352，-74.005973），
id:1，
地址：“avenue1”，
震级：100000
};
城市积分[2]={
中心：新google.maps.LatLng（34.052234，-118.243684），
id:2，
地址：“avenue2”，
震级：100000
}
var城市圈；
var infoWindow=new google.maps.infoWindow（）；
函数初始化（）{
变量映射选项={
缩放：4，
中心：新google.maps.LatLng（37.09024，-95.712891），
mapTypeId:google.maps.mapTypeId.TERRAIN
};
var map=new google.maps.map（document.getElementById（'map-canvas'），
地图选项）；
（i以城市点数表示）{
var幅值选项={
地图：地图，
中心：城市点[i]。中心，
半径：城市点[i]。震级，
id:cityPoints[i]。id，
地址：城市点[i]。地址：，
infoWindowIndex:i
};
cityCircle=新的google.maps.Circle（magnity选项）；
google.maps.event.addListener（cityCircle，'click'，（函数（cityCircle，i）{
返回函数（）{
infoWindow.setContent（cityPoints[i].id+“”+cityPoints[i].addr）；
infoWindow.setPosition（cityCircle.getCenter（））；
打开（地图）；
}
})（城市圈，i））；
}
}
google.maps.event.addDomListener（窗口“加载”，初始化）；

这被称为，谷歌有关于如何使用标记的信息。下面是如何使用圆圈。在代码中，“位置”是一个数组，包含我想要绘制为圆的所有纬度和经度

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

（i=0；i


currentLocation=位置[i]。latlng；
var currentLatLng=new google.maps.LatLng（parseFloat（currentLocation[0]），parseFloat（currentLocation[1]））
var newCircle=new google.maps.Circle({
中心:currentLatLng,，
半径：10000，
strokeColor:#0000FF“，
笔划不透明度：0.8，
冲程重量：2，
fillColor:#0000FF“，
填充不透明度：0.4，
地图：地图，
可点击：正确，
});
attachSecretMessage（位置[i].instname+'，学费：$'+位置[i].TutionFee02\u tf）
}
函数attachSecretMessage（TutionInfo）{
var infowindow=new google.maps.infowindow({
内容：学费信息，
职位：currentLatLng
});
myCity.addListener（'click'，function（））{
打开（地图）；
});
}

部分工作..当地图加载所有信息窗口时，甚至没有单击就打开了。如果我关闭了一个信息窗口，我无法通过单击圆圈再次打开它。Re Alki！您使用infoWindowsArray时没有向其推送任何内容。问题是我必须以某种方式引用我正在单击的圆圈，这是不可能的，因为每次循环执行时都会更新cityCircle，尽管圆圈仍保留在地图上。如果我错了，请纠正我仍然不起作用。我尝试了不同的方法，但仍然没有任何结果。归根结底，就是获取对单击的圆圈的引用。问..对我来说真的很有用！！=）@alk更新的代码是否仅允许打开1个信息窗口。如果我单击其他circle，上一个信息窗口自动关闭。您能建议我如何更改代码，使其仅在单击“关闭”按钮后关闭。因为有时我想看到几个信息窗口。谢谢，