如何同時在Google地圖中收聽多個DOM事件？

Question

我在我的某個網站上展示了Google地圖。 當Google地圖中的邊界發生變化時，我會進行一些計算。 我計算坐標值並將它們存儲在四個單獨的文本框中。 我能夠做到這一點。

目前，我只在地圖的bounds_changed事件上執行此操作。 我想在以下事件中執行相同的操作：

1. ZOOM_CHANGED
2. center_changed的
3. tilesloaded
4. 閑
5. 拖動
6. dragend
7. 的dragstart

這該怎么做？ 我對JavaScript不太熟悉。 我甚至不知道這樣的事情是否可能？ 我應該對源代碼做出哪些更改。

我加了一個小提琴 。 但它不起作用。 它只是為了顯示代碼。

我從這個頁面獲得了幫助。

HTML代碼：

<div id="googleMap" style="width:900px;height:500px;">

</div>   

<input type="text" id="north" name="north">
<input type="text" id="east" name="east">
<input type="text" id="west" name="west">
<input type="text" id="south" name="south">

JavaScript代碼：

  function loadScript()
    {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false&callback=initialize";
        document.body.appendChild(script);
    }
    window.onload = loadScript; 

function initialize()
        {
            var myLatlng=new google.maps.LatLng(-25.363882, 131.044922);
            var mapProp =
            {
                center: new google.maps.LatLng(-25.363882, 131.044922),
                zoom:6,
                maxZoom: 8,
                minZoom:2,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            var image = 'mapmarkers/you-are-here-2.png';
            var marker = new google.maps.Marker
            ({
                position: myLatlng,
                map: map,
                title: 'I am Here.',
                icon: image,
                tooltip: '<B>This is a customized tooltip</B>'
            });

            google.maps.event.addListener(map, 'bounds_changed', function ()
            {           
                var bounds = map.getBounds();
                var southWest = bounds.getSouthWest();
                var northEast = bounds.getNorthEast();
                var getcentre=bounds.getCenter();
                var ne = map.getBounds().getNorthEast();
                var sw = map.getBounds().getSouthWest();

                var centre_lat=getcentre.lat();
                var centre_long=getcentre.lng();
                var myLatlng=new google.maps.LatLng(centre_lat,centre_long);
                var mapProp =
                {
                    center: new google.maps.LatLng(centre_lat,centre_long),
                    zoom:6,
                    maxZoom: 8,
                    minZoom:2,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                var north2=ne.lat();
                var east2=ne.lng();
                var south2=sw.lat();
                var west2=sw.lng();

                document.getElementById("north").value = north2;
                document.getElementById("east").value = east2;
                document.getElementById("west").value = west2;
                document.getElementById("south").value = south2;

            });
        }

Answer 1

沒有直接的方法來使用多個事件。 將公共函數移動到新函數：

function common(){
    var bounds = map.getBounds();
    var southWest = bounds.getSouthWest();
    var northEast = bounds.getNorthEast();
    ....
}

添加一個新函數來綁定到一個事件：

function bind(eventName){
    google.maps.event.addListener(map, eventName, function (){
         common();
    });
}

然后添加你的活動：

bind('zoom_changed');
bind('center_changed');
bind('tilesloaded');
bind('idle');
....

Answer 2

我認為沒有任何原生支持。 我能想到的最接近的事情：

function addEventListeners(map, target, events, fn) {

    for (var i=0; i < events.length; i++)
        target.addListener(map, events[i], fn);
}

addEventListeners(map, 
                  google.maps.event, 
                  ['zoom_changed', 'bounds_changed'], // list your events
                  theFunc); // function to execute

function theFunc(){
    var bounds = map.getBounds(); // etc...
}