拖動標記時未觸發鼠標懸停Google Maps API

Question

在我的網頁中，我嘗試使用Google地圖，在該地圖中可以拖放標記。問題是，當我拖動一個特殊的標記，鼠標懸停和其他標記鼠標事件不會觸發。

嘛，據我所知，谷歌地圖使用以下層： floatPane，overlayMouseTarget，floatShadow，窗格在overlayImage，overlayShadow，overlayLayer，mapPane，

和標記屬於窗格在overlayImage層。 此外，鼠標懸停事件沒有被觸發的原因是因爲可拖動標記「吸收」了永遠不會到達後面標記的事件。

例如：我有標記m1，m2和m3。標記m3是可拖動的。我想拖動m3，當它通過m1和m2時，鼠標懸停在m1和m2的事件上被觸發。

問題1：哪個圖層是可拖動的對象所屬的？ （我假設overlayMouseTarget）。

問題2：我可以更改標記所屬的圖層嗎？這樣我就可以修改它的z-index。

謝謝你的時間。

Answer 1

這是一個很好的例子，您可以在這裏詢問如何做某些您不需要做的事情。您根本不想使用圖層，您想要監視事件並檢查正在拖動到其他標記的標記的接近程度。

你實際上不想trigger the events，但你想調用附加到這些事件的函數。

警告 - 大量代碼的未來

var map = new google.maps.Map(document.getElementById('map'),{ 
 
\t zoom: 15, 
 
\t center: {lat:44.6478627,lng:-63.6116746} 
 
}); 
 
var m1 = new google.maps.Marker({ 
 
\t map: map, 
 
\t position: {lat:44.6566246,lng:-63.6202576} 
 
}); 
 

 
var m2 = new google.maps.Marker({ 
 
\t map: map, 
 
\t position: {lat:44.6566475,lng:-63.6197212} 
 
}); 
 

 
var m3 = new google.maps.Marker({ 
 
\t draggable:true, 
 
\t map: map, 
 
\t position: {lat:44.6544724,lng:-63.6296561} 
 
}); 
 

 
//some useful flags 
 
var isDragging = false; 
 
var hoveredMarker = null; 
 

 
//a tolerance amount - how close the dragging marker has to be to another marker in order for you to consider it to be a mouseover 
 
//you may need to play with this number to achieve the effect you want 
 
var tolerance = 30; 
 

 

 
var methods = { 
 

 
\t fromLatLngToPoint: function(latLng) { 
 
\t \t var topRight = map.getProjection().fromLatLngToPoint(map.getBounds().getNorthEast()); 
 
\t \t var bottomLeft = map.getProjection().fromLatLngToPoint(map.getBounds().getSouthWest()); 
 
\t \t var scale = Math.pow(2, map.getZoom()); 
 
\t \t var worldPoint = map.getProjection().fromLatLngToPoint(latLng); 
 
\t \t return new google.maps.Point((worldPoint.x - bottomLeft.x) * scale, (worldPoint.y - topRight.y) * scale); 
 
\t }, 
 

 
\t onStartDragging: function() { 
 
\t \t isDragging = true; 
 
\t }, 
 
\t 
 
\t onStopDragging: function() { 
 
\t \t isDragging = false; 
 
\t }, 
 

 
\t onMarkerMouseOver: function(marker) { 
 
\t \t //set the hoveredMarker flag to the marker that is being hovered 
 
\t \t hoveredMarker = marker; 
 
\t \t 
 
\t \t if(isDragging) { 
 
\t \t \t //do something here when you mouse over `marker`, only if you are also dragging 
 
\t \t \t console.log('mouse over while dragging'); 
 
\t \t } 
 
\t \t 
 
\t \t //do something here when you mouse over `marker`, regardless of if you are dragging or not 
 
\t \t //console.log('mouse over'); 
 
\t }, 
 
\t 
 
\t onMarkerMouseOut: function(marker) { 
 
\t \t //set the hoveredMarker flag to null 
 
\t \t hoveredMarker = null; 
 
\t \t 
 
\t \t if(isDragging) { 
 
\t \t \t //do something here when you mouse out `marker`, only if you are also dragging 
 
\t \t \t console.log('mouse out while dragging'); 
 
\t \t } 
 
\t \t 
 
\t \t //do something here when you mouse out `marker`, regardless of if you are dragging or not 
 
\t \t //console.log('mouse out'); 
 
\t }, 
 
\t 
 
\t arePointsClose: function(latLng1,latLng2) { \t 
 
\t \t var 
 
\t \t \t p1 = this.fromLatLngToPoint(latLng1), 
 
\t \t \t p2 = this.fromLatLngToPoint(latLng2); 
 
\t \t \t 
 
\t \t //if the points are within `tolerance` return true, otherwise, return false 
 
\t \t return Math.abs(p2.x - p1.x) <= tolerance && Math.abs(p2.y - p1.y) <= tolerance; 
 
\t 
 
\t }, 
 
\t 
 
\t onDrag: function(e) { 
 

 
\t \t //it's very unlikely that you're coordinates of \t m3 will ever be 100% identical to m1 or m2 when dragging, 
 
\t \t //so use the maps projection to convert to latLngs to a point and allow a tolerance (see methods.arePointsClose()) 
 
\t \t if(methods.arePointsClose(e.latLng,m1.getPosition())) { 
 
\t \t \t methods.onMarkerMouseOver(m1); 
 
\t \t } else if(hoveredMarker === m1) { 
 
\t \t \t methods.onMarkerMouseOut(m1); 
 
\t \t } 
 
\t \t 
 
\t \t 
 
\t \t if(methods.arePointsClose(e.latLng,m2.getPosition())) { 
 
\t \t \t methods.onMarkerMouseOver(m2); 
 
\t \t } else if(hoveredMarker === m2) { 
 
\t \t \t methods.onMarkerMouseOut(m2); 
 
\t \t } 
 
\t 
 
\t } 
 

 
}; 
 

 
google.maps.event.addListener(m1,'mouseover',function() { methods.onMarkerMouseOver(m1); }); 
 
google.maps.event.addListener(m2,'mouseover',function() { methods.onMarkerMouseOver(m2); }); 
 
google.maps.event.addListener(m1,'mouseout',function() { methods.onMarkerMouseOut(m1); }); 
 
google.maps.event.addListener(m2,'mouseout',function() { methods.onMarkerMouseOut(m2); }); 
 

 
google.maps.event.addListener(m3,'dragstart',function() { methods.onStartDragging(); }); 
 
google.maps.event.addListener(m3,'dragend',function() { methods.onStopDragging(); }); 
 

 
google.maps.event.addListener(m3,'drag',function(event) { methods.onDrag(event); });

html,body { height: 100%; } 
 
#map { height: 100%; }

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=drawing,geometry"></script> 
 
<div id="map"></div>