Question

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

我尝试在同一个引脚上附加多个事件处理程序，但它无效。

示例代码：

    <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进行了测试，当我使用鼠标或触摸拖动图钉时，两者都按预期工作。当我拖动开始拖动事件时，当我停止拖动拖动结束事件时，最终会触发click事件。拖动结束事件将始终在click或mouseup事件之前触发。如果要处理用户实际上没有移动引脚的情况，如果在拖动开始事件触发时捕获图钉的像素坐标，则可以执行此操作，然后将它们与图钉的拖动结束事件像素坐标进行比较。如果它们不相同则拖动图钉，您可以在拖动图钉时执行所需操作，否则忽略该事件并等待单击事件。如果你想要，你也可以做一个快速计算，找出图钉在像素距离内移动的距离，如果它很小，你可能还想忽略拖动事件。

Answer 2

我存储了标志值＆＃34; true＆＃34;在全局变量中，当涉及到拖动方法并在结束拖动方法上检查相同的标志值时，执行拖动引脚时所需的代码。

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

Answer 3

我刚刚在Chrome中注意到了这一点，所以现在在dragstart中捕获引脚位置，然后将其与dragend的引脚位置进行比较。我需要对值进行舍入。

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

3 个答案: