當點擊一個外部鏈接並僅顯示其相應標記時，隱藏Google地圖上的標記

Question

如何更改我的Google地圖中心鏈接並刪除其他標記？我有這樣的代碼

https://jsfiddle.net/m9ugbc7h/

所以，我需要創建一個鏈接，例如

<a href="#" onclick="variable='latitude = 21.0241839,longitude = -86.8148164,map_zoom = 6;';return false">Ventura</a>

在這種情況下，函數必須改變谷歌地圖中心集中了「拉」的標記和隱藏其他標記，當用戶點擊時

<a href="#" onclick="variable='latitude = 21.0241839,longitude = -86.8148164,map_zoom = 17;';return false">Dolphinaris</a>

變焦會改變，會掩蓋所有其他標記，表明提前

Answer 1

只有Dolphinaris

感謝的那些讓map可見jQuery(document).ready之外。

創建var markers = [];數組。

當裝箱標記，自定義屬性name添加到它，並推動到markers數組：

var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(21.0241839, -86.8148164), 
     map: map, 
     visible: true, 
     icon: ventura, 
     name: 'ventura', 
    }); 
    markers.push(marker); 

點擊之後，調用resetMap()功能：

<a href="#" onclick="resetMap('21.0241839', '-86.8148164', 25, 'ventura');return false;">Ventura</a> 

內resetMap功能，設置center和zoom至map，迭代markers，通過自定義屬性匹配它們- 匹配一套可見，其他設置爲不可見。

function resetMap(lat, lon, zoom, name) { 

    var newPos = new google.maps.LatLng(lat, lon); 

    map.setCenter(newPos); 
    map.setZoom(zoom); 

    markers.forEach(function(marker) {   
     if(marker.get('name') == name) 
     { 
      console.log('match'); 
      marker.setVisible(true); 
     } 
     else 
     { 
      marker.setVisible(false); 
     }  
}); 

工作小提琴：https://jsfiddle.net/m9ugbc7h/1/

編輯：

問題：「？有沒有辦法順利地改變變焦和座標」

是，使用方法：

panTo(latLng:LatLng|LatLngLiteral) 

更改地圖給定經緯度的中心。如果變化爲 小於地圖的寬度和高度，則過渡將爲平滑動畫的 。

https://developers.google.com/maps/documentation/javascript/reference?csw=1

編輯2：

實施panTo很容易：

map.panTo(newPos); 

代替：

map.centerTo(newPos); 

但正如我所面臨的一個位「閃爍」由於隱藏/顯示標記是接近地圖上的效果，我已經添加在函數調用+標記物的一些延遲顯示/隱藏：

function resetMap(lat, lon, zoom, name) { 
    var newPos = new google.maps.LatLng(lat, lon); 
    $.when(map.setZoom(zoom)).done(function(){ 
     $.when(map.panTo(newPos)).done(function(){ 
     setMarkerVisibility(name); 
     }); 
    }); 
} 

並示出相匹配標記現在執行300毫秒的延遲：

function setMarkerVisibility(name){ 
    markers.forEach(function(marker) {  
    console.log(marker.get('name')); 
    if(marker.get('name') == name) 
     {   
      setTimeout(function(){ marker.setVisible(true); }, 300); 
     } 
     else 
     { 
      marker.setVisible(false); 
     } 
    }); 
} 

它看起來更平滑一些。

工作小提琴：https://jsfiddle.net/m9ugbc7h/3/