我做了一个拖放功能,以便用户可以从侧边栏中拖动一个图标,当他们放下图标时,会放置一个标记。
下面的实现似乎是实现它的最佳(唯一)方法,但是当网络速度较慢时会出现问题,可能是因为鼠标悬停事件的纬度/LNG(非常)不准确。
任何人都可以提供另一种方法可以做到这一点吗?也许立即放置标记,然后使用内置地图拖放?
function placeMarker(lat, lng) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
draggable: true,
map: map
});
return marker;
}
$(".icon").draggable({helper: 'clone',
start: function(e, ui) {
map.setOptions({draggable: false});
$("#map").css('cursor', 'crosshair');
},
stop: function(e,ui) {
map.setOptions({draggable: true});
$("#map").css('cursor', 'default');
google.maps.event.addListenerOnce(map, "mouseover", function(event) {
var lat = event.latLng.lat(),
lng = event.latLng.lng(),
id = ui.helper.context.id;
pointA = id === "pointA" && pointA === true
? pointA.setMap(null) : placeMarker(lat, lng);
pointB = id === "pointB" && pointB === true
? pointB.setMap(null) : placeMarker(lat, lng);
});
}
});
使用 mousemove
事件而不是 mouseover
时,此问题已解决。
我认为这是我应该一直使用的事件。低延迟显然会干扰初始mouseover
事件在引脚掉落时不会触发。
希望这可以帮助其他人。