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

Question

这是我的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 %}

我需要划线：

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

点击后重定向到/preview/{{ Listing.pk }}。

如何使我的标记成为可点击的链接？我在网上查看了一些示例，代码似乎与我的大不相同。可能是因为我使用了谷歌地图示例代码以及一些奇怪的 Django 模板。有没有办法我可以将我的标记放在标签内并将我的网址放在“href =”中？

Answer 1

我真的不敢相信你没有找到任何东西，我很肯定 official documentation 中有一些关于此的内容。无论如何，它应该像这样简单：

var myMarker = new google.maps.Marker({
  position: {
    'lat': {
      {
        Listing.lat
      }
    },
    'lng': {
      {
        Listing.lng
      }
    }
  },
  map: map,
  url: '/preview/{{ Listing.pk }}'
});
google.maps.event.addListener(myMarker, 'click', function() {
  window.location.href = this.url;
});

您在标记上定义一个自定义url 属性，然后注册一个click 事件，将当前URL 更改为this.url（您在上面定义的标记的url 属性）。