Question

我点击地图设置了一个标记。我使用MarkerWithLabel。

我使用拖动标记。

如果我拖动标记，它可以正常工作。但是，如果我拖动一个标签，它就可以在地图上使用click事件。

如何使用标签并在没有点击事件的情况下拖动标签？

在我的例子中 - 当我拖动标记时，JS会创建新标记。

google.maps.event.addListener(map, 'click', function(event) {         
     addMarker(event.latLng)
});

function addMarker(latLng) {
    var marker = new MarkerWithLabel({
          position: latLng,
          map: map,
          draggable: true,
          labelContent: "example",
          labelAnchor: new google.maps.Point(30, 0),
          labelClass: "labels", // the CSS class for the label
          labelStyle: {opacity: 0.75}
    });

    google.maps.event.addListener(marker, 'dragend', function(e) {
       alert(2);
    })
}

JSFIDDLE

Answer 1

除非您有其他解决方案，否则您可以尝试这样的事情（Example）：

var map, dragended;
// ...

google.maps.event.addListener(map, 'click', function(event) {
    if(!dragended) {
        addMarker(event.latLng);
    }
    dragended = false;
});

google.maps.event.addListener(marker, 'dragend', function(e) {
    var target = e.target || e.srcElement;
    if(target && target.className == 'labels') {
        dragended = true;
    }
    alert(2);
});

开始拖动（Check this）时会触发click事件。这是一个使用全局变量的肮脏黑客，但如果没有其他解决方案，它就可以工作。

Answer 2

他们的example页面显示了您正在寻找的内容。

function your_function(e) {  //Callback function
    console.log("Drag: " + e.latLng.toString());
}

//Create map using the #map_canvas element
var map = new google.maps.Map(document.getElementById('map_canvas'), {
    zoom: 12,
    center: new google.maps.LatLng(49.47805, -123.84716),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

//Create new MarkerWithLabel (enhanced version of a Marker)
var marker = new MarkerWithLabel({
    position: new google.maps.LatLng(49.47805, -123.84716),
    draggable: true,
    raiseOnDrag: true,
    map: map,  //Attach to map
    labelContent: "example",
    labelAnchor: new google.maps.Point(22, 0),
    labelClass: "labels" // the CSS class for the label
});

//Finally add a listener to the marker to call your_function when "drag" event has occurred.
google.maps.event.addListener(marker, "drag", your_function );

我想，这就是你需要的所有魔力。

编辑：在对您的小提琴进行进一步调查后，我注意到从标记标签到地图的事件气泡泄漏。由于没有已知的方法可以阻止事件传播从冒泡到另一种类型，因此您可以设置一个变量来跟踪此场景并在触发后清除它。 Related SO question。你可以选择在与map相同的范围内设置一个实际的局部变量，无论哪种方式都可以。

JSFiddle

Answer 3

尝试使用markerwithlabel.js更改，它是markerwithlabel.js中更改的代码。通过这个，你可以避免或忽略标记dragend或标签dragend上的点击标签。

MarkerWithLabel - 拖动事件就像点击事件一样

3 个答案: