MarkerWithLabel - 拖动事件就像点击事件一样工作答案

【问题标题】：MarkerWithLabel - drag event works like click eventMarkerWithLabel - 拖动事件就像点击事件一样工作
【发布时间】：2014-06-13 06:37:11
【问题描述】：

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

我使用可拖动的标记。

如果我拖动一个标记，它可以正常工作。但是，如果我拖动一个标签，它适用于地图上的点击事件。

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

在我的示例中 - 当我拖动标记时，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

【问题讨论】：

来自文档 - 点击 - 当用户点击地图时触发此事件（但当他们点击标记或信息窗口时不会触发）。但没有关于标签。

标签： javascript google-maps google-maps-markers

【解决方案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 事件。这是一个使用全局变量的肮脏黑客，但如果没有其他解决方案，它就可以工作。

【讨论】：

【解决方案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 );

这就是你需要的所有魔法，我猜。

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

JSFiddle.

【讨论】：

如果您拖动标签，地图会创建新的标记。但是地图不应该对拖动标签做出反应。
因为google.maps.event.addListener(map, 'click', function(event) { addMarker(event.latLng) });
完全正确。但我不想要它。我想拖动一个标记并创建它。不是同一时间。来自文档 - 单击 - 当用户单击地图时触发此事件（但不是当他们单击标记或信息窗口时）。但它不适用于标签。
让我看看我能不能把这个 Fiddle 清理一下。
@LaughtDonor，谢谢

【解决方案3】：

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

【讨论】：