使用 MarkerClusterer 在信息窗口中显示与每个标记关联的内容
Display the content associated at each marker in a infowindow using MarkerClusterer
我是 Javascript 的新手,我用这个创建了 Google 地图:
Using MySQL and PHP with Google Maps 和 MarkerClusterer。
经过几个小时的研究,它运行良好,但我仍然有问题。我需要在点击每个标记时有一个信息窗口。所以,我在我的圈子里添加了一个事件监听器。
问题是:对于所有标记,它显示的内容与我的 xml 文件最后一行的内容相同。
这里是代码:
function initMap()
{
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(48.85, 2.4),
zoom: 6
});
//taille de la fenêtre d'information
var infoWindow = new google.maps.InfoWindow({
maxWidth: 400
});
// Change this depending on the name of your PHP or XML file
downloadUrl(sourcexml, function(data)
{
var xml = data.responseXML;
var clusteredmarkers = [];
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++)
{
var idcart = markers[i].getAttribute('id');
var name = markers[i].getAttribute("titre");
var description = markers[i].getAttribute("description");
var type = markers[i].getAttribute("categorie");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var image = customImage[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: image.image,
title: name
});
google.maps.event.addListener(marker,'click', function() {
infoWindow.setContent(description);
infoWindow.open(map, this);
});
clusteredmarkers.push(marker);
}
var markerCluster = new MarkerClusterer(map,clusteredmarkers,{imagePath: 'images/m/m'});
});
}
任何建议,将不胜感激,谢谢:-)
创建新标记时,将其描述保存在其中。
var marker = new google.maps.Marker({
map: map,
position: point,
icon: image.image,
title: name,
description: description
});
在 addListener
中使用保存在被点击的标记中的描述。
google.maps.event.addListener(marker,'click', function() {
infoWindow.setContent(this.description);
infoWindow.open(map, this);
});
如果您想了解该 for 循环中发生的事情,请阅读以下内容:
JavaScript closure inside loops – simple practical example
我是 Javascript 的新手,我用这个创建了 Google 地图: Using MySQL and PHP with Google Maps 和 MarkerClusterer。
经过几个小时的研究,它运行良好,但我仍然有问题。我需要在点击每个标记时有一个信息窗口。所以,我在我的圈子里添加了一个事件监听器。
问题是:对于所有标记,它显示的内容与我的 xml 文件最后一行的内容相同。
这里是代码:
function initMap()
{
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(48.85, 2.4),
zoom: 6
});
//taille de la fenêtre d'information
var infoWindow = new google.maps.InfoWindow({
maxWidth: 400
});
// Change this depending on the name of your PHP or XML file
downloadUrl(sourcexml, function(data)
{
var xml = data.responseXML;
var clusteredmarkers = [];
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++)
{
var idcart = markers[i].getAttribute('id');
var name = markers[i].getAttribute("titre");
var description = markers[i].getAttribute("description");
var type = markers[i].getAttribute("categorie");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var image = customImage[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: image.image,
title: name
});
google.maps.event.addListener(marker,'click', function() {
infoWindow.setContent(description);
infoWindow.open(map, this);
});
clusteredmarkers.push(marker);
}
var markerCluster = new MarkerClusterer(map,clusteredmarkers,{imagePath: 'images/m/m'});
});
}
任何建议,将不胜感激,谢谢:-)
创建新标记时,将其描述保存在其中。
var marker = new google.maps.Marker({
map: map,
position: point,
icon: image.image,
title: name,
description: description
});
在 addListener
中使用保存在被点击的标记中的描述。
google.maps.event.addListener(marker,'click', function() {
infoWindow.setContent(this.description);
infoWindow.open(map, this);
});
如果您想了解该 for 循环中发生的事情,请阅读以下内容: JavaScript closure inside loops – simple practical example