与谷歌地图的标记集群链接

Question

所以我正在制作一个房地产网站，客户要求可以在地图上查看所有房产。我认为避免它看起来过于混乱的最佳方法是使用标记集群。但是，我需要每个单独的标记链接到该特定属性页面。我对 Javascript 不太熟悉，所以我正在努力破解这个。

现在，地图完全没有响应（您无法移动或缩放地图）并且没有显示任何标记。

这是我目前的代码，我哪里出错了？

<script>
function initMap() {
   var map = new google.maps.Map(document.getElementById('map'), {
   zoom: 7,
   center: {<?php echo convertAddressToLngLat('Hastings, East Sussex');?>}
});

var markers = locations.map(function(link, location, i) {
    var marker =  new google.maps.Marker({
        position: location,
        url: link //Will be different for each marker
    });

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

 // Add a marker clusterer to manage the markers.
 var markerCluster = new MarkerClusterer(map, markers, {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
 }

var locations = [
     ["www.google.com", {lat: 50.8542590, lng: 0.5734530}],
 ]
 </script>

<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDlrUspRmip7Verfu7IDtW-FYkkum1QZMs&callback=initMap"></script>

Answer 1

首先，您在 Google 的 JS 加载后调用 initMap，但您尝试立即创建标记。将该代码添加到 initMap 中，或至少添加到从 initMap 调用的另一个函数中。

其次，您创建标记而不指定其地图，这是您需要做的。因此，将 map: map 添加到标记的属性中。

第三，您将 map 创建为 initMap 函数的局部变量，因此在您当前创建标记的位置（除非您将其移动到 initMap 函数中）或创建 MarkerClusterer 的位置将无法访问它。 要么将所有引用map 的代码放在同一个函数中，要么将map 设为全局变量。

另外，您在创建地图时似乎有一个 JS 错误，我没有看到您需要的结束 })。

您在使用Array.map() 回调时出现错误。

这是一个修改后的版本：

function initMap() {
   var map = new google.maps.Map(document.getElementById('map'), {
       zoom: 7,
       center: {<?php echo convertAddressToLngLat('Hastings, East Sussex');?>}
   });

   var locations = [
     ["www.google.com", {lat: 50.8542590, lng: 0.5734530}],
    ];

    var markers = locations.map(function(location) {
        var marker = new google.maps.Marker({
            map: map,
            position: location[1],
            url: location[0] //Will be different for each marker
        });

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

    // Add a marker clusterer to manage the markers.
    var markerCluster = new MarkerClusterer(map, markers, {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}