Google Maps API 进级: GoogleMaps常用事件及应用思路1
1. GoogleMaps常用事件及应用思路
地图再被鼠标拖动时,GMap2对象会激发dragstart,drag,dragend等事件。
示例:动态显示地图的中心位置。
//更新信息,el为指定HTML元素,info为里边显示的内容
function updateInfo(el, info)
{
el.innerHTML = info;
}
//添加拖动事件监听器
function addDragListener()
{
//监听地图上的事件
GEvent.addDomListener(map, 'dragstart', function()
{
updateInfo(eventinfo, "当前事件:dragstart");
});
GEvent.addDomListener(map, 'drag', function()
{
updateInfo(eventinfo, "当前事件:drag");
updateInfo(mapcenter, "当前地图中心纬度:" + map.getCenter().lat() + " 经度" + map.getCenter().lng());
});
GEvent.addDomListener(map, 'dragend', function()
{
updateInfo(eventinfo, "当前事件:dragend");
});
}
地图缩放是,GMap2激发zoomstart和zoomend事件。
示例:动态获取地图缩放级别
//添加缩放事件监听器
function addZoomListener()
{
//监听地图上的缩放事件
GEvent.addDomListener(map, 'zoomstart', function()
{
updateInfo(eventinfo, "当前事件:zoomstart");
});
GEvent.addDomListener(map, 'zoomend', function()
{
updateInfo(eventinfo, "当前事件:zoomend");
updateInfo(zoomlevel, "当前地图缩放级别:" + map.getZoom());
});
}
地图类型发生改变,GMap2会激发maptypechanged事件。
示例:动态获取地图类型。
//添加maptypechanged事件监听器
function addMapTypeListener()
{
//监听地图上maptypechanged事件
GEvent.addDomListener(map, 'maptypechanged', function()
{
updateInfo(eventinfo, "当前事件:maptypechanged");
updateInfo(maptype, "当前地图类型:" + map.getCurrentMapType().getName(false));
});
}
单击Google地图,GMap2会激发click事件。注意:该事件包含两个参数:overlay,point。
示例:获取鼠标位置,并添加GMarker对象。
GEvent.addListener(map, 'click', function(overlay, point)
{
if(point)
{
var marker = new GMarker(point);
map.addOverlay(marker);
}
});