javascript - 拖动标记时不会触发鼠标悬停 Google Maps API

Question

在我的网页中，我尝试使用谷歌地图，在其中我可以拖放标记。问题是，当我拖动特殊标记时，不会触发其他标记的鼠标悬停和鼠标移出事件。

嗯，我知道 Google map 使用以下图层:floatPane、overlayMouseTarget、floatShadow、overlayImage、overlayShadow、overlayLayer、mapPane、

标记属于overlayImage层。另外，鼠标悬停和移出事件没有被触发的原因是可拖动标记“吸收”永远不会到达后面标记的事件。

示例:我有标记 m1、m2 和 m3。标记 m3 是可拖动的。我想拖动 m3 ，当它经过 m1 和 m2 顶部时，将鼠标悬停在 m1 和 m2 的事件上即可触发。

问题1:可拖动对象属于哪一层？ (我假设为overlayMouseTarget)。

问题2:我可以更改标记所属的图层吗？这样我就可以修改它的 z-index。

感谢您的宝贵时间。

Answer 1

这是一个很好的问题，您询问如何做一些您不需要做的事情。您根本不想使用图层，您想监视 drag 事件并检查正在拖动的标记与其他标记的接近程度。

您实际上并不想触发事件，但您想调用附加到这些事件的函数。

警告 - 前面有大量代码

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

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

var m3 = new google.maps.Marker({
	draggable:true,
	map: map,
	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 = {

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

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

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

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

};

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>