单击 bingmap 上的图钉触发拖动事件

Question

我在图钉上附加了多个事件（click、dragstart、dragend）事件，但问题是，当我在 bing 地图上单击图钉时，它首先调用两个拖动事件。我想在点击图钉时重新启动拖动事件，当我们在地图上拖动图钉时应该触发它。

我尝试在同一个 pin 上附加多个事件处理程序，但它不起作用。

示例代码：

    <html>
      <head>
          <script charset="UTF-8" type="text/javascript"   src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
     <script>
        var pinInfoBox;  //the pop up info box
        var infoboxLayer = new Microsoft.Maps.EntityCollection();
        var pinLayer = new Microsoft.Maps.EntityCollection();
        var apiKey = "Key";

        function GetMap() {

            map = new Microsoft.Maps.Map(document.getElementById("map"), { credentials: apiKey });

            // Create the info box for the pushpin
            pinInfobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false });
            infoboxLayer.push(pinInfobox);


            for (var i = 0 ; i < 10; i++) {
                //add pushpins
                var latLon = new Microsoft.Maps.Location(Math.random() * 180 - 90, Math.random() * 360 - 180);
                var pin = new Microsoft.Maps.Pushpin(latLon, { draggable: true });
                pin.Title = name;//usually title of the infobox
                pin.Description = "blahblahblah, " + i; //information you want to display in the infobox
                pinLayer.push(pin); //add pushpin to pinLayer
                Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);
                Microsoft.Maps.Events.addHandler(pin, 'dragstart', startDragDetails);
                Microsoft.Maps.Events.addHandler(pin, 'dragend', endDragDetails);
            }

            map.entities.push(pinLayer);
            map.entities.push(infoboxLayer);

        }

        startDragDetails = function (e) {
            console.log("Start Latitude/Longitude: " + e.entity.getLocation());
        };
        endDragDetails = function (e) {
            console.log("End Latitude/Longitude: " + e.entity.getLocation());
        };

        function displayInfobox(e) {
            console.log("click");
            pinInfobox.setOptions({ title: e.target.Title, description: e.target.Description, visible: true, offset: new Microsoft.Maps.Point(0, 25) });
            pinInfobox.setLocation(e.target.getLocation());
        }

        function hideInfobox(e) {
            pinInfobox.setOptions({ visible: false });
        }
    </script>

    <style>
        #map {
            position: absolute;
            top: 20px;
            left: 10px;
            width: 700px;
            height: 500px;
            border: #555555 2px solid;
        }
    </style>
</head>
<body onload="GetMap()">
    <div id="map">
    </div>
</body>
</html>

Answer 1

我已经使用 IE 和 Chrome 进行了测试，当我使用鼠标或触摸来拖动图钉时，两者都按预期工作。当我拖动开始拖动事件时触发，当我停止拖动时拖动结束事件触发，最后点击事件触发。拖动结束事件将始终在单击或鼠标弹起事件之前触发。如果您想处理用户实际上没有移动图钉的情况，您可以在拖动开始事件触发时捕获图钉的像素坐标，然后将它们与图钉的拖动结束事件像素坐标进行比较。如果它们不相同，则图钉被拖动，您可以在拖动图钉时执行您想要的操作，否则忽略该事件并等待点击事件。如果您愿意，您还可以进行快速计算以找出图钉在像素距离内移动了多远，如果它很小，您可能还想忽略拖动事件。

Answer 2

我在拖动方法时将标志值 "true" 存储在全局变量中，并在结束拖动方法时检查相同的标志值以执行拖动引脚时所需的代码。

因此，如果我们单击图钉，它会调用拖动方法，但不会在单击事件中执行我们不需要的代码。

Answer 3

我只是在 Chrome 中才注意到这一点，所以现在在 dragstart 上我捕获了引脚位置，然后将其与 dragend 中的引脚位置进行比较。不过我需要四舍五入这些值。

单击 bingmap 上的图钉触发拖动事件

Drag events fired on click of pushpin on bingmap

javascript

bing-maps

pushpin