Question

我有一张使用传单绘制的地图。在该地图中，我在不同位置绘制了几个标记。点击标记我创建一个显示一些消息的弹出窗口。我有代码：

markers.on("click", function(d) {
    div.html("This is Some info").style(
        "left", (d3.event.pageX) + "px").style(
        "top",  (d3.event.pageY - 80) + "px");
}

因此div出现在我点击的位置，即标记的位置。现在，如果我拖动地图，标记会随地图移动，但div仍保留在同一位置。如何使用拖动事件更改div的样式，以便div也与标记一起移动？

我在拖动事件方法中尝试以下代码：

if(d.code==clickedcode)
{
    console.log((map.latLngToLayerPoint([ d.lat, d.lon ]).x) + "px , "
        +(map.latLngToLayerPoint([ d.lat, d.lon ]).y - 80) + "px");

    div.style["left"]=(map.latLngToLayerPoint([ d.lat, d.lon ]).x) + "px";
    div.style["top"]=(map.latLngToLayerPoint([ d.lat, d.lon ]).y - 80) + "px";
}

但它仍然显示与前一次相同的像素位置。

Answer 1

您可以尝试使用地图“拖动”事件来计算班次，然后将其应用到您的div位置。这些方面的东西......

    var startCoords;
    var startLat;
    var startLng;
    var movedCoords;
    var shiftLat;
    var shiftLng;

    map.on('dragstart', function() {
        startCoords = map.getCenter();
        startLat = startCoords.lat;
        startLng = startCoords.lng;
        console.log("STARTED FROM:  " + startLat + "," +startLng);

    });

    map.on('drag', function() {
        movedCoords = map.getCenter();
        shiftLat = startLat - movedCoords.lat;
        shiftLng = startLng - movedCoords.lng;
        console.log("Shifted:  " + shiftLat + "," + shiftLng);
        //apply shift to custom div here...

    });

如何在传单中将弹出div与标记一起移动

1 个答案: