javascript 向 google.map 标记添加 onclick 事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16985867/
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
Adding an onclick event to google.map marker
提问by Mark
I'm stuck trying to figure out a little bit of JS :( I have a google map
我被困在试图弄清楚一点点 JS :( 我有一个谷歌地图
var myCenter=new google.maps.LatLng(53, -1.33);
function initialize()
{
var mapProp = {
center:myCenter,
zoom: 14,
draggable: false,
scrollwheel: false,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("map-canvas"),mapProp);
var marker=new google.maps.Marker({
position:myCenter,
icon:'images/pin.png',
url: 'http://www.google.com/',
animation:google.maps.Animation.DROP
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
But I can't seem to hook up the onclick event for the marker url?
但我似乎无法为标记 url 连接 onclick 事件？
I know it has something to do with adding
我知道这与添加有关
google.maps.event.addListener(marker, 'click', function() {window.location.href = marker.url;});
But where ever I put it causes the map to not display or the marker to not display.
但是我把它放在哪里会导致地图不显示或标记不显示。
采纳答案by Zim
Make sure the markeris defined outside of initialize(). Otherwise, it will be undefinedif you attempt to assign the click listener outside of initialize().
确保marker是在 initialize() 之外定义的。否则，undefined如果您尝试在 initialize() 之外分配点击侦听器，则会出现这种情况。
Also, you may have SAME-ORIGIN issues if you attempt to load url www.google.com, but it should work fine with a local url.
此外，如果您尝试加载 url ，您可能会遇到 SAME-ORIGIN 问题www.google.com，但它应该适用于本地 url。
Updated code
更新代码
var myCenter=new google.maps.LatLng(53, -1.33);
var marker=new google.maps.Marker({
position:myCenter,
url: '/',
animation:google.maps.Animation.DROP
});
function initialize()
{
var mapProp = {
center:myCenter,
zoom: 14,
draggable: false,
scrollwheel: false,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("map-canvas"),mapProp);
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addListener(marker, 'click', function() {window.location.href = marker.url;});
回答by Martin Bean
This is what I'd use:
这就是我要使用的：
var latLng = new google.maps.LatLng(53, -1.33);
var map = new google.maps.Map(document.getElementById('map_canvas'), {
center: latLng,
draggable: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
scrollwheel: false,
zoom: 14
});
var marker = new google.maps.Marker({
animation: google.maps.Animation.DROP,
icon: 'images/pin.png',
map: map,
position: latLng
});
google.maps.event.addDomListener(marker, 'click', function() {
window.location.href = 'http://www.google.co.uk/';
});
I'm not sure if you can store a urlproperty with a Markerobject.
我不确定您是否可以url使用Marker对象存储属性。
If you need to display multiple markers (i.e. from an API call) then you can use a forloop like this:
如果您需要显示多个标记（即来自 API 调用），那么您可以使用这样的for循环：
for (var i = 0; i < markers.length; i++) {
(function(marker) {
var marker = new google.maps.Marker({
animation: google.maps.Animation.DROP,
icon: 'images/pin.png',
map: map,
position: market.latLng
});
google.maps.event.addDomListener(marker, 'click', function() {
window.location.href = marker.url;
});
})(markers[i]);
}
回答by aledujke
var myLatlng = new google.maps.LatLng(-25.363882, 131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!',
url: 'http://www.google.com'
});
google.maps.event.addListener(marker, 'click', function () {
window.location = marker.url;
});
If you go to this page: https://google-developers.appspot.com/maps/documentation/javascript/examples/full/marker-simple
如果您转到此页面：https: //google-developers.appspot.com/maps/documentation/javascript/examples/full/marker-simple
and paste the code above into the console you will see that it works.
并将上面的代码粘贴到控制台中，您将看到它有效。
I think the problem you have is the following, you need to put this line:
我认为您遇到的问题如下，您需要放置这一行：
google.maps.event.addListener(marker, 'click', function () {
window.location = marker.url;
});
inside of your initialize function.
在你的初始化函数里面。
回答by Smeegs
Here's what I've done in the past. The only difference I see between my code and yours is that I set the marker map in the marker options, and you're setting in with marker.setMap(Map);
这是我过去所做的。我在我的代码和你的代码之间看到的唯一区别是我在标记选项中设置了标记映射，而你正在使用 marker.setMap(Map); 进行设置。
var marker = new window.google.maps.Marker({
position: markerPosition,
map: map,
draggable: false,
zIndex: zIndex,
icon: getNewIcon(markerType != "archive", isBig)
, animation: markerAnimation
});
window.google.maps.event.addListener(marker, 'click', function () {
// do stuff
});
回答by Alex Gill
Not sure where your content is but you would need to do the following...
不确定您的内容在哪里，但您需要执行以下操作...
var yourContent = new google.maps.InfoWindow({
content: 'blah blah'
});
google.maps.event.addListener(marker, 'click', function() {
yourContent.open(map,marker);
});
