将信息窗口添加到多个圆形覆盖图 [英] Adding info windows to multiple circle overlays
本文介绍了将信息窗口添加到多个圆形覆盖图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我无法为多个圈子叠加中的每一个添加信息窗口。
当我点击一个圆圈时，会出现一个信息窗口，但不是在我点击的圆圈上，而是在添加的最后一个圆圈上。似乎每次循环执行时，事件侦听器都会添加到每个圆圈，但信息窗口的内容是从添加的最后一个圆圈派生的。
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 =viewportcontent =initial-scale = 1.0，user-scalable = no>
< meta charset =utf-8>
< title>圈子< / 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>
//创建一个包含LatLng，人口的对象。
var cityPoints = {};
cityPoints [0] = {
center：new google.maps.LatLng（41.878113，-87.629798），
id：0，
addr：'avenue0'，
量级：100000
};
cityPoints [1] = {
center：new google.maps.LatLng（40.714352，-74.005973），
id：1，
addr：'avenue1'，
量级：100000
};
cityPoints [2] = {
center：new google.maps.LatLng（34.052234，-118.243684），
id：2，
addr：'avenue2'，
大小：100000
}
var cityCircle;
var infoWindow = new google.maps.InfoWindow（）;
函数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）;
（我在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>
I am having trouble adding an info window to each one of multiple circle overlays.
When I click on a circle an info window appears, but not on the circle I clicked but rather on the last circle added. It seems that each time the loop executes the event listener is added to every circle but the content of the info window is derived from the last circle added.
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);
});
}
解决方案 That's because the i parameter you pass is the last, always.
Try this
<!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>
这篇关于将信息窗口添加到多个圆形覆盖图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
