设置视图并触发在mapbox中从外部HTML单击标记

Question

我有一些外部HTML(由GeoJSON生成),其中包含地图上的标记列表.项目的示例是:

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

然后我有以下jQuery监听其中一个项目的click事件,然后应该关注这些坐标并触发标记上的click事件(打开它的弹出窗口).

$(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工作正常,但弹出窗口没有被打开...

添加:

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

显示click事件被触发,但它不会导致弹出窗口打开...如何让弹出窗口打开？有没有办法定位标记？

Answer 1

好吧，我通过直接使用 ID 定位标记解决了这个问题！

首先，我向 geoJSON 数据添加了一个 ID，如下所示：

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

然后将id添加到标记列表中，这样它就变成了：

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

对于那些想知道如何执行此操作的人：

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;

    });

}

然后将我的事件侦听器更改为：

$(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');
});

这有效完美！实际上，有一个小错误，手动平移会导致触发事件不再起作用，但如果您单击地图，它会再次修复它（直到您再次平移）...但不确定为什么会发生这种情况：/

好的，我已经解决了上述问题。基本上在循环期间将标记添加到全局数组中eachLayer。例如globalMarkers.push(layer);

并且还将循环索引附加到标记列表中，这样您就可以得到如下内容：

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

然后，您实际上可以使用该索引来调用该标记的弹出窗口，如下所示：

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