标记集群与 Google 个地图的链接

Question

所以我正在制作一个房地产网站，客户要求可以在地图上查看所有房产。我认为避免它看起来太杂乱的最好方法是使用标记簇。但是，我需要每个单独的标记 link 到那个特定的属性页面。我对 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'});
}

标记集群与 Google 个地图的链接

Marker Cluster Links with Google Maps

javascript

google-maps

google-maps-api-3

markerclusterer