2011-05-27 61 views
33

我正在使用Google地圖V3顯示使用MYsql和PHP從數據庫中提取的標記列表。 MY標記使用的是完整的地址在地圖上設置的(DB,包括郵編),因爲我沒有龍,緯度信息 所有工作正常,我的循環看起來遵循Google地圖V3將中心設置爲特定標記

while... 
Addmarker(map,'MY ADdress','Title'); 
end while; 

現在我想要將地圖設置爲與以前輸入的郵編匹配的循環中包含的特定標記。 如何將地圖設置爲以此標記爲中心並打開infowindow?

回答

49

在地圖上有標記後,您可以通過API檢索緯度/經度座標,並使用它來設置地圖的中心。您首先需要確定您希望集中哪個標記 - 我會將其留給您。

// "marker" refers to the Marker object you wish to center on 

var latLng = marker.getPosition(); // returns LatLng object 
map.setCenter(latLng); // setCenter takes a LatLng object 

信息窗口爲通常綁定到一個標記單獨的對象,所以要打開你可能會做這樣的事情(但是這將取決於您的代碼)信息窗口:

var infoWindow = marker.infoWindow; // retrieve the InfoWindow object 
infoWindow.open(map); // Trigger the "open()" method 

希望這有助於。

+0

THX,請不要離開這個給我,因爲我不是在谷歌地圖,有信心的。我如何定位特定標記? – salocin 2011-05-27 10:12:16

+0

幫助請???? – salocin 2011-05-27 10:48:02

+0

在while ... end循環中的「Addmarker」函數中,您應該使用Google Maps API構建標記對象。您可能需要將每個標記(或者只是希望使用的標記)分配給一個數組,以便可以訪問它們。如果您需要更多的幫助建立標記並將它們添加到地圖中,我會建議您關閉此問題並創建一個更具體的幫助您需要的新問題。 – 6twenty 2011-05-27 13:54:43

31

要建立在@ 6twenty的答案...我更喜歡panTo(LatLng)over setCenter(LatLng)panTo動畫平滑過渡到中心「如果變化小於地圖的寬度和高度」。 https://developers.google.com/maps/documentation/javascript/reference#Map

以下使用Google Maps API v3。

var marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(latitude, longitude), 
    title: markerTitle, 
    map: map, 
}); 
google.maps.event.addListener(marker, 'click', function() { 
    map.panTo(marker.getPosition()); 
    //map.setCenter(marker.getPosition()); // sets center without animation 
}); 
+3

爲'panTo'方法+1 :) – 2013-07-09 07:37:06

+0

謝謝,這對我很有用。還有另一個函數'panBy',這將幫助你以給定的像素距離改變地圖的中心。 :) – 2017-07-19 13:55:21

1

可能,這將幫助:

map.setCenter(window.markersArray[2].getPosition()); 

所有標記信息都在markersArray陣列,它是全球性的。所以你可以使用window.variablename從任何地方訪問它。每個標記都有一個唯一的ID,你可以將該ID放入數組的鍵中。所以你創建這樣的標記:

window.markersArray[2] = new google.maps.Marker({ 
      position: new google.maps.LatLng(23.81927, 90.362349),   
      map: map, 
      title: 'your info ' 
     }); 

希望這會有所幫助。

0
geocoder.geocode({ 'address': address}, function(results, status) { 
    if (status == google.maps.GeocoderStatus.OK) { 
     map.setCenter(results[0].geometry.location); 
     var marker = new google.maps.Marker({ 
      map: map, 
      position: results[0].geometry.location 
     }); 
    } else { 
     alert('Geocode was not successful for the following reason: ' + status); 
    } 
    }); 
9

這應該是訣竅!

google.maps.event.trigger(map, "resize"); 
map.panTo(marker.getPosition()); 
map.setZoom(14); 

你需要有自己的地圖全球

相關問題