Question

所以我正在建立一个房地产网站，客户要求所有房产都可以在地图上查看。我认为最好的方法是避免它看起来过于混乱，使用Marker Clusters。但是，我需要将每个标记链接到该特定属性页面。我对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地图链接

1 个答案: