javascript - 在<div>悬停时，如何找到关联的Mapbox标记，更改其颜色并打开弹出窗口？

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

请引用apartmentlist.com/ca/san-francisco作为我尝试执行的示例:用户将鼠标悬停在div(例如，租借列表)上，然后关联的Mapbox map 标记会更改颜色并打开“弹出窗口/信息窗口”。请注意下图，其中鼠标悬停在左侧的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>

最佳答案

“最佳”方法是在同一循环中添加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';
});

柱塞:http://plnkr.co/edit/IjCB9s?p=preview