【问题标题】:Use external links to open popup windows on leaflet map in drupal使用外部链接在 drupal 的传单地图上打开弹出窗口
【发布时间】:2014-06-03 12:01:51
【问题描述】:

好的,这是我的情况。我正在使用带有 drupal 的传单地图模块。我在我的网站上集成了带有视图的地图。我有包含我想通过弹出窗口显示的内容的节点。当我单击每个单独的标记时,弹出窗口完全按照我的意愿工作。但是,我希望能够单击外部链接也能够打开弹出窗口。我从另一个问题查看并实现了这段代码:

var markers = [];
var marker1 = L.marker([51.497, -0.09],{title:"marker_1"}).addTo(map).bindPopup("Marker 1");
markers.push(marker1);
var marker2 = L.marker([51.495, -0.083],{title:"marker_2"}).addTo(map).bindPopup("Marker 2");
markers.push(marker2);
var marker3 = L.marker([51.49, -0.097],{title:"marker_3"}).addTo(map).bindPopup("Marker 3");
markers.push(marker3);

function markerFunction(id){
    for (var i in markers){
        var markerID = markers[i].options.title;
        if (markerID == id){
            markers[i].openPopup();
        };
    }
}

$("a").click(function(){
    markerFunction($(this)[0].id);
});

由用户 abenrob 提供,但这不适用于由 drupal 生成的标记。

如我所见,我的问题分为两部分。

1:我如何访问不同区块内的地图?我已经从我的菜单块中设置了链接来调用包含上述代码的函数,并且他们正确地调用了它。但是,当我的 Javascript 需要与地图对话时,我什么也得不到。 目前我有“var map = document.getElementById('leaflet-map');”,但这似乎是在拉动 div,而不是在 div 中包含的地图。

2:如何访问我的地图在 drupal 中生成的标记列表。目前,作为测试,我只是手动生成一个标记并使用 bindPopup 函数绑定页面上包含弹出窗口的 div,但我无法将其添加到地图中(参见第 1 部分)。理想情况下,如果它们已经在 Drupal 中创建,我不想在 javascript 中重新创建标记,但我们并不总是生活在一个理想的世界中,但似乎如果我让地图连接起来,我至少可以使用它.

【问题讨论】:

    标签: javascript drupal drupal-7 maps leaflet


    【解决方案1】:

    万一其他人偶然发现了同样的问题,我想出了第一个问题。我使用以下代码通过 Leaflet 模块访问了 Drupal 创建的地图:

    // This accesses the leaflet map created by drupal and sets the map variables so that they can be used with the functions
    
    var map;
    
    $(document).bind('leaflet.map', function(e, settingsLeaflet, lMap)
    {
        map = lMap;
    }); 
    

    我仍在研究第二个问题。当我弄清楚时,我将添加另一个更新。

    编辑:我可以使用以下代码访问第二个问题中的标记:

    var markers = {};
    var markersList = [];
    
    // This accesses the leaflet map features and pulls the marker variables so that they can be used with the functions
    $(document).bind('leaflet.feature', function(e, lFeature, feature)
    {
    markers[feature.feature_id] = lFeature;
    markersList.push(lFeature);
    }); 
    

    从那里开始就像遍历标记列表一样简单,如下所示:

    // This function takes the variable id, which is passed from the HTML call of this function. It then loops through the marker list and compares the id with the value of the title of each marker. If it finds a match, then it opens the popup bound to that specific marker.
    function markerPopups(id)
    {
    
        // Loops through the markers list
        for (var i = 0; i < markersList.length; i++)
        {
            // Sets a variable to get the title of the marker, which
            var markerID = markersList[i].options.title.replace(/[^a-zA-Z0-9]/g, '_');
    
            // Compares the variable passed through the function to the title of the marker. If there is a match, it opens the popup for that marker.
            if(markerID == id)
            {
                markersList[i].openPopup();
            }
        }
    } 
    

    此外,一旦您访问了预先制作的标记,就不需要访问地图,因此您可以忽略第一部分,除非您需要将地图用于其他任何事情。

    【讨论】:

    • 对于第 1 部分,请确保在创建地图之前粘贴该代码。我将它添加到我的视图标题中,效果很好。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多