2011-12-06 34 views
5

當前正在開發一個項目,將我們的Goole Maps API從v2升級到v3,並且遇到問題並需要確認是否可以將多個監聽器註冊到相同標記。任何人都可以確認Goole Maps API v3是否支持API v2等同一標記上的多個偵聽器?Google Maps Api V3 - 將多個監聽器分配給相同的標記對象

示例代碼:

var mapObject = document.getElementById('map_canvas'); 
var points = new Array(); 
var markers = new Array(); 

var mapOptions = { 
    zoom: 16, 
    center: new google.maps.LatLng(33.260081, -117.279369), 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    streetViewControl: false, 
    draggable: true, 
    scaleControl: false, 
    zoomControl: true,     
    panControl: true,      
    scrollwheel: false, 
    disableDoubleClickZoom: false, 
    navigationControlOptions: { 
    style: google.maps.NavigationControlStyle.ZOOM_PAN 
} 

map = new google.maps.Map(mapObject, mapOptions); 

points.push(lat:'33.260081', lng:'-117.279369'); 
points.push(lat:'33.260079', lng:'-117.279371'); 
points.push(lat:'33.260083', lng:'-117.279373'); 

for (var i in points) { 

    var point = points[i]; 

    var marker = initMarker(point); 

    markers.push(marker); 

    google.maps.event.addListener(marker, 'mouseover', function() { 
     alert('mouseover'); 
    }); 

    google.maps.event.addListener(marker, 'click', function() { 
     alert('click'); 
    }); 

    google.maps.event.addListener(marker, 'mouseout', function() { 
     alert('mouseout'); 
    }); 

    bounds.extend(new google.maps.LatLng(point.lat, point.lng)); 
} 

當我將鼠標懸停在該標記,將其與「鼠標移開」,然後選擇「鼠標懸停」兩次警告。我希望它只是提醒'鼠標懸停'一次。

當我點擊一個標記時,它會通過'click',然後'mouseout',然後'click'和'mouseover'發出警報。我希望它只是提醒'點擊'。

當我禁用'mouseover'和'mouseout'時,'click'按預期工作。當我禁用'click'和'mouseout'時,'mouseover'按預期工作。

爲什麼這些事件似乎是相互鏈接的?在API v2中,我們能夠支持此功能沒有問題。

在此先感謝。

- 編輯 -

這僅出現在Firefox和IE是發生,鍍鉻處理事件如預期。

- 編輯 -

我已經取得了進展,並設置2地圖演示,所以並排側比較 可以做到的。

2版地址:http://map.ownij.com/index2.php

3版地址:http://map.ownij.com/

2版火狐,IE,鉻甚至聽者行爲:

  • 鼠標懸停:鼠標懸停
  • 點擊:點擊
  • 鼠標移開:鼠標移開

3版事件監聽行爲火狐,IE

  • 鼠標懸停:鼠標移開,鼠標懸停,鼠標懸停
  • 點擊:點擊,鼠標移開,點擊
  • mouseout:mouseout,mouseout

3版即使在監聽行爲:

  • 鼠標懸停:鼠標懸停
  • 點擊:點擊
  • 鼠標移開:鼠標移開

正如你可以看到,V3事件行爲工作原理預計在Chrome中,但在 FF和IE中,每個事件觸發多個監聽器,導致 異常行爲。

我們建立了我們的地圖,讓地圖泡沫出現 當用戶將鼠標懸停在一個標記,所以當鼠標懸停觸發的 mouseout事件,泡沫無限次地重複呈現,直到 將鼠標從標記用戶。

我們不能發佈我們的v3升級版本,直到解決此問題,否則我們會搶劫我們的客戶端的當前功能。

- 編輯 -

更新後的代碼,通過改變警報CONSOLE.LOG()調用,如預期的事件觸發。看起來在非infowindow調用(警報,泡沫等)方面存在一些不尋常的事件處理。

+0

瀏覽器之間的事件模型略有不同。我不記得如何解決這個問題,但請記住,一旦閱讀,可能會如何改變事件泡沫...... –

+0

@YzmirRamirez:不幸的是,這與事件泡沫無關,只是事件處理瀏覽器,這就是爲什麼我選擇只發出警報,以消除任何無關的干擾。 –

+1

避免使用「警報」。彈出窗口可能會導致其他事件,例如mouseover,mouseout等 - 使用'console.log'。 –

回答

1

結束了,只是拋棄了懸停偵聽器,並與點擊偵聽器。最終想要添加懸停功能,但現在沒有時間跟蹤它。

1

可能這些附加事件是由alert造成的。嘗試以不與鼠標交互的方式記錄事件,例如使用console.log(不知道現在是否在互聯網爆炸器中可用)。

簡單地說,我的猜測是彈出式會導致您的鼠標「mouseout」(和「mouseover」彈出式)。等等的附加事件可能會導致彈出消失時再次。

+0

您是對的,我將警報更改爲console.log(),並且事件按預期啓動。看起來,當使用非infowindow時,它會觸發額外的事件。我試圖讓它與定製版本的ebubble插件一起工作。 –

+0

HTML中的任何事情實際上都應該引起諸如mouseover和mouseout之類的事件,所以您將無法真正解決這些問題,但是您必須以他們預期的含義來對待它們:鼠標現在位於infowindow上,而不是標記。但是,對於您來說可能的解決方法是將彈出層*放置在地圖目標圖層的下面。然後,事件應該按預期工作,但與彈出窗口的交互可能會被打破... –

+0

你在說什麼是有道理的,我所掛斷的是v2中的事件偵聽器按預期工作,即使焦點設置爲一個自定義信息窗口。 –