Google Map 事件

Google Map 事件包括:用户事件和MVC状态更改;实现Google Map事件需要为这些事件注册Javascript事件侦听器,并通过 google.maps.event.addListener()事件处理程序接收这些事件时执行相应代码。

常用的用户事件包括:click,dblclick,mouseup,mousedown,mouseover,mouseout;
MVC状态更改包括:zoom_changed
google.maps.event.addListener()方法有三个参数,一个对象,一个待侦听事件以及一个指定事件发生时调用的函数。
<script type=”text/javascript”>
    $(function () {
        var XiningLatlng = new google.maps.LatLng(36.619494, 101.80427);
        var options = {
            zoom: 13,
            center: XiningLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map($(“#map”)[0], options);
        google.maps.event.addListener(map, ‘zoom_changed’, function () {
            setTimeout(moveToDarwin, 3000);
        });
        var marker = new google.maps.Marker({
            position: XiningLatlng,
            map: map,
            title: “Hello Xining!”
        });
        google.maps.event.addListener(marker, ‘click’, function () {
            map.setZoom(15);
        });
    })
    function moveToDarwin() {
        var DarwinLatlng = new google.maps.LatLng(-12.461334, 130.841904);
        map.setCenter(DarwinLatlng);
    }
</script>
Demo 2
<script type=”text/javascript”>
    var map;
    var infowindow;
    var zoomLevel;
    $(function () {
        var myLatlng = new google.maps.LatLng(-25.363882, 131.044922);
        var options = {
            zoom: 4,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map($(“#map”)[0], options);
        infowindow = new google.maps.InfoWindow({
            content: ‘zoom level test’,
            size: new google.maps.Size(50, 50),
            position: myLatlng
        });
        infowindow.open(map);
        google.maps.event.addListener(map, ‘zoom_changed’, function () {
            zoomLevel = map.getZoom();
            infowindow.setContent(“zoom:” + zoomLevel);
            if (zoomLevel == 0)
                map.setZoom(10);
        })
    })    
</script>
<div id=”map” style=”width: 1200px; height: 720px;”>
</div>
http://blog.sina.com.cn/s/blog_a5c5dd2c01015kkt.html

2 Responses so far.

  1. quest bars says:
    I couldn’t refrain from commenting. Well written!
  2. quest bars says:
    Pretty nice post. I just stumbled upon your blog and wanted
    to say that I have truly enjoyed browsing your blog posts.
    In any case I will be subscribing to your rss feed and I hope you write again soon!

LEAVE A COMMENT