2010-03-22 109 views
18

我想用几个标记填充谷歌地图。当用户点击标记时,我希望它将用户发送到为该位置指定的其他网页。 (例如:让说的标记代表的家园,当你点击它把你带到一个页面,更多有关家庭的标志)谷歌地图标记点击事件

什么是最简单的方法是什么?

回答

20

您将需要一个事件侦听器附加到每个标记。点击处理程序可以将document.location设置为您想要转到的页面的URL。

var marker = new GMarker(location); 
GEvent.addListener(marker, "click", function() { 
    window.location = theURL; 
}); 
map.addOverlay(marker); 

由于您可能会在循环中添加标记,因此您需要确保每个标记都有自己的URL。由于闭包保留了它们访问的实际变量(而不是它们的值),因此您可能需要将至少addListener代码放入其自己的函数中以创建其自己的作用域。你的循环看起来有点像这样:

function createMarker(location, url) { 
    var marker = new GMarker(location); 
    GEvent.addListener(marker, "click", function() { 
     window.location = url; 
    }); 
    return marker; 
} 

// Assuming locations is an array of objects with lat, lng, and url properties 
for (var i = 0; i < locations.length; i++) { 
    var loc = locations[i]; 
    map.addOverlay(createMarker(new GLatLng(loc.lat, loc.lng), loc.url)); 
} 
+0

感谢您的帮助! – Mike 2010-03-22 04:34:47

+3

这个答案的读者应该注意,如果您使用API​​的v3,GEvent需要用google.maps.event替换。看看高票的其他答案! – 2014-03-26 16:38:18

51

我相信,谷歌地图V3的,GEVENT无法识别,下面的工作对我来说

google.maps.event.addListener(marker, "click", function() { 
    window.location = url; 
}); 
+0

这对我来说也是完美的,在v3中也是如此。不知道这些GEvents和这样的,首先选择这个例子:) – 2012-04-11 15:00:05

+1

是啊,我觉得@Mike应该改变公认的答案,因为前一个在2010年有效 – Karol 2012-08-08 13:16:38

+1

这个例子没有在一个循环中因工作范围问题在另一个答案中提到。 – James 2014-01-04 06:19:55