Javascript 如何向google maps标记添加唯一链接
我只是想弄清楚如何为每个谷歌地图标记添加唯一的链接 我尝试向每个locations数组项添加第三个值,然后将url:locations[2]添加到新的GoogleMaps类中,但它只是破坏了地图 我有以下的JSJavascript 如何向google maps标记添加唯一链接,javascript,api,google-maps,Javascript,Api,Google Maps,我只是想弄清楚如何为每个谷歌地图标记添加唯一的链接 我尝试向每个locations数组项添加第三个值,然后将url:locations[2]添加到新的GoogleMaps类中,但它只是破坏了地图 我有以下的JS function initMap() { var centerPoint = { lat: 51.6856885, lng: -3.6304398 }; var map = new google.maps.Map
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 }
]
如果我没弄错你的问题。您可以将第三个元素添加到位置数组项中,但不能直接使用它。你本来可以的
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。这样做了,但我单击了地图中的图标,但不幸的是,它仍然没有实际执行任何操作。您如何设置单击功能?你可以这样用你的循环加上。。。var markers=locations.map(函数(location,i){var marker=new google.maps.marker({position:{lat:51.5474973,lng:-3.5777395},url:location.url,label:labels[i%labels.length]});marker.addListener('click',function(){console.log(this.url);//或者如果希望它重定向location.href=this.url;});返回标记;});