Javascript 谷歌地图标记作为链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5107410/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Maps Marker as a link
提问by Hbug
I have the following code, but it is not working, the link only is showed on the last point (Argentina), some help?
我有以下代码，但它不起作用，链接只显示在最后一点（阿根廷），有帮助吗？
<div id="map" style="width: 980px; height: 420px;margin:10px 0px 30px;"></div>
<script type="text/javascript">
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: new google.maps.LatLng(0,0),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var usa = new google.maps.LatLng(37.09024, -95.712891);
var brasil = new google.maps.LatLng(-14.235004, -51.92528);
var argentina = new google.maps.LatLng(-38.416097, -63.616672);
var marker = new google.maps.Marker({
position: usa,
url: '/destinos/exibir/pais_id/3',
title: 'Estados Unidos',
map: map
});
var marker = new google.maps.Marker({
position: brasil,
url: '/destinos/exibir/pais_id/2',
title: 'Brasil',
map: map
});
var marker = new google.maps.Marker({
position: argentina,
url: '/destinos/exibir/pais_id/1',
title: 'Argentina',
map: map
});
google.maps.event.addListener(marker, 'click', function() {
window.location.href = marker.url;
});
</script>
回答by u476945
jsfiddledemo with modification augmenting @hsz example:
jsfiddle演示与修改增强@hsz 示例：
The problem is you have marker declared 3 times, and attach only click event on the one that is declared last. So, you must declare 3 different name for 3 different markers and attach each of them with onclick event. Better if you do it in an array or something
问题是您声明了 3 次标记，并且只在最后声明的标记上附加单击事件。因此，您必须为 3 个不同的标记声明 3 个不同的名称，并使用 onclick 事件附加每个标记。如果你在数组或其他东西中做它会更好
var markers = [];
markers[0] = new google.maps.Marker({
position: usa,
url: '/destinos/exibir/pais_id/3',
title: 'Estados Unidos',
map: map
});
markers[1] = new google.maps.Marker({
position: brasil,
url: '/destinos/exibir/pais_id/2',
title: 'Brasil',
map: map
});
markers[2] = new google.maps.Marker({
position: argentina,
url: '/destinos/exibir/pais_id/1',
title: 'Argentina',
map: map
});
for ( i = 0; i < markers.length; i++ ) {
google.maps.event.addListener(markers[i], 'click', function() {
window.location.href = this.url; //changed from markers[i] to this
});
}
回答by Tom Elliott
You're giving each marker the same variable name, so I think the reference 'marker' will only point to the last one (Argentina).
您为每个标记指定了相同的变量名称，因此我认为引用“标记”只会指向最后一个（阿根廷）。
You could try giving them separate names and binding the listener to each one separately.
您可以尝试为它们指定不同的名称并将侦听器分别绑定到每个名称。
回答by Joe
Just adding this answer for future reference for anyone if they need it
只需添加此答案以供将来需要的任何人参考
Send the details to another createMarker function
将详细信息发送到另一个 createMarker 函数
createMarker(pos,title,weburl)
{
marker = new google.maps.Marker({
position: pos,
title: title,
map: map
});
google.maps.event.addListener(marker, 'click', function() {
window.location.href = weburl;
});
}
Thanks Tom Elliott for pointing out the issue, i was using a logic similar to kjy112
感谢 Tom Elliott 指出这个问题，我使用了类似于 kjy112 的逻辑
