谷歌地圖動畫或突出顯示一個特定的標記在一個綁定

Question

我在邊界有多個標記。我想要動畫或突出顯示來自html的onclick事件中的特定標記。

地圖代碼：

var map = new google.maps.Map(document.getElementById('map-canvas'), { 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 
list = [ 
    [51.503454,-0.119562], 
    [51.499633,-0.124755] 
]; 
var bounds = new google.maps.LatLngBounds(); 
list.forEach(function(data, index, array){ 

    var marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(list[index][0],list[index][1]), 
    map: map 
    }); 

bounds.extend(marker.position); 
}); 
map.fitBounds(bounds); 

我想從一個HTML onclick動畫在地圖上特定標記。

<button onclick="showme(0)">London Eye</button> 
<button onclick="showme(1)">Palace of Westminster</button> 

JS：

showme = function(index){ 
    //How to animate a particular marker by an index? 
} 

Answer 1

1. 保持到了引用標記：

   var markers = []; // in the global scope 
   

2. 使用該引用來設置標記的動畫（​​或圖標）。

   showme = function (index) { 
       if (markers[index].getAnimation() != google.maps.Animation.BOUNCE) { 
        markers[index].setAnimation(google.maps.Animation.BOUNCE); 
       } else { 
        markers[index].setAnimation(null); 
       } 
   } 
   

working fiddle

代碼片段：

var geocoder; 
 
var map; 
 
var markers = []; 
 

 
function initialize() { 
 
    map = new google.maps.Map(document.getElementById('map-canvas'), { 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    list = [ 
 
    [51.503454, -0.119562], 
 
    [51.499633, -0.124755] 
 
    ]; 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    list.forEach(function(data, index, array) { 
 

 
    var marker = new google.maps.Marker({ 
 
     position: new google.maps.LatLng(list[index][0], list[index][1]), 
 
     map: map 
 
    }); 
 
    markers.push(marker); 
 

 
    bounds.extend(marker.position); 
 
    }); 
 
    map.fitBounds(bounds); 
 

 
} 
 
google.maps.event.addDomListener(window, "load", initialize); 
 

 
showme = function(index) { 
 
    if (markers[index].getAnimation() != google.maps.Animation.BOUNCE) { 
 
    markers[index].setAnimation(google.maps.Animation.BOUNCE); 
 
    } else { 
 
    markers[index].setAnimation(null); 
 
    } 
 
}

html, 
 
body, 
 
#map-canvas { 
 
    height: 500px; 
 
    width: 500px; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<button onclick="showme(0)">London Eye</button> 
 
<button onclick="showme(1)">Palace of Westminster</button> 
 
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>

Answer 2

我覺得你可以突出一個標記變更標記的圖標/圖像，並通過標記的setOptions(options)功能應用此更改