javascript - 如何向谷歌地图标记添加唯一链接

Question

我只是想弄清楚如何向每个 Google map 标记添加唯一链接。

我尝试向每个位置数组项添加第三个值，然后将 url:locations[2] 添加到新的谷歌地图类，但它只是破坏了 map 。

我有以下 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 }
        ]

Answer 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 并获取 url。