Google 地图事件实例讲解

2019-11-20 09:17:28

字体：大中小

来源：转载

供稿：网友

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 地图事件的基础知识整理，后续继续补充相关知识，谢谢大家对本站的支持！

上一篇：Google 地图控件集详解及实例代码

下一篇：Google 地图叠加层实例讲解