Javascript 向google.map标记添加onclick事件

我被困在试图找出一点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);

但我似乎无法为标记url连接onclick事件

我知道这与添加

google.maps.event.addListener(marker, 'click', function() {window.location.href = marker.url;});

---

但是，无论我把它放在何处，都会导致地图不显示或标记不显示。

以下是我过去所做的。我看到的代码与您的代码之间的唯一区别是，我在标记选项中设置了标记地图，而您正在使用marker.setMap（map）进行设置

---

不确定您的内容在哪里，但您需要执行以下操作

var yourContent = new google.maps.InfoWindow({
    content: 'blah blah'
});

google.maps.event.addListener(marker, 'click', function() {
  yourContent.open(map,marker);
});

---

这就是我要用的：

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/';
});

我不确定是否可以使用

标记

对象存储

url

属性

如果需要显示多个标记（即来自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]);
}

for（变量i=0；i

如果转到此页面：

然后将上面的代码粘贴到控制台中，您将看到它是有效的

我认为你的问题如下，你需要把这一行：

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

---

在初始化函数内部。

确保

标记在initialize（）外部定义。否则，如果尝试在initialize（）外部分配单击侦听器，则标记将是
未定义的

此外，如果您尝试加载url
www.google.com
，可能会出现同源问题，但它可以与本地url一起正常工作

更新代码

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;});

在我的例子中，我有多个标记，我想知道单击了哪个标记。我在谷歌论坛上找到了以下解决方案-

Chris Broadfoot（谷歌员工）

您可以使用“this”引用单击的标记：

google.maps.event.addListener（标记，'click'，markerListener）

函数markerListener（）{alert（this.getPosition（））//
此.setIcon（…}

你的信息窗口在哪里？@Alex我不需要信息窗口。我说的是在标记（pin）中添加URL点击事件。谢谢。我想Skelly已经知道答案了。
google.maps.event.addListener(marker, 'click', function () {
    window.location = marker.url;
});

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;});