将URL添加到Marker Cluster google map API中的地图标记

时间:2017-04-02 08:37:59

标签: javascript google-maps google-maps-api-3 markerclusterer

所以基本上我要做的就是拥有一个地图集群,一旦你点击进入集群并点击个性化地图标记,你就会链接到我网站上的另一个页面。

这是我到目前为止所拥有的。但我似乎无法将URL通过..拉入不同的标记。

   var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 4,
      center: {lat: -39.3642, lng: 164.0444318}
    });


    // Add some markers to the map.
    // Note: The code uses the JavaScript Array.prototype.map() method to
    // create an array of markers based on a given "locations" array.
    // The map() method here has nothing to do with the Google Maps API.
    var markers = locations.map(function(location, i) {
      return new google.maps.Marker({
        position: location,
        url: "http://travelpark.co.nz" //Will be different for each 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 = [
        {lat: -37.7862985, lng: 175.2773836},
      {lat: -37.8011434, lng: 174.871265}
   ]

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

底部的事件监听器无法工作..我似乎无法弄清楚这一点。任何帮助将不胜感激

1 个答案:

答案 0 :(得分:1)

将侦听器分配给每个标记对象而不是数组。使用map函数本身来避免2 for循环:

 var markers = locations.map(function(location, i) {
                   var marker =  new google.maps.Marker({
                                position: location,
                                url: "http://travelpark.co.nz" //Will be different for each marker
                                });
                   google.maps.event.addListener(marker, 'click', function(){
                                window.location.href = this.url;
                               });
                   return marker;
});