我需要在信息窗口中显示不同的数据,当有人单击许多可用折线时会弹出,
我已经为此研究了许多解决方案,这是我遇到的一个例子,
Google Maps API - Arrays and InfoWindows 的問題
但是这个解决方案似乎对我不起作用,当我单击折线时它不会显示信息窗口。 请帮帮我...我使用了不同的代码,它只显示数组的最后一个元素。我所做的是通过 for 循环添加折线。请帮助我解决这个问题..这是我的代码,
var map;
var polylinesIn = [];
var infowindow = new google.maps.InfoWindow();
var infowindowArray = [];
function initialize() {
var styles = [{ featureType: "landscape", stylers: [{ color: "#000514"}] }, { featureType: "administrative.country", stylers: [{ weight: 0.1 }, { color: "#009acd"}] }, { featureType: "water", stylers: [{ color: "#1f4fa5dc"}] }, { featureType: "road", stylers: [{ color: "#000514"}] }, { featureType: "administrative.locality", stylers: [{ color: "#7cfc00" }, { visibility: "off"}] }, { featureType: "landscape.man_made", stylers: [{ visibility: "off"}] }, { featureType: "poi", stylers: [{ visibility: "off"}] }, { featureType: "administrative.province", stylers: [{ visibility: "on"}]}];
var mapOptions = {
center: new google.maps.LatLng(7.3, 80.6333),
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
map.setOptions({ styles: styles });
var lineSymbolIn = {
path: google.maps.SymbolPath.CIRCLE,
scale: 2,
strokeColor: '#FF8000'
};
for (var i = 0; i < 5; i = i + 1) {
var conentVal = i.toString();
//var infowindow = new google.maps.InfoWindow();
var netTrafficIn = [
new google.maps.LatLng(53.3333866 + i, -6.247401 + i),
new google.maps.LatLng(7.3, 80.6333)];
var polylineIn = new google.maps.Polyline({
path: netTrafficIn,
icons: [{ icon: lineSymbolIn, offset: '100%'}],
strokeColor: " #FF8000",
strokeOpacity: 1.0,
strokeWeight: 1,
geodesic: true
});
polylineIn.setMap(map);
polylinesIn[i]=polylineIn;
animateCircleIn(i);
addInfowindow(i.toString());
createInfoWindow(i);
}
}
function addInfowindow(contentVal) {
infowindow = new google.maps.InfoWindow({ content: contentVal });
infowindowArray.push(infowindow);
}
function createInfoWindow(id) {
google.maps.event.addListener(polylinesIn[id], 'click', (function (id) {
return function () {
infowindowArray[id].open(map, polylinesIn[id]);
}
})(id));
}
function animateCircleIn(id) {
var count = 0;
offsetId = window.setInterval(function () {
count = (count + 1) % 200;
var icons = polylinesIn[id].get('icons');
icons[0].offset = (count / 2) + '%';
polylinesIn[id].set('icons', icons);
}, 20);
}
非常感谢:)
Okey我按照yal的建议做了一些更改,但仍然没有出现信息窗口。请帮忙..非常感谢:)
您链接到的另一个问题描述了您的问题。您必须使用迭代变量的副本,以便它不会更改其值。我在你上一个问题中向你展示了它:在多条测地线折线上对符号进行动画处理
您只需将附加事件移动到已经这样做的功能 animateCircle:
function animateCircleIn(id) {
var count = 0;
offsetId = window.setInterval(function () {
count = (count + 1) % 200;
var icons = polylinesIn[id].get('icons');
icons[0].offset = (count / 2) + '%';
polylinesIn[id].set('icons', icons);
}, 20);
google.maps.event.addListener(polylinesIn[id], 'click', function (event) {
infowindow.content = "x" + id.toString();
infowindow.position = event.latLng;
infowindow.open(map); //,flightPath);
});
}
但这里真正的问题是,你没有从上一个问题或你在问题中链接的问题中学到任何东西。你应该阅读"javascript closure"。我真的希望这是你最后一次问它。
问题是你对你拥有的所有折线使用相同的信息窗口。当您更改这部分代码中信息窗口的值时
google.maps.event.addListener(polylinesIn[id], 'click', function (event) {
infowindow.content = "x" + id.toString();
infowindow.position = event.latLng;
infowindow.open(map); //,flightPath);
});
您通过引用更改第一个的值,所有与折线相关的信息窗口也将更改。您在函数中使用的信息窗口不是实例化的信息窗口的副本,而是引用。
在这种情况下,您可以尝试两种不同的事情。首先是通过使用函数中的infowindow = new google.maps.InfoWindow();
为所需的每条折线创建一个信息窗口。
或者,您可以创建一个孔新范围。在这种情况下,我建议你阅读这篇文章:Google Maps API - Trouble with Arrays and InfoWindows
以下代码有效:
(function (id) {
google.maps.event.addListener(polylinesIn[id], 'click', function (event) {
infowindow.content = "x" + id.toString();
infowindow.position = event.latLng;
infowindow.open(map); //,flightPath);
});
})(i)
我在 for 循环中添加了这个闭包,解决了这个问题。谢谢你们为我指出正确的方向,伙计们。:)