[英]Link to mapbox marker on an outside website?
I have a page that includes a mapbox map with about 7 markers. 我有一个页面,其中包含带有约7个标记的mapbox地图。 Each of those markers includes a thumbnail that is also added to a navigation toolbar, and clicking on that thumbnail takes you to the marker and opens it. 这些标记中的每个标记都包含一个缩略图,该缩略图也已添加到导航工具栏,单击该缩略图会将您带到标记并打开它。
I'd like to include similar links on an external website. 我想在外部网站上包含类似的链接。 Is it possible to have a link on an outside webpage that takes me to my mapbox page and opens a specific marker? 是否可以在外部网页上建立一个链接,将我带到我的地图框页面并打开一个特定标记?
//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);
I ended up finding some code that parses the URL parameters with js. 我最终找到了一些用js解析URL参数的代码。 The url parameter here is passes using index.html?piece=X 此处的url参数是使用index.html?piece = X传递的
function getURLParameter(name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null
}
pieceID = getURLParameter('piece');
Later, when populating my markers, I run the following code. 稍后,在填充标记时,我运行以下代码。
if (marker.feature.properties.pieceID == pieceID) {
map.panTo(marker.getLatLng());
marker.openPopup();
}
I also include a property for each marker in the geojson file that is called pieceID. 我还为geojson文件中的每个标记包含了一个名为pieceID的属性。 If the URL is passed with the piece parameter X and a marker has a piece ID equal to X, it will open when the page loads. 如果通过片段参数X传递URL,并且标记的片段ID等于X,则在页面加载时它将打开。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.