javascript 使用 Google 地图标记更改信息窗口中的数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15114963/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing data in the info window with Google Map markers
提问by Rob
I've followed this tutorialto create a custom Google Map. I've included a few other elements such as linking it up to Wordpress and clustering the markers.
我已按照本教程创建自定义 Google 地图。我已经包含了一些其他元素，例如将其链接到 Wordpress 并将标记聚类。
It's all working great apart from the info in the info windows on each marker. I just can't seem to change the info within each one. I thought by changing the following lines it would change it but nothing affects it:
除了每个标记上的信息窗口中的信息外，一切都很好。我似乎无法更改每一个中的信息。我认为通过更改以下几行会改变它，但没有任何影响：
var html = "<b>" + name + "</b> <br/>" + address;
Where can I put in my own custom data into the window? Also, if I could style the window on that would be even better.
我在哪里可以将我自己的自定义数据放入窗口？另外，如果我可以设置窗口的样式会更好。
It seems the clusterer is the problem, mainly this section, how can I take the html content and place it into the info window?
看来是clusterer的问题，主要是这个部分，我怎样才能把html内容放到信息窗口中？
function load() {
var cluster = [];
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(52.375599, -3.471680),
zoom: 8,
mapTypeId: 'roadmap'
});
var infowindow = new google.maps.InfoWindow();
var min = .999999;
var max = 1.000002;
// Change this depending on the name of your PHP file
downloadUrl("<?php bloginfo('stylesheet_directory'); ?>/phpsqlajax_genxml.php ", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var offsetLat = markers[i].getAttribute("lat") * (Math.random() * (max - min) + min);
var offsetLng = markers[i].getAttribute("lng") * (Math.random() * (max - min) + min);
var point = new google.maps.LatLng(offsetLat, offsetLng);
var html = "<b>" + name + "</b> <br/>" + address;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
// infowindow.setContent(markers[i].getAttribute("name"));
// infowindow.open(map, marker, html);
infowindow.setContent(html); infowindow.open(map, marker);
}
})(marker, i));
cluster.push(marker);
}
var mc = new MarkerClusterer(map,cluster);
});
}
Specifically this, it's not putting the html content through the clusterer... at least this is actually changing the data in the window, just need to output the html content without breaking the clusterer:
具体这个，它不是把html内容通过clusterer......至少这实际上是在改变窗口中的数据，只需要在不破坏clusterer的情况下输出html内容：
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(markers[i].getAttribute("name"));
infowindow.open(map, marker, html);
}
})(marker, i));
cluster.push(marker);
The closest I have it so far is this but it shows the same info for every marker. It's showing the html content:
到目前为止，我最接近的是这个，但它为每个标记显示相同的信息。它显示了 html 内容：
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
// infowindow.setContent(markers[i].getAttribute("name"));
// infowindow.open(map, marker, html);
infowindow.setContent(html); infowindow.open(map, marker);
}
})(marker, i));
cluster.push(marker);
回答by Rob
Can't believe I didn't think of this sooner!!
不敢相信我没有早点想到这个！！
It just a case of building the string in the listener.
这只是在侦听器中构建字符串的一种情况。
// Change this depending on the name of your PHP file
downloadUrl("<?php bloginfo('stylesheet_directory'); ?>/phpsqlajax_genxml.php ", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var type = markers[i].getAttribute("type");
var offsetLat = markers[i].getAttribute("lat") * (Math.random() * (max - min) + min);
var offsetLng = markers[i].getAttribute("lng") * (Math.random() * (max - min) + min);
var point = new google.maps.LatLng(offsetLat, offsetLng);
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var html = "<b>" + name + "</b> <br/>" + address;
infowindow.setContent(html);
infowindow.open(map, marker, html);
// infowindow.setContent(html);
// infowindow.open(map, marker);
}
})(marker, i));
cluster.push(marker);
}
回答by Rafe
If I'm reading it correctly. You are trying to set content 'after' setting the marker.
如果我读对了。您正在尝试在设置标记后设置内容。
This should be the other way around. Move the piece where you set the html to before you push it to the cluster.
这应该是相反的。在将其推送到集群之前移动您设置 html 的部分。
edit:
编辑：
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var offsetLat = markers[i].getAttribute("lat") * (Math.random() * (max - min) + min);
var offsetLng = markers[i].getAttribute("lng") * (Math.random() * (max - min) + min);
var point = new google.maps.LatLng(offsetLat, offsetLng);
//var html = "<b>" + name + "</b> <br/>" + address;
var infowindow = new google.maps.InfoWindow({content: "<b>" + name + "</b> <br/>" + address});
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
//google.maps.event.addListener(marker, 'click', (function(marker, i) {
// return function() {
// infowindow.setContent(markers[i].getAttribute("name"));
// infowindow.open(map, marker, html);
// }
// })(marker, i));
google.maps.event.addListener(marker, 'click', function(marker, i){infowindow.open(map,marker);})(marker, i);
cluster.push(marker);
}
Not sure about the (marker, i) pieces. I assume they are used by the marker manager to keep trakc of what's what. Those two changes (I commented out your lines and added one below) seem to be the next logical step.
不确定 (marker, i) 件。我假设标记管理器使用它们来跟踪什么是什么。这两个更改（我注释掉了您的台词并在下面添加了一个）似乎是下一个合乎逻辑的步骤。
回答by Walter Aguilar
i had a similar problem, i figure this out, to change the content in marker infowindow
我有一个类似的问题，我想通了，要更改标记信息窗口中的内容
var marker = new MarkerWithLabel({
id: "costume_ID",/*<---this is the start of the trick*/
position: new google.maps.LatLng(lat,lon),
icon: "../images/icon-bla.png",
map: map,
title: 'bla',
labelContent: 'bla,bla,
labelClass: "labels",
labelStyle: {opacity: 1.0}
})
google.maps.event.addListener(marker, 'click', (function() {
return function(){
infowindow.setContent(infor(this.id));/*<--- here is the trick*/
infowindow.open(map, this);
map.setCenter(this.getPosition());
}});
and than set the function that will output whatever you whant, if you have the info in variables.
然后设置将输出您想要的任何内容的函数，如果您有变量中的信息。
function infor(im){
return "<div><b>INFOWINDOW</b><br>Date: "+var[im].date+"<br>Sync: "+var[im].sync+"...bla,bla,bla</div>";
}/*THIS FUNCTION RETURN THE STING TO SHOW ION THE INFOWINDOW*/
回答by Ujwala Nanavare
The issue is with your closure. The forloop isn't handling your scope correctly. Extract all the code from inside the forloop into a separate function and the closure should work.
问题在于您的关闭。该for回路不正确处理您的范围。将for循环内部的所有代码提取到一个单独的函数中，闭包应该可以工作。
