使用Google地图标记群集链接 [英] Marker Cluster Links with Google Maps

问题描述

所以我正在做一个房地产网站，客户要求所有的房产都可以在地图上查看。我认为最好的方法来避免它看起来太杂乱，那就是使用Marker Clusters。不过，我需要每个单独的标记链接到特定的属性页面。我对JavaScript没有太多经验，所以我正在努力解决这个问题。

现在，地图完全没有反应（您不能移动或缩放地图）并没有显示标记。

这是我的代码，到目前为止，我在哪里出错？

 <脚本> 
函数initMap（）{
 var map = new google.maps.Map（document.getElementById（'map'），{
 zoom：7，
 center：{< ？php echo convertAddressToLngLat（'Hastings，East Sussex'）;？>} 
}）; 
 
 var marker = locations.map（函数（link，location，i）{
 var marker = new google.maps.Marker（{
 position：location，
 url：link //对于每个标记
））; 
 
 google.maps.event.addListener（marker，'click'，function（）{
 window .location.href = this.url; 
}）; 
 return marker; 
}）; 
 
 //添加一个标记聚类器来管理标记。 
 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 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> 
  

解决方案

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

其次，创建标记时不指定其映射，您需要执行此操作。因此，将 map：map 添加到标记的属性中。

第三，创建 map 作为你的initMap函数的局部变量，因此当前你创建标记的地方（除非你将它移入initMap函数），或者你创建MarkerClusterer的地方，它是不可访问的。
将所有引用 map 的代码放在同一个函数中，或者将 map 全局变量。

你在创建地图时似乎也有一个JS错误，我没有看到结尾}）你需要。

在使用 Array.map（）回调函数时出错。

这是一个修正版本：

 函数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 marker = locations.map（function（location）{
 var marker = new google.maps.Marker（{
 map：map，
 position：location [1]，
 url：location [0] //对于每个标记
}）; 
 
 google.maps.event.addListener（标记，'click' ，function（）{
 window.location.href = this.url; 
}）; 
 return marker; 
}）; 
 
 //添加一个标记聚类器来管理标记。 
 var markerCluster = new MarkerClusterer（map，markers，{imagePath：'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'}）; 
} 
  

So I'm making a real estate website, and the client has asked that all properties can be viewed on a map. I thought the best way to do this to avoid it looking too cluttered would be to use Marker Clusters. However, I need each individual marker to link to that specific properties page. I'm not too experienced with Javascript so I'm struggling to crack this one.

Right now, the map is completely unresponsive (You cant move or zoom the map) and no markers are displayed.

This is my code so far, where am I going wrong?

<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>

解决方案

Firstly, you call initMap once Google's JS loads, but you try creating the markers immediately. Add that code into initMap, or at least into another function that's called from initMap.

Secondly, you create the marker without specifying its map, which you need to do. So add map: map to your marker's properties.

Thirdly, you create map as a local variable to your initMap function, so it won't be accessible where you currently create your marker (unless you move that into the initMap function), or where you create your MarkerClusterer. Either put all the code that references map in the same function, or make map a global variable.

Also you seem to have a JS error where you create the map, I don't see the closing }) you need.

And there was an error in how you're using the Array.map() callback.

Here's an amended version:

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地图标记群集链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！