【问题标题】:How to get focus to map marker when click on a link outside the map?单击地图外的链接时如何获得地图标记的焦点?
【发布时间】:2016-06-07 04:08:13
【问题描述】:

所以,我有一张带有 mapquest 传单的地图,上面显示了一些标记,并且有一些弹出消息。然而,一切都运作良好,但在地图下方我有一张桌子,我在上面显示酒店号码。所以像这样的链接:

<a href='#Hotel22'>Hotel 22</a><a href='#Hotel23'>Hotel 23</a><a href='#Hotel24'>Hotel 24</a>

因此,当任何用户单击#Hotel22 时,它将直接聚焦到地图的特定标记并打开标记窗口。这样用户就会知道 Hotel 22 在地图上...

如果有人知道这一点,那么我的地图是在传单中创建的,但使用 mapquest 传单 api 方式。由于项目的原因,我不能在这里复制/粘贴一些复杂的代码......

谢谢你的进步我的朋友们。:)

【问题讨论】:

标签: javascript jquery leaflet mapquest


【解决方案1】:

您基本上必须维护标记的关联数组。

<a href="#" onclick="focusOn('paris')">Paris</a>

// javascript
var markers = {};
markers["paris"] = L.marker([48.85749, 2.35107]).addTo(mymap)
.bindPopup("<b>Hello world!</b><br />I am Paris.");

function focusOn(city) {
   markers[city].openPopup();
}

example

【讨论】:

    【解决方案2】:

    您可以通过它们的 layerId 来引用标记。在列表中引用它(如果要在滚动标记时列出以突出显示,请在标记上引用)。

                            marker = L.marker([c.shapePoints[0], c.shapePoints[1]]);
                            srs.addLayer(marker);
                            layerid = srs.getLayerId(marker);
                            marker.on('mouseover', function(a){
                                over(srs.getLayerId(a.target));
                            })
                            .on('mouseout', function(a){
                                out(srs.getLayerId(a.target));
                            })
                            .bindPopup(c.name);
                            tabletext = tabletext + '<tr id="row' + layerid + '" ' +
                                'onmouseover="over(' + layerid + ');" ' +
                                'onmouseout="out(' + layerid + ');">' +
                                '<td>' + c.name + '</td>' +
                                '</tr>';
    

    然后在over和out函数中可以控制marker和list。

            function over(id) {
                srs.getLayer(id).setIcon(newicon);
                $('#row' + id).css('backgroundImage', highlight);
            }
    

    看到它在行动here

    【讨论】:

      猜你喜欢
      • 2013-01-09
      • 1970-01-01
      • 2011-01-21
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2020-02-04
      • 1970-01-01
      相关资源
      最近更新 更多