使用MarkerClusterer的Marker上的InfoWindow [英] InfoWindow on Marker using MarkerClusterer
本文介绍了使用MarkerClusterer的Marker上的InfoWindow的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是我的html代码。我尝试过在标记上添加infowindow，但它不想工作。我的数据是从Alle_Ortswahlen.page1.xml文件加载的。
任何人都有一个想法，我怎样才能将infoWindow添加到每个标记？
< script type =text /的javascript>
google.load（'maps'，'3'，{
other_params：'sensor = false'
}）;
google.setOnLoadCallback（initialize）;
函数initialize（）{
var stack = [];
var center = new google.maps.LatLng（48.136，11.586）;
var options = {
'zoom'：5，
'center'：center，
'mapTypeId'：google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map（document.getElementById（map_canvas），options）;
GDownloadUrl（Alle_Ortswahlen.page1.xml，function（doc）{
var xmlDoc = GXml.parse（doc）;
var markers = xmlDoc.documentElement.getElementsByTagName（ROW） ;
for（var i = 0; i< markers.length; i ++）{
//获得每个标记的属性
var lat = parseFloat（markers [i] .getAttribute Field4））;
var lng = parseFloat（markers [i] .getAttribute（Field6））;
var marker = new google.maps.Marker（{
position：new google.maps.LatLng（lat，lng），
map：map，
title：This is a marker
}）;
stack.push（marker）;
}
var mc = new MarkerClusterer（map，stack）;
}）;
}
< / script>
解决方案
在for循环之前，创建一个空的infowindow对象。
var infowindow = new google.maps.InfoWindow（）;
在for循环中，在标记之后添加一个事件侦听器，如下所示：
google.maps.event.addListener（marker，'click'，（function（marker，i）{
return function ）{
infowindow.setContent（您可能会从XML中提取一些内容）;
infowindow.open（map，marker）;
}
}）（marker，一世））;
将回调参数传递给addListener方法时会发生一些闭包魔法。如果你不熟悉它，请看看这里：
因此，您的代码应该如下所示：
google.load（'maps'，'3'，{
other_params：'sensor = false'
}）;
google.setOnLoadCallback（initialize）;
函数initialize（）{
var stack = [];
var center = new google.maps.LatLng（48.136，11.586）;
var options = {
'zoom'：5，
'center'：center，
'mapTypeId'：google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map（document.getElementById（map_canvas），options）;
var infowindow = new google.maps.InfoWindow（）;
GDownloadUrl（Alle_Ortswahlen.page1.xml，function（doc）{
var xmlDoc = GXml.parse（doc）;
var markers = xmlDoc.documentElement.getElementsByTagName（ROW） ;
for（var i = 0; i< markers.length; i ++）{
//获得每个标记的属性
var lat = parseFloat（markers [i] .getAttribute Field4））;
var lng = parseFloat（markers [i] .getAttribute（Field6））;
var marker = new google.maps.Marker（{
position：new google.maps.LatLng（lat，lng），
map：map，
title：This is a marker
}）;
google.maps.event.addListener（标记，'click'，（function（marker，i）{
return function（）{
infowindow.setContent（ nt来自你的XML）;
infowindow.open（map，marker）;
}
}）（marker，i））;
stack.push（marker）;
}
var mc = new MarkerClusterer（map，stack）;
}）;
}
This is my html code. I've try anything to add an infowindow on the markers but it don't wanna work. My data is loading from the "Alle_Ortswahlen.page1.xml" file. Do anyone have an idea how can I add infoWindow to each marker?
<script type="text/javascript">
google.load('maps', '3', {
other_params: 'sensor=false'
});
google.setOnLoadCallback(initialize);
function initialize() {
var stack = [];
var center = new google.maps.LatLng(48.136, 11.586);
var options = {
'zoom': 5,
'center': center,
'mapTypeId': google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), options);
GDownloadUrl("Alle_Ortswahlen.page1.xml", function(doc) {
var xmlDoc = GXml.parse(doc);
var markers = xmlDoc.documentElement.getElementsByTagName("ROW");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("Field4"));
var lng = parseFloat(markers[i].getAttribute("Field6"));
var marker = new google.maps.Marker({
position : new google.maps.LatLng(lat, lng),
map: map,
title:"This is a marker"
});
stack.push(marker);
}
var mc = new MarkerClusterer(map,stack);
});
}
</script>
解决方案
Before the for cycle, make an empty infowindow object.
var infowindow = new google.maps.InfoWindow();
Than in the for cycle, after the marker, add an event listener, like this:
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent("You might put some content here from your XML");
infowindow.open(map, marker);
}
})(marker, i));
There is some closure magic happening when passing the callback argument to the addListener method. If you are not familiar with it, take a look at here:
Mozilla Dev Center: Working with Closures
So, your code should look something like this:
google.load('maps', '3', {
other_params: 'sensor=false'
});
google.setOnLoadCallback(initialize);
function initialize() {
var stack = [];
var center = new google.maps.LatLng(48.136, 11.586);
var options = {
'zoom': 5,
'center': center,
'mapTypeId': google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), options);
var infowindow = new google.maps.InfoWindow();
GDownloadUrl("Alle_Ortswahlen.page1.xml", function(doc) {
var xmlDoc = GXml.parse(doc);
var markers = xmlDoc.documentElement.getElementsByTagName("ROW");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("Field4"));
var lng = parseFloat(markers[i].getAttribute("Field6"));
var marker = new google.maps.Marker({
position : new google.maps.LatLng(lat, lng),
map: map,
title:"This is a marker"
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent("You might put some content here from your XML");
infowindow.open(map, marker);
}
})(marker, i));
stack.push(marker);
}
var mc = new MarkerClusterer(map,stack);
});
}
这篇关于使用MarkerClusterer的Marker上的InfoWindow的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
