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

Posted 2023-02-24

【中文标题】如何使 Google 地图标记重定向到 URL？

【英文标题】：How can I make a Google Map marker redirect to a URL?

【发布时间】：2020-02-19 23:05:31

【问题描述】：

这是我的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 =”中？

【问题讨论】：

我编辑了您的 API 密钥，但由于它在编辑历史记录中仍然可见，如果它不限于您的域，您可能希望使该密钥无效并获取一个新密钥。

【参考方案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 属性）。

【讨论】：

因为我的标记没有分配给变量，因为它们的数量未定义。在事件侦听器中指定 myMarker 应该怎么做？有没有办法只听任何标记被点击？

引用是否被一遍又一遍地覆盖并不重要，实际的标记应该仍然存在并且有一个有效的点击事件。如果没有，请告诉我（现在不能自己尝试），我将更新代码以在变量名中使用索引。

我通过在我的 for 循环中命名 myMarker marker Listing.pk 并在侦听器中指定相同的变量名而不是 myMarker 解决了我的上述评论。我还将侦听器添加到要为每个标记创建的循环中。感谢您的帮助！