免費(fèi)AI編程助手
Google 地圖事件
2019-09-21 17:19 更新
Google 地圖事件
點(diǎn)擊標(biāo)記縮放地圖 - 綁定在google地圖上的事件。
點(diǎn)擊標(biāo)記縮放地圖
我們?nèi)匀皇褂蒙弦槐槲恼率褂玫挠鴤惗氐牡貓D。
點(diǎn)用戶點(diǎn)擊標(biāo)記時實(shí)現(xiàn)縮放地圖的功能(點(diǎn)擊標(biāo)記時綁定地圖縮放事件)。
代碼如下：
實(shí)例
// Zoom to 9 when clicking on marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
});
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
});
嘗試一下 ?
使用 addListener() 事件處理程序來注冊事件的監(jiān)聽。該方法使用一個對象，一個事件來監(jiān)聽，當(dāng)指定的事件發(fā)生時 函數(shù)將被調(diào)用。
重置標(biāo)記
我們通過給地圖添加事件處理程序來改變 'center' 屬性，以下代碼使用 center_changed 事件在3秒后標(biāo)記移會中心點(diǎn):
實(shí)例
google.maps.event.addListener(map,'center_changed',function() {
window.setTimeout(function() {
map.panTo(marker.getPosition());
},3000);
});
window.setTimeout(function() {
map.panTo(marker.getPosition());
},3000);
});
嘗試一下 ?
點(diǎn)擊標(biāo)記時打開信息窗口。
點(diǎn)擊標(biāo)記在信息窗口顯示一些文本信息：
實(shí)例
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
content:"Hello World!"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
嘗試一下 ?
設(shè)置標(biāo)記及打開每個標(biāo)記的信息窗口
當(dāng)用戶點(diǎn)擊地圖時執(zhí)行一個窗口
用戶點(diǎn)擊地圖某個位置時使用 placeMarker() 函數(shù)在指定位置上放置一個標(biāo)記，并彈出信息窗口：
實(shí)例
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
function placeMarker(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);
}
placeMarker(event.latLng);
});
function placeMarker(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);
}
嘗試一下 ?
Google 地圖 - 事件參考手冊
以上內(nèi)容是否對您有幫助：
更多建議：