将onclick事件添加到Google地图标记

Question

我卡在了尝试理解一点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);

但是我似乎无法为标记网址连接设置onclick事件？

我知道这与添加有关。

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

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

- Mark

---

你的 infoWindow 在哪里？ - Alex Gill

@Alex 我不需要一个 infoWindow。我是在谈论如何将 URL 点击事件添加到标记（图钉）上。谢谢你的关注。我认为 Skelly 给出了答案。 - Mark

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

在Bootply上的工作演示

- Zim

---

如果我通过（mapClick）事件动态创建标记，想要为每个内部定义“单击”处理程序，该怎么办？ - Alexander

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

我不确定您是否可以使用 Marker 对象存储 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]);
}

- Martin Bean

Answer 3

<div id="googleMap" style="width:60%;height:300px;" onclick="placeMarker();"></div>
<script>
    function myMap() {
        var mapProp= {
        center:new google.maps.LatLng(15.28983, 73.95482),
        zoom:5,
        };
        var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
        google.maps.event.addListener(map, 'click', function(event) {
        placeMarker(map, event.latLng);
        });
    }
        function placeMarker(map, location) {
        var marker = new google.maps.Marker({
            position: location,
            map: map
        });         
        var infowindow = new google.maps.InfoWindow({
            content: 'Latitude: ' + location.lat() +
            '<br>Longitude: ' + location.lng()
            
        });
        infowindow.open(map,marker);
        document.getElementById("sitelatitude").value = location.lat();
        document.getElementById("sitelongitude").value = location.lng();
        }
</script>

<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API&callback=myMap">
</script>

- Joaquim

---

目前你的回答不够清晰，请编辑并添加更多细节，以帮助其他人理解它如何回答问题。你可以在帮助中心找到有关如何编写好答案的更多信息。 - Community

Answer 4

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

- Smeegs

Answer 5

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

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

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

- Alex Gill

Answer 6

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

在你的初始化函数内部。

- aledujke

Answer 7

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

由Chris Broadfoot（谷歌员工）提供

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

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

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

- ashish