上 <div> 悬停，我如何找到相关的Mapbox标记，更改其颜色，并打开弹出窗口？

Question

当我将鼠标悬停在关联div上时，我无法使用JS强制打开特定标记的弹出/信息窗口。

请参考apartmentlist.com/ca/san-francisco以获取我正在尝试的示例：用户将鼠标悬停在div（例如，租赁列表）上，然后相关的Mapbox地图标记会更改颜色并打开弹出/信息窗口。 请注意下面的图像，其中鼠标悬停在左侧的div 上 ：

以下是我目前的代码。 它成功更改了标记颜色，但我不确定如何打开弹出窗口。

初始化，GeoJSON定义和函数

  <script>

        L.mapbox.accessToken = 'apiKey';

        var map = L.mapbox.map('map')
            .setView([37.8, -122.4], 13)
            .addLayer(L.mapbox.tileLayer('mapbox.streets'));

        var myLayer = L.mapbox.featureLayer().addTo(map);

        myLayer.setGeoJSON(geojson);

        myLayer.on('layeradd', function(e) {
            var marker = e.layer;
            var feature = marker.feature;
            var content = 'This is Point ID: ' + feature.properties.id;

            marker.bindPopup(content, {
                closeButton: false
            });
        });

        myLayer.on('mouseover', function(e) {
            var id = e.layer.feature.properties.id;
            $('div').removeClass('hover');
            $('div[data-rid="' + id + '"]').addClass('hover');

            // Open Popup on marker hover
            e.layer.openPopup();
        });

        myLayer.on('click', function(e) {
            // Open Popup on marker click
            e.layer.openPopup();
        });

        $('div').hover(function(e) {

            var id = $(this).data('id');

            // Iterate through GeoJSON until properties.id is found
            for (var i = 0; i < geojson.features.length; i++) {

                if(geojson.features[i].properties.id == id) {

                    // If id matches, open popup
                    // TODO: not working, likely conflict with setGeoJSON() below
                }
            }

            // Update map layer with new geoJSON
            myLayer.setGeoJSON(geojson);
        })

  </script>

Answer 1

“最佳”方式是在同一循环中添加Leaflet图层和相应的HTML项目。 它非常有效，您可以轻松地在Leaflet图层中添加对HTML项目的引用，反之亦然。 想象一下：

// Create marker
var marker = new L.Marker([0,0]);
// Append marker to map
marker.addTo(map);

// Create link
var link = document.create('a');
// Append link to body
document.body.appendChild(link);

// Reference eachother:
link.marker = marker;
marker.link = link;

现在，您可以将事件附加到标记并直接访问HTML中的相应项目，例如：

marker.on('mouseover', function (e) {
    e.target.link.style.color = 'red'; // e.target == marker
});

// or

L.DomEvent.addListener(link, 'mouseover', function (e) {
    e.target.marker.openPopup();  // e.target == link
});

联合：

var link = L.DomUtil.create('a', 'link', document.body);

var marker = new L.Marker([0,0]).bindPopup('Popup').addTo(map);

link.marker = marker;
marker.link = link;

L.DomEvent.addListener(link, 'mouseover', function (e) {
    e.target.marker.openPopup(); 
});

L.DomEvent.addListener(link, 'mouseout', function (e) {
    e.target.marker.closePopup(); 
});

marker.on('mouseover', function (e) {
    e.target.link.style.color = 'red';
});

marker.on('mouseout', function (e) {
    e.target.link.style.color = 'black';
});

Plunker： http ：//plnkr.co/edit/IjCB9s?p=preview