2017-10-20 150 views
-1

我只是想弄清楚如何添加独特的链接到每个谷歌地图标记。如何添加独特的链接到谷歌地图标记

我试着向每个位置数组项添加第三个值,然后将url:locations [2]添加到新的google maps类,但它只是打破了地图。

我有以下的JS ...

  function initMap() { 

      var centerPoint = { lat: 51.6856885, lng: -3.6304398 }; 

      var map = new google.maps.Map(document.getElementById('map'), { 
       zoom: 10, 
       center: centerPoint, 
       styles: [{ "featureType": "all", "elementType": "labels.text.fill", "stylers": [{ "color": "#ffffff" }] }, { "featureType": "all", "elementType": "labels.text.stroke", "stylers": [{ "visibility": "on" }, { "color": "#424b5b" }, { "weight": 2 }, { "gamma": "1" }] }, { "featureType": "all", "elementType": "labels.icon", "stylers": [{ "visibility": "off" }] }, { "featureType": "administrative", "elementType": "geometry", "stylers": [{ "weight": 0.6 }, { "color": "#545b6b" }, { "gamma": "0" }] }, { "featureType": "landscape", "elementType": "geometry", "stylers": [{ "color": "#545b6b" }, { "gamma": "1" }, { "weight": "10" }] }, { "featureType": "poi", "elementType": "geometry", "stylers": [{ "color": "#666c7b" }] }, { "featureType": "poi.park", "elementType": "geometry", "stylers": [{ "color": "#545b6b" }] }, { "featureType": "road", "elementType": "geometry", "stylers": [{ "color": "#424a5b" }, { "lightness": "0" }] }, { "featureType": "transit", "elementType": "geometry", "stylers": [{ "color": "#666c7b" }] }, { "featureType": "water", "elementType": "geometry", "stylers": [{ "color": "#2e3546" }] }] 
      }); 

      // Create an array of alphabetical characters used to label the markers. 
      var labels = ''; 

      // 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, 
        label: labels[i % labels.length] 
       }); 
      }); 

      // 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: 51.5474973, lng: -3.5777395 }, 
      { lat: 51.4668561, lng: -3.1689607 }, 
      { lat: 51.6156059, lng: -3.6934229 }, 
      { lat: 51.5250486, lng: -3.6780919 }, 

      { lat: 51.6428655, lng: -3.9859831 }, 
      { lat: 51.5447132, lng: -3.5961878 }, 
      { lat: 51.5678233, lng: -3.2866061 }, 
      { lat: 51.5122641, lng: -3.5073934 }, 
      { lat: 51.4668561, lng: -3.1689607 } 
     ] 

回答

1

如果我正确理解你的问题。您可以将第三个元素添加到您的位置数组项目中,但您无法直接按原样使用它。你可以有

var locations = [ 
     { latLng:{lat: 51.5474973, lng: -3.5777395},url:'google.com' } 
] 

然后在功能做到这一点

return new google.maps.Marker({ 
    position: location.latLng, 
    url: location.url, 
    label: labels[i % labels.length] 
}); 

那么URL将是每个标记对象。所以点击一个标记,你可以调用this.url并获得网址。

+0

做到了这一点,但我点击了地图上的图标,但实际上并没有做任何不幸的事情。 – Fazy

+0

你如何设置你的点击功能?你可以用你的循环加上 –

+0

像这样... var markers = locations.map(function(location,i){ var marker = new google.maps.Marker({lat:51.5474973,lng :-3.5777395}, url:location.url, label:labels [i%labels.length] }); marker.addListener('click',function(){ console.log(this.url); //或者如果你想它重定向 \t location.href = this.url; }); \t回标记; }); –