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