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);
}