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

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

Answer 1

好的，所以我通过使用ID直接定位标记来解决这个问题！

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

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

然后将id添加到标记列表中，使其成为：

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();

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

$("#or-table tr[data-row-id='2']")

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

1 个答案: