我正在建立一个有关在挪威遇难的骑自行车者的网站。对于我的项目,我一直在使用google maps api v3,但是我对javascript不太了解。到目前为止,您可以在这里看到我的结果:http://salamatstudios.com/googlemapstest/
基本上,我希望每个信息窗口上都有多个标记。每个信息窗口将包含:
姓名年龄),
地点,
死亡日期,
阅读更多信息(将链接到网站本身的页面)。
就像这里的例子:http://salamatstudios.com/bicycles/
我尝试只使用一个标记和信息窗口,但效果很好。当我想在每个标记上添加带有自定义信息窗口的新标记时,我会卡住。目前,我在第一个链接中看到了3个标记,它们位于不同的位置,但是当我单击标记时,没有任何信息窗口出现。
如何解决它以便对其进行编码,以便出现信息窗口?以及如何在每个信息窗口中使用自定义文本?完成后,我将在 map 上放置大约30-40个标记。所有的信息窗口将具有不同类型的信息。
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(65.18303, 20.47852),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP,
// MAP CONTROLS (START)
mapTypeControl: true,
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_TOP
},
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
},
// MAP CONTROLS (END)
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
// -------------- MARKER 1
var marker1 = new google.maps.Marker({
position: new google.maps.LatLng(59.96384, 11.04120),
map: map,
icon: 'img/bike5.png'
});
// MARKER 1'S INFO WINDOW
var infowindow1 = new google.maps.InfoWindow({
content: 'Name<br />Location<br />Date<br /><br /><a href="http://www.db.no" target="_blank">Read more(test link)</a>'
});
// End of infowindow code
// Adding a click event to the marker
google.maps.event.addListener(marker1, 'click', function() {
// Calling the open method of the infoWindow
infowindow1.open(map, marker);
});
// -------- END OF 1st MARKER
// -------------- MARKER 2
var marker2 = new google.maps.Marker({
position: new google.maps.LatLng(60.63040, 8.56102),
map: map,
icon: 'img/bike5.png'
});
// MARKER 2'S INFO WINDOW
var infowindow2 = new google.maps.InfoWindow({
content: 'Name<br />Location<br />Date<br /><br /><a href="http://www.db.no" target="_blank">Read more(test link)</a>'
});
// End of infowindow code
// Adding a click event to the marker
google.maps.event.addListener(marker2, 'click', function() {
// Calling the open method of the infoWindow
infowindow2.open(map, marker);
});
// -------- END OF 2nd MARKER
// -------------- MARKER 3
var marker3 = new google.maps.Marker({
position: new google.maps.LatLng(60.39126, 5.32205),
map: map,
icon: 'img/bike5.png'
});
// MARKER 3'S INFO WINDOW
var infowindow3 = new google.maps.InfoWindow({
content: 'Name<br />Location<br />Date<br /><br /><a href="http://www.db.no" target="_blank">Read more(test link)</a>'
});
// End of infowindow code
// Adding a click event to the marker
google.maps.event.addListener(marker3, 'click', function() {
// Calling the open method of the infoWindow
infowindow3.open(map, marker);
});
// -------- END OF 3rd MARKER
}
google.maps.event.addDomListener(window, 'load', initialize);
如果有人能给我一个线索,那就太好了。我尝试了一些搜索,但是找不到真正的答案。提前致谢! :-)
最佳答案
您需要将信息窗口附加到正确的标记上。当前,它们都与“标记”相关联,该标记不存在(当您单击标记时,会在JavaScript控制台中导致错误消息)。
在点击监听器内部进行更改:
infowindow1.open(map, marker);
infowindow2.open(map, marker);
infowindow3.open(map, marker);
至:
infowindow1.open(map, marker1);
infowindow2.open(map, marker2);
infowindow3.open(map, marker3);
working example
关于javascript - Google Maps API v3通过带有自定义文本的/信息窗口添加多个标记,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/16825290/