LeafletJS弹出窗口位置和标记添加和删除问题

Question

我正在使用leafletjs API在openstreetmaps上实现位置显示。以下是场景，页面加载时会触发JS函数，该函数将查询数据库以获取所有设备的当前位置，并将它们显示为地图上的标记。我遇到了两个主要问题：

--> 我试图将弹出窗口与每个标记绑定，以使其更具描述性。换句话说，用户应该知道这个标记是哪个设备的。问题在于弹出窗口显示在标记上方，使标记不可见。以下是屏幕截图： 标记如下（关闭一个弹出窗口后）： --> 在此页面上，我在表格中显示设备名称。该表格的第一列是复选框。当用户选中设备时，其标记按预期出现在地图上（正常工作）。之后，如果用户取消选中该设备，则其标记消失。但是，当用户再次选择该设备时，其标记不会出现。

以下是我的代码：

function OnPageLoad() {
var IDs = GetAllSelectedDeviceIDs();
LoadOpenStreetMap(IDs);
}

var map;
var markers = new Array();

function LoadOpenStreetMap(deviceIDs) {
for (var i = 0; i < deviceIDs.length; i++) {
    $.ajax({
        url: "../Database/getcurrentlocation.php",
        cache: false,
        type: "post",
        data: "deviceId=" + deviceIDs[i] + "&r=" + Math.random(),
        dataType: "html",
        async: false,
        success: function (data) {
            if (data != null) {
                var dataArray = data.split(/~/);
                SetOpenStreetMap(dataArray[0], dataArray[1], deviceIDs[i], i, flags[i]);
            }
        }
    });
}
deviceIDs = GetAllSelectedDeviceIDs();
setTimeout(function () { LoadOpenStreetMap(deviceIDs); }, 500);
}

function SetOpenStreetMap(lati, longi, deviceID, markerIndex, markerFlag) {
if (!map) {
    map = L.map('map').setView([lati, longi], 12);
    L.tileLayer('http://{s}.tile.cloudmade.com/XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX/997/256/{z}/{x}/{y}.png', {
        attribution: '',
        maxZoom: 18
    }).addTo(map);
}

if (markerFlag == 1) {
//need to add marker
    if (!markers[markerIndex]) {
        var popupLocation1 = new L.LatLng(lati, longi);
        var popupContent1 = 'This is a nice popup.';
        popup1 = new L.Popup();
        popup1.setLatLng(popupLocation1);
        popup1.setContent(popupContent1);
        markers[markerIndex] = L.marker([lati, longi]).addTo(map);
        markers[markerIndex].bindPopup(popupContent1);
        map.addLayer(popup1);
    }
    else
        markers[markerIndex].setLatLng([lati, longi]).update();
}
else {
//need to remove marker
    if (markers[markerIndex]) {
       map.removeLayer(markers[markerIndex]);
    }
}
}

任何帮助都将不胜感激。

谢谢。

- Azeem

---

你找到第二个问题的解决方案了吗？关于它没有重新加载标记的部分？ - Barrett

Answer 1

在创建弹出窗口时，在选项对象中设置偏移量。

var options = {
  offset:  new L.Point(1, -20)
};

var popup = L.popup(options)
  .setLatLng([ lat, lng ])
  .setContent('Your popup content goes here!')
  .openOn(map)
  ;

"options"对象是传递给L.popup()的第一个对象。

- f1lt3r

Answer 2

为了在标记物上方显示弹出窗口并具有一定的偏移量，可以使用偏移属性：

if (markerFlag == 1) { //need to add marker
    if (!markers[markerIndex]) {
        var popupLocation1 = new L.LatLng(lati, longi);
        var popupContent1 = 'This is a nice popup.';
        popup1 = new L.Popup();
        popup1.setLatLng(popupLocation1);
        popup1.setContent(popupContent1);
        popup1.offset = new L.Point(0, -20);
        markers[markerIndex] = L.marker([lati, longi]).addTo(map);
        /* markers[markerIndex].bindPopup(popupContent1);  */
        map.addLayer(popup1);
     } else
        markers[markerIndex].setLatLng([lati, longi]).update();
}

- Volkan

---

@lhsan，谢谢您的回复。您能否进一步说明如何将弹出窗口的延迟时间减少一到两秒？ - Azeem

@lhsan，我按照你上面提到的方式添加了弹出窗口。但是这种方法的问题在于它只允许一个标记的弹出窗口可见。我需要在页面加载时显示所有标记的弹出窗口。 - Azeem

@lhsan不起作用。弹出窗口出现在之前的相同位置。 - Azeem

你检查过你的leaflet js版本了吗？看这里：http://leafletjs.com/reference.html#popup 特别是offset属性。如果没有改变，我很抱歉。这就是我所能做的。 - Volkan

Answer 3

要在标记上显示弹出窗口，只需在标记上调用bindPopup方法即可。这在快速入门中有示例。

您无需自己实例化一个弹出窗口。

- flup

---

她想要所有弹出窗口同时可见，这不是bindPopup的行为。 - Volkan

@Ihsan 我没有尝试过这个，但那应该取决于你绑定后如何打开它。因此，请使用marker.bindPopup('content').addTo(map)创建弹出窗口。 - flup