Google 地圖事件實例講解
Google 地圖事件
點擊標(biāo)記縮放地圖
我們?nèi)匀皇褂蒙弦槐槲恼率褂玫挠鴤惗氐牡貓D。
點用戶點擊標(biāo)記時實現(xiàn)縮放地圖的功能(點擊標(biāo)記時綁定地圖縮放事件)。
代碼如下:
<html> <head> <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"> </script> <script> var myCenter=new google.maps.LatLng(51.508742,-0.120850); function initialize() { var mapProp = { center: myCenter, zoom:5, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("googleMap"),mapProp); var marker = new google.maps.Marker({ position: myCenter, title:'Click to zoom' }); marker.setMap(map); // Zoom to 9 when clicking on marker google.maps.event.addListener(marker,'click',function() { map.setZoom(9); map.setCenter(marker.getPosition()); }); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="googleMap" style="width:500px;height:380px;"></div> </body> </html>
使用 addListener() 事件處理程序來注冊事件的監(jiān)聽。該方法使用一個對象,一個事件來監(jiān)聽,當(dāng)指定的事件發(fā)生時 函數(shù)將被調(diào)用。
重置標(biāo)記
我們通過給地圖添加事件處理程序來改變 'center' 屬性,以下代碼使用 center_changed 事件在3秒后標(biāo)記移會中心點:
實例
<html> <head> <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"> </script> <script> var myCenter=new google.maps.LatLng(51.508742,-0.120850); function initialize() { var mapProp = { center: myCenter, zoom:5, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("googleMap"),mapProp); var marker = new google.maps.Marker({ position: myCenter, title:'Click to zoom' }); marker.setMap(map); // 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(map,'center_changed',function() { // 3 seconds after the center of the map has changed, pan back to the marker window.setTimeout(function() { map.panTo(marker.getPosition()); },3000); }); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="googleMap" style="width:500px;height:380px;"></div> </body> </html>
點擊標(biāo)記時打開信息窗口。
點擊標(biāo)記在信息窗口顯示一些文本信息:
實例
<html> <head> <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"> </script> <script> var myCenter=new google.maps.LatLng(51.508742,-0.120850); function initialize() { var mapProp = { center:myCenter, zoom:5, mapTypeId:google.maps.MapTypeId.ROADMAP }; var map=new google.maps.Map(document.getElementById("googleMap"),mapProp); var marker=new google.maps.Marker({ position:myCenter, }); marker.setMap(map); var infowindow = new google.maps.InfoWindow({ content:"Hello World!" }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); }); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="googleMap" style="width:500px;height:380px;"></div> </body> </html>
設(shè)置標(biāo)記及打開每個標(biāo)記的信息窗口
當(dāng)用戶點擊地圖時執(zhí)行一個窗口
用戶點擊地圖某個位置時使用 placeMarker() 函數(shù)在指定位置上放置一個標(biāo)記,并彈出信息窗口:
實例
<html> <head> <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"> </script> <script> var map; var myCenter=new google.maps.LatLng(51.508742,-0.120850); function initialize() { var mapProp = { center:myCenter, zoom:5, mapTypeId:google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("googleMap"),mapProp); 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); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="googleMap" style="width:500px;height:380px;"></div> </body> </html>
以上就是對Google 地圖事件的基礎(chǔ)知識整理,后續(xù)繼續(xù)補充相關(guān)知識,謝謝大家對本站的支持!
相關(guān)文章
微信小程序 ES6Promise.all批量上傳文件實現(xiàn)代碼
這篇文章主要介紹了微信小程序 ES6Promise.all批量上傳文件實現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下2017-04-04Svelte嵌套組件preventDefault構(gòu)建Web應(yīng)用
這篇文章主要介紹了Svelte嵌套組件preventDefault構(gòu)建Web應(yīng)用,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12微信小程序?qū)崿F(xiàn)頁面跳轉(zhuǎn)傳值的方法
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)頁面跳轉(zhuǎn)傳值的方法的相關(guān)資料,希望通過本文能幫助到大家,讓大家實現(xiàn)這樣的功能,需要的朋友可以參考下2017-10-10