0

我有一个页面，其中包含一个带有大约 7 个标记的 mapbox 地图。这些标记中的每一个都包含一个缩略图，该缩略图也添加到导航工具栏中，单击该缩略图会将您带到标记并打开它。

我想在外部网站上包含类似的链接。是否可以在外部网页上有一个链接，将我带到我的 mapbox 页面并打开一个特定的标记？

//populate markers
oneArtPlease.on('layeradd', function(e) {
    var marker = e.layer,
    feature = marker.feature;

    // popupz
    var popupContent =  '<div class="thumbnail"><a target="_blank" class="popup" href="' + feature.properties.url + '">' +
        '<img src="' + feature.properties.image + '" width="300" title="Click for the full picture" /><br>' +
        feature.geometry.coordinates+'</br>'+
        feature.properties.picnote +
        '</a></div>';
    marker.bindPopup(popupContent,{
        closeButton: true,
        minWidth: 320
    });

    //change icon
    marker.setIcon(L.icon(feature.properties.icon));
    //populate thumbnail bar
    var link = info.insertBefore(document.createElement('a'),info.firstChild);
    link.className = 'item';
    link.href = '#';
    link.innerHTML ='<img src="' + feature.properties.image + '" class="navthumb"/>';
    link.onclick = function() {
        if (/active/.test(this.className)) {
            this.className = this.className.replace(/active/, '').replace(/\s\s*$/, '');
        } else {
            var siblings = info.getElementsByTagName('a');
            for (var i = 0; i < siblings.length; i++) {
                siblings[i].className = siblings[i].className
                .replace(/active/, '').replace(/\s\s*$/, '');
            };
            this.className += ' active';
            // move to marker and open on thumbnail click
            map.panTo(marker.getLatLng());
            marker.openPopup();
        }
        return false;
    };

});
new L.Control.Zoom({ position: 'topright' }).addTo(map);
4

1 回答 1

0

我最终找到了一些用 js 解析 URL 参数的代码。这里的 url 参数是使用 index.html?piece=X 传递的

function getURLParameter(name) {
  return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null
}

pieceID = getURLParameter('piece');

稍后，在填充我的标记时，我运行以下代码。

if (marker.feature.properties.pieceID == pieceID) {
    map.panTo(marker.getLatLng());
    marker.openPopup();
}

我还在 geojson 文件中为每个标记包含了一个名为pieceID 的属性。如果 URL 与片段参数 X 一起传递，并且标记的片段 ID 等于 X，则它将在页面加载时打开。

于 2014-10-16T14:13:45.793 回答