简明现代魔法 -> 软件项目 -> 监听 Google Maps 事件

监听 Google Maps 事件

2010-01-06

JavaScript 代码

<script type="text/javascript">
//<![CDATA[
    //声明GMap对象
	var map;
    var eventinfo;
    var mapcenter;
    var zoomlevel;
    var maptype;
    
    //更新信息,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");
                    });
    }
    
    //添加缩放事件监听器
    function addZoomListener()
    {
       //监听地图上的缩放事件
       GEvent.addDomListener(map, 'zoomstart', function()
                    {
                        updateInfo(eventinfo, "当前事件:zoomstart");
                    });
       GEvent.addDomListener(map, 'zoomend', function()
                    {
                        updateInfo(eventinfo, "当前事件:zoomend");
                        updateInfo(zoomlevel, "当前地图缩放级别:" + map.getZoom());
                    });
    }
    
    //添加maptypechanged事件监听器
    function addMapTypeListener()
    {
       //监听地图上maptypechanged事件
       GEvent.addDomListener(map, 'maptypechanged', function()
                    {
                        updateInfo(eventinfo, "当前事件:maptypechanged");
                        updateInfo(maptype, "当前地图类型:" + map.getCurrentMapType().getName(false));
                    });
    }

    function load()
    {
      if (GBrowserIsCompatible())
      {
        map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(39.92, 116.46), 4);
        
        map.addControl( new GMapTypeControl() );
        map.addControl( new GLargeMapControl() );
        
        eventinfo = document.getElementById("eventinfo");
        mapcenter = document.getElementById("mapcenter");
        zoomlevel = document.getElementById("zoomlevel");
        maptype = document.getElementById("maptype");
        
        addDragListener();
        addZoomListener();
        addMapTypeListener();
      }
    }
//]]>
</script>  

HTML 显示


<div id="map" style="width: 500px; height: 400px;"></div>
<div id="eventinfo"></div>
<div id="mapcenter"></div>
<div id="zoomlevel"></div>
<div id="maptype"></div>  

查看示例

随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们