如何将 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 }}。

如何使我的标记可点击 link？我在网上看了一些示例，代码似乎与我的大不相同。可能是因为我使用了 Google 地图示例代码以及一些奇怪的 Django 模板。有没有一种方法可以将我的标记放在标签中并将我的 URL 放在 "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 属性你上面定义的）。

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

How can I make a Google Map marker redirect to a URL?

javascript

django

google-maps

django-templates

google-maps-api-3