使用Google地图标记更改信息窗口中的数据 [英] Changing data in the info window with Google Map markers
问题描述
我遵循本教程创建自定义Google地图。我已经包含了一些其他元素，例如将它连接到Wordpress并聚集标记。
除了每个标记上的信息窗口中的信息。我似乎无法改变每一个中的信息。我想通过改变下面几行它会改变它，但是没有影响它：
var html =< b> + name +< / b>< br /> +地址;
我可以在哪里将自己的自定义数据放入窗口中？此外，如果我可以在窗口上设计风格会更好。
似乎聚合器是问题，主要是这部分，我该如何把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;
//根据您的PHP文件的名称更改此值
downloadUrl（<？php bloginfo（'stylesheet_directory'）;？> /phpsqlajax_genxml.php，函数）{
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，
位置：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 ... at至少这实际上是改变了窗口中的数据，只需输出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）;
我不相信我没有想到这个更快！
它只是在侦听器中创建字符串的一个例子。 c $ c> //根据你的PHP文件的名称改变它
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 ：地图，
位置：点，
图标：icon.icon，
阴影：icon.shadow
}）;
google.maps.event.addListener（marker，'click'，（function（marker，i）{
return function（）{
var name = markers [i] .getAttribute（名称）;
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）;
}
I've followed this tutorial to create a custom Google Map. I've included a few other elements such as linking it up to Wordpress and clustering the markers.
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?
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:
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:
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);
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);
}
这篇关于使用Google地图标记更改信息窗口中的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
