Google 地圖事件
點擊標記縮放地圖
我們仍然使用上一遍文章使用的英國倫敦的地圖。
點用戶點擊標記時實現縮放地圖的功能(點擊標記時綁定地圖縮放事件)。
代碼如下：
<html><head><scriptsrc="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 markergoogle.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() 事件處理程序來注冊事件的監聽。該方法使用一個對象，一個事件來監聽，當指定的事件發生時 函數將被調用。
重置標記
我們通過給地圖添加事件處理程序來改變 'center' 屬性，以下代碼使用 center_changed 事件在3秒后標記移會中心點:
實例
<html><head><scriptsrc="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 markergoogle.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>點擊標記時打開信息窗口。
點擊標記在信息窗口顯示一些文本信息：
實例
<html><head><scriptsrc="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>設置標記及打開每個標記的信息窗口
當用戶點擊地圖時執行一個窗口
用戶點擊地圖某個位置時使用 placeMarker() 函數在指定位置上放置一個標記，并彈出信息窗口：
實例
<html><head><scriptsrc="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 地圖事件的基礎知識整理，后續繼續補充相關知識，謝謝大家對本站的支持！
新聞熱點
疑難解答
