Javascript On<；部门>；悬停，如何查找关联的Mapbox标记、更改其颜色并打开弹出窗口？

当我将鼠标悬停在关联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>

L.mapbox.accessToken='apiKey'；
var map=L.mapbox.map（'map'））
.setView（[37.8，-122.4]，13）
.addLayer（L.mapbox.tillelayer（'mapbox.streets'）；
var myLayer=L.mapbox.featureLayer（）.addTo（map）；
setGeoJSON（geojson）；
myLayer.on（'layeradd'，函数（e）{
var标记=e层；
var-feature=marker.feature；
变量内容='这是点ID:'+feature.properties.ID；
marker.bindPopup（内容、{
关闭按钮：false
});
});
myLayer.on（'mouseover'，函数（e）{
var id=e.layer.feature.properties.id；
$（'div'）.removeClass（'hover'）；
$（'div[data rid=“”+id+“]”）addClass（'hover'）；
//在标记悬停时打开弹出窗口
e、 layer.openPopup（）；
});
myLayer.on（'click'，函数（e）{
//单击标记打开弹出窗口
e、 layer.openPopup（）；
});
$（'div'）。悬停（函数（e）{
var id=$（this.data（'id'）；
//迭代GeoJSON，直到找到properties.id
for（var i=0；i

最佳方法是在同一循环中添加传单层和相应的HTML项目。这是一种高效的方法，您可以轻松地在传单层中添加对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:

弹出窗口是如何触发的？它是通过点击来实现的吗？你能将你的标记初始化过程添加到你的代码示例中吗？@Sina该弹出窗口是由悬停在特定div上触发的，该div由数据属性标记：data id=“abcxyz”@iH8我刚刚添加了标记初始化过程。谢谢你的帮助！只要匹配，你就可以为div触发鼠标盖。比如：

$（“#abcxyz”）.mouseover（）您是否尝试过这样做？这应该会弹出你想看的div。