在谷歌地图上按下鼠标创建标记，并立即拖动它而不释放鼠标按钮

Mousedown on google map to create marker and drag it immediately without releasing mouse button

本文关键字：鼠标 拖动 按钮 释放 谷歌地图 创建      更新时间：2023-09-26

我想做的是假设简单，但我无法解决。。。操作步骤如下：1-鼠标向下=>创建标记2-能够在不释放鼠标按钮的情况下立即拖动此标记。这是我找不到解决方案的问题。。。

我的代码看起来像这样：

 var listenerHandle = google.maps.event.addListener(map, 'mousedown', function(e) {
           marker = new google.maps.Marker({
              position: latLng,
              map: map,
              draggable: true
           });
google.maps.event.removeListener(listenerHandle); // to remove the listener 
google.maps.event.trigger(map, 'mouseup'); // this is because the click was first on        the map
// now try to trigger mousedown event because the mouse button must not be released          which should allow the user to move the marker immediatly after having created it.
google.maps.event.trigger(marker, 'mousedown', function(event){
           // process marker mouvements
});
});

这不起作用，因为我必须释放鼠标按钮并向下移动标记才能移动它。有什么解决办法吗？许多感谢您的帮助

一个可能的解决方案是为鼠标移动事件创建额外的事件处理程序，更新标记位置：

    var listenerHandle = 
            google.maps.event.addListener(map, 'mousedown', function(e) {
        var latLng = e.latLng;
        marker = new google.maps.Marker({
            position: latLng,
            map: map,
            draggable: true
        });
        // to get data about mouse position
        mMoveHandler = google.maps.event.addListener(map, 'mousemove', function(e) {
            marker.setPosition(e.latLng);
        });

        google.maps.event.removeListener(listenerHandle);
    });

此外，map必须设置为draggable: false，因为在mousedown上map开始四处移动。请参阅jsbin 上的示例

您可以在鼠标上按下标记。但是，要拖动标记，您需要再次单击以抓住标记并拖动它。

解决方案是为mousemove提供额外的侦听器来更新标记位置，但也为mouseup提供第三个侦听器，它将删除所有不必要的侦听器并重置映射选项：

var listenerHandle = google.maps.event.addListener(map, 'mousedown', function(e) {
        var latLng = e.latLng;
        marker = new google.maps.Marker({
            position: latLng,
            map: map,
            draggable: true
        });
        
        // map should not be deaggable while you move the marker
        map.setOptions({draggable: false});
    
        mousemoveHandle = google.maps.event.addListener(map, 'mousemove', function(e) {
            // update marker position (move marker)
            marker.setPosition(e.latLng);
        });
        mouseupHandle = google.maps.event.addListener(map, 'mouseup', function(e) {
            // remove listeners from map
            google.maps.event.removeListener(listenerHandle);
            google.maps.event.removeListener(mousemoveHandle);
            google.maps.event.removeListener(mouseupHandle);
            // make map draggable again
            map.setOptions({draggable: true});
        });
});

请确保全局声明Handle变量。

相关文章：