Javascript 如何将Google地图标记重定向到URL？

这是我的html：

{% extends 'base.html' %}

{% block title %}Home{% endblock %}

{% block content %}
    <style>
        /* Set the size of the div element that contains the map */
        #map {
            height: 700px; /* The height is 400 pixels */
            width: 100%; /* The width is the width of the web page */
        }
    </style>
    <!--The div element for the map --> flavor

    <div id="map"></div>
    <script>
        // Initialize and add the map
        function initMap() {
            var map = new google.maps.Map(
                document.getElementById('map'), {zoom: 4, center: {'lat': 42.6803769, 'lng': -89.03211}});
            {% for Listing in posts %}
                new google.maps.Marker({position: {'lat': {{ Listing.lat }}, 'lng': {{ Listing.lng }}}, map: map});
            {% endfor %}
        }
    </script>
    <!--Load the API from the specified URL
    * The async attribute allows the browser to render the page while the API loads
    * The key parameter will contain your own API key (which is not needed for this tutorial)
    * The callback parameter executes the initMap() function
    -->
    <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=***&callback=initMap">
    </script>
{% endblock %}

单击时重定向到

/preview/{{Listing.pk}

---

如何使标记成为可单击的链接？我在网上看过一些例子，代码似乎与我的大不相同。可能是因为我正在使用谷歌地图示例代码以及一些奇怪的Django模板。有没有办法把我的标记放在一个标签里，然后把我的URL放在“href=”？

我真的不敢相信你什么都没找到，我很肯定这里面有一些东西。无论如何，它应该像这样简单：

var myMarker=new google.maps.Marker({
职位：{
“lat”：{
{
Listing.lat
}
},
“液化天然气”：{
{
液化天然气
}
}
},
地图：地图，
url:“/preview/{{Listing.pk}}”
});
google.maps.event.addListener（myMarker，'click'，function（）{
window.location.href=this.url；
});

---

您在标记上定义了一个自定义的

url

属性，然后注册一个

单击

事件，该事件将当前url更改为

this.url

（标记的

url

属性是您在上面定义的）。

我编辑了您的API密钥，但由于它在编辑历史记录中仍然可见，您可能希望使该密钥无效并获取一个新密钥，前提是它不限于您的域。因为我的标记没有分配给变量，因为变量的数量尚未定义。在事件侦听器中指定myMarker时应该怎么做？有没有一种方法可以只监听任何要单击的标记？如果引用被一次又一次地覆盖，这应该无关紧要，实际的标记应该仍然存在，并且有一个正常的单击事件。如果没有，请告诉我（我现在无法亲自尝试），我将更新代码以使用变量名中的索引。我通过在for循环

marker{{{Listing.pk}}

中命名myMarker，并在侦听器中指定相同的变量名而不是myMarker，解决了上述问题。我还将侦听器添加到为每个标记创建的循环中。谢谢你的帮助！

new google.maps.Marker({position: {'lat': {{ Listing.lat }}, 'lng': {{ Listing.lng }}}, map: map});