向 google.map 标记添加 onclick 事件答案

【问题标题】：Adding an onclick event to google.map marker向 google.map 标记添加 onclick 事件
【发布时间】：2013-06-07 13:55:19
【问题描述】：

我一直在试图弄清楚一点 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;});

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

【问题讨论】：

你的 infoWindow 在哪里？
@Alex 我不需要信息窗口。我说的是向标记（pin）添加一个 URL 点击事件。不过谢谢。我认为 Skelly 有答案。

标签： javascript api google-maps

【解决方案1】：

确保marker 在initialize() 之外定义。否则，如果您尝试在 initialize() 之外分配点击侦听器，它将是 undefined。

此外，如果您尝试加载 url www.google.com，您可能会遇到 SAME-ORIGIN 问题，但它应该可以与本地 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;});

Working Demo on Bootply

【讨论】：

【解决方案2】：

这是我会使用的：

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 属性与 Marker 对象一起存储。

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

【讨论】：

【解决方案3】：

这是我过去所做的。我在我的代码和你的代码之间看到的唯一区别是我在标记选项中设置了标记图，而你正在使用 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
    });

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

【解决方案5】：

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

如果你去这个页面：https://google-developers.appspot.com/maps/documentation/javascript/examples/full/marker-simple

将上面的代码粘贴到控制台，你会看到它工作正常。

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

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

在你的初始化函数内部。

【讨论】：

【解决方案6】：

就我而言，我有多个标记，我想知道点击了哪个标记。我在谷歌论坛上找到了以下解决方案 - https://groups.google.com/g/google-maps-js-api-v3/c/cAJrWZWdD-8?pli=1

作者：Chris Broadfoot（Google 员工）

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

google.maps.event.addListener(marker, 'click', markerListener);

function markerListener() { alert(this.getPosition()); // this.setIcon(... }

【讨论】：