Ustaw widok i wywołać kliknięcie znacznika z zewnętrznego HTML w mapbox

Question

Mam trochę zewnętrznego HTML (generowanego z GeoJSON), który ma listę znaczników, które na mapie. Przykładem produktu wynosi:

<ul id="marker-list"> 
    <li data-lat="53.3895673" data-lng="-1.4725166">Marker 1</li> 
</ul> 

Następnie Mam następujący jQuery, który nasłuchuje zdarzenia kliknij na jedną z pozycji i powinny następnie skupić się na tych współrzędnych i wywoła zdarzenie kliknij na znacznik (aby otworzyć popup).

$(document).on('click', '#marker-list li', function(e){ 
    e.preventDefault(); 
    var latlngPoint = new L.latLng($(this).attr('data-lat'), $(this).attr('data-lng')); 
    map.setView(latlngPoint, 18); 
    map.fireEvent('click', { 
     latlng: latlngPoint, 
     layerPoint: map.latLngToLayerPoint(latlngPoint), 
     containerPoint: map.latLngToContainerPoint(latlngPoint) 
    }); 
}); 

setView działa dobrze, ale popup nie jest otwarty ...

dodania:

map.on('click', function(e){ 
    console.log(e); 
}); 

ujawnia, że ​​zdarzenie click jest zwolniony, ale nie powoduje to popup do otwarcia ... Jak otworzyć popup? Czy istnieje sposób na celowanie w marker?

Answer 1

OK, więc rozwiązałem to, celując bezpośrednio w znacznik, używając identyfikatora!

pierwsze dodałem identyfikator z danymi GeoJSON tak:

"properties": { 
    "id": "marker-1", 
    "marker-color": "#00ff00", 
    "marker-size": "large", 
    "marker-symbol": 1 
} 

Następnie dodaje identyfikator do listy markera tak stało:

<ul id="marker-list"> 
    <li data-id="marker-1" data-lat="53.3895673" data-lng="-1.4725166">Marker 1</li> 
</ul> 

Dla tych, którzy chcą wiedzieć, jak to zrobić:

var myLayer = L.mapbox.featureLayer().loadURL('/geojson.json').on('ready', run).addTo(map); 

function run() 
{ 
    map.fitBounds(myLayer.getBounds(), {padding: [40,40]}); 

    $('#marker-list').html(''); 
    var markerList = document.getElementById('marker-list'); 

    myLayer.eachLayer(function(layer) { 

     var html = '\ 
     <li data-id="' + layer.toGeoJSON().properties.id + '" data-lat="' + layer.toGeoJSON().geometry.coordinates[1] + '" data-lng="' + layer.toGeoJSON().geometry.coordinates[0] + '">\ 
     </li>'; 
     $('#marker-list').append(html); 

     layer._icon.id = layer.toGeoJSON().properties.id; 

    }); 

} 

Potem zmieniłem detektor zdarzeń do:

$(document).on('click', '#marker-list a', function(e){ 
    e.preventDefault(); 
    var latlngPoint = new L.latLng($(this).attr('data-lat'), $(this).attr('data-lng')); 
    map.setView(latlngPoint, 18); 
    $('#' + $(this).attr('data-id')).trigger('click'); 
}); 

Doskonale, że działa ! W rzeczywistości występuje niewielki błąd, w wyniku którego ręczne przesuwanie powoduje, że zdarzenia wyzwalające przestają działać, ale jeśli klikniesz mapę, to naprawi ją ponownie (do ponownego przesuwania) ... Nie wiesz, dlaczego tak się dzieje:/

---

Okay Mam poprawkę dotyczącą powyższego problemu. Zasadniczo dodaj znaczniki do globalnej tablicy podczas pętli eachLayer. na przykład globalMarkers.push(layer);

A także dołączyć indeks pętli na liście znaczników więc masz coś takiego:

<li data-index="2">Marker 2</li> 

Następnie można dosłownie używać tego indeksu, aby wywołać okienko do tego markera jak ten:

globalMarkers[$(this).attr('data-index')].openPopup();