選單
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Google Maps 事件


點選標記進行縮放

我們仍然使用前一頁的地圖:一張以英格蘭倫敦為中心的地圖。

現在,我們希望在使用者點選標記時進行縮放(我們為標記添加了一個事件處理程式,當點選標記時會縮放地圖)。

這是新增的程式碼

示例

// 點選標記時縮放到 9 級
google.maps.event.addListener(marker,'click',function() {
  map.setZoom(9);
  map.setCenter(marker.getPosition());
});

我們使用 addListener() 事件處理程式來註冊事件通知。該方法接受一個物件、一個要監聽的事件以及一個在指定事件發生時呼叫的函式。



返回標記

這裡,我們儲存縮放更改,並在 3 秒後將地圖移回。

示例

google.maps.event.addListener(marker,'click',function() {
  var pos = map.getZoom();
  map.setZoom(9);
  map.setCenter(marker.getPosition());
  window.setTimeout(function() {map.setZoom(pos);},3000);
});

點選標記時開啟資訊視窗

點選標記以顯示帶有文字的資訊視窗

示例

var infowindow = new google.maps.InfoWindow({
  content:"Hello World!"
});

google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
});

為每個標記設定標記並開啟資訊視窗

當用戶點選地圖時執行一個函式。

placeMarker() 函式會在使用者點選的位置放置一個標記,並顯示一個包含標記緯度和經度的資訊視窗。

示例

google.maps.event.addListener(map, 'click', function(event) {
  placeMarker(map, event.latLng);
});

function placeMarker(map, location) {
  var marker = new google.maps.Marker({
    position: location,
    map: map
  });
  var infowindow = new google.maps.InfoWindow({
    content: 'Latitude: ' + location.lat() +
    '<br>Longitude: ' + location.lng()
  });
  infowindow.open(map,marker);
}

×

聯絡銷售

如果您想將 W3Schools 服務用於教育機構、團隊或企業,請傳送電子郵件給我們
sales@w3schools.com

報告錯誤

如果您想報告錯誤,或想提出建議,請傳送電子郵件給我們
help@w3schools.com

W3Schools 經過最佳化,旨在方便學習和培訓。示例可能經過簡化,以提高閱讀和學習體驗。教程、參考資料和示例會不斷審查,以避免錯誤,但我們無法保證所有內容的完全正確性。使用 W3Schools 即表示您已閱讀並接受我們的使用條款Cookie 和隱私政策

版權所有 1999-2024 Refsnes Data。保留所有權利。W3Schools 由 W3.CSS 提供支援