Google 地图事件实例讲解
Google地图事件
点击标记缩放地图
我们仍然使用上一遍文章使用的英国伦敦的地图。
点用户点击标记时实现缩放地图的功能(点击标记时绑定地图缩放事件)。
代码如下:
<html> <head> <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"> </script> <script> varmyCenter=newgoogle.maps.LatLng(51.508742,-0.120850); functioninitialize() { varmapProp={ center:myCenter, zoom:5, mapTypeId:google.maps.MapTypeId.ROADMAP }; varmap=newgoogle.maps.Map(document.getElementById("googleMap"),mapProp); varmarker=newgoogle.maps.Marker({ position:myCenter, title:'Clicktozoom' }); marker.setMap(map); //Zoomto9whenclickingonmarker google.maps.event.addListener(marker,'click',function(){ map.setZoom(9); map.setCenter(marker.getPosition()); }); } google.maps.event.addDomListener(window,'load',initialize); </script> </head> <body> <divid="googleMap"style="width:500px;height:380px;"></div> </body> </html>
使用addListener()事件处理程序来注册事件的监听。该方法使用一个对象,一个事件来监听,当指定的事件发生时函数将被调用。
重置标记
我们通过给地图添加事件处理程序来改变'center'属性,以下代码使用center_changed事件在3秒后标记移会中心点:
实例
<html> <head> <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"> </script> <script> varmyCenter=newgoogle.maps.LatLng(51.508742,-0.120850); functioninitialize() { varmapProp={ center:myCenter, zoom:5, mapTypeId:google.maps.MapTypeId.ROADMAP }; varmap=newgoogle.maps.Map(document.getElementById("googleMap"),mapProp); varmarker=newgoogle.maps.Marker({ position:myCenter, title:'Clicktozoom' }); marker.setMap(map); //Zoomto9whenclickingonmarker google.maps.event.addListener(marker,'click',function(){ map.setZoom(9); map.setCenter(marker.getPosition()); }); google.maps.event.addListener(map,'center_changed',function(){ //3secondsafterthecenterofthemaphaschanged,panbacktothemarker window.setTimeout(function(){ map.panTo(marker.getPosition()); },3000); }); } google.maps.event.addDomListener(window,'load',initialize); </script> </head> <body> <divid="googleMap"style="width:500px;height:380px;"></div> </body> </html>
点击标记时打开信息窗口。
点击标记在信息窗口显示一些文本信息:
实例
<html> <head> <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"> </script> <script> varmyCenter=newgoogle.maps.LatLng(51.508742,-0.120850); functioninitialize() { varmapProp={ center:myCenter, zoom:5, mapTypeId:google.maps.MapTypeId.ROADMAP }; varmap=newgoogle.maps.Map(document.getElementById("googleMap"),mapProp); varmarker=newgoogle.maps.Marker({ position:myCenter, }); marker.setMap(map); varinfowindow=newgoogle.maps.InfoWindow({ content:"HelloWorld!" }); google.maps.event.addListener(marker,'click',function(){ infowindow.open(map,marker); }); } google.maps.event.addDomListener(window,'load',initialize); </script> </head> <body> <divid="googleMap"style="width:500px;height:380px;"></div> </body> </html>
设置标记及打开每个标记的信息窗口
当用户点击地图时执行一个窗口
用户点击地图某个位置时使用placeMarker()函数在指定位置上放置一个标记,并弹出信息窗口:
实例
<html> <head> <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"> </script> <script> varmap; varmyCenter=newgoogle.maps.LatLng(51.508742,-0.120850); functioninitialize() { varmapProp={ center:myCenter, zoom:5, mapTypeId:google.maps.MapTypeId.ROADMAP }; map=newgoogle.maps.Map(document.getElementById("googleMap"),mapProp); google.maps.event.addListener(map,'click',function(event){ placeMarker(event.latLng); }); } functionplaceMarker(location){ varmarker=newgoogle.maps.Marker({ position:location, map:map, }); varinfowindow=newgoogle.maps.InfoWindow({ content:'Latitude:'+location.lat()+'<br>Longitude:'+location.lng() }); infowindow.open(map,marker); } google.maps.event.addDomListener(window,'load',initialize); </script> </head> <body> <divid="googleMap"style="width:500px;height:380px;"></div> </body> </html>
以上就是对Google地图事件的基础知识整理,后续继续补充相关知识,谢谢大家对本站的支持!