3

leafletjs API を使用して、openstreetmaps に場所を表示することを実装しています。シナリオは次のとおりです。ページが読み込まれると、DB にクエリを実行してすべてのデバイスの現在の位置を取得し、それらをマップ上のマーカーとして表示する JS 関数がトリガーされます。私はその中で2つの大きな問題に直面しています:

--> わかりやすいように、ポップアップを各マーカーにバインドしようとしています。言い換えれば、ユーザーは、このマーカーがどのデバイス用であるかを理解する必要があります。問題は、ポップアップがマーカーの上に表示され、マーカーが見えなくなることです。スクリーンショットは次のとおりです。

ここに画像の説明を入力

マーカーを以下に示します (1 つのポップアップを閉じた後):

ここに画像の説明を入力

--> このページでは、デバイス名を表形式で表示しています。この表の最初の列はチェックボックスです。ユーザーがデバイスをチェックすると、そのマーカーが期待どおりにマップに表示されます (正常に動作します)。その後、ユーザーがそのデバイスのチェックを外すと、そのマーカーは消えます。ただし、ユーザーがそのデバイスを再度選択すると、そのマーカーは表示されません。

これが私のコードです：

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]);
    }
}
}

どんな助けでも大歓迎です。

ありがとう。

4

3 に答える 3

2

ポップアップをマーカーの上にオフセットして配置するには、offset プロパティが存在します。

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();
}
于 2013-03-15T09:56:34.273 に答える
2

ポップアップを作成するときに、オプションオブジェクト内にオフセットを設定します。

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

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

「オプション」オブジェクトは、L.popup() に渡される最初のオブジェクトです。

于 2015-01-15T14:08:53.953 に答える
1

bindPopupマーカーの上にポップアップを表示するには、マーカーでメソッドを呼び出すだけです。これはQuickStartに示されています。

ポップアップを自分でインスタンス化する必要はありません。

于 2013-03-18T01:41:50.223 に答える