我关注了this tutorial创建自定义 Google map 。我已经包括了一些其他元素,例如将其链接到 Wordpress 和对标记进行聚类。
除了每个标记上的信息窗口中的信息外,一切都很好用。我似乎无法更改每一个中的信息。我认为通过更改以下行它会改变它但没有任何影响:
var html = "<b>" + name + "</b> <br/>" + address;
我在哪里可以将自己的自定义数据放入窗口中?另外,如果我可以在上面设置窗口样式,那就更好了。
看来集群器是问题所在,主要是这一部分,我如何获取 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);
});
}
具体这个,不是把html内容通过clusterer...至少这个实际上是在改变window中的数据,只需要在不破坏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);
目前我拥有的最接近的是这个,但它为每个标记显示相同的信息。它显示了 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);
最佳答案
真不敢相信我没有早点想到这个!!
这只是在监听器中构建字符串的情况。
// 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);
}
关于javascript - 使用 Google map 标记更改信息窗口中的数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15114963/