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

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

除非您有其他解决方案,否则您可以尝试这样的(示例):

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);
});

click开始拖动时会触发该事件(检查此项).这是一个使用全局变量的肮脏黑客,但如果没有其他解决方案,它就可以工作.

Answer 2

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

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 );

我想这就是你所需要的全部魔力。

编辑：在对您的小提琴进行进一步调查后，我注意到事件气泡从标记标签泄漏到地图。由于没有已知的方法可以阻止事件传播为不同类型，因此您可以设置一个变量来跟踪这种情况，并在触发后将其清除。相关SO问题。您可以选择仅在与映射相同的范围内设置一个实际的局部变量，无论哪种方式都可以。

JSFiddle。