[英]Open leaflet marker popups from a link outside the map?
希望有更多經驗的人可以幫助我。 我有以下地圖
var map = L.map( 'map', {
center: [48.865633, 2.321236],
minZoom: 2,
zoom: 13
});
L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
subdomains: ['a','b','c']
}).addTo( map );
L.control.zoom({
position: 'bottomright'
}).addTo(map);
var myURL = jQuery( 'script[src$="leaflet_openstreetmap_func.js"]' ).attr( 'src' ).replace( 'leaflet_openstreetmap_func.js', '' );
var myIcon = L.icon({
iconUrl: myURL + '../img/pins/Marker.png',
iconRetinaUrl: myURL + '../img/pins/Marker.png',
iconSize: [30, 42],
iconAnchor: [9, 21],
popupAnchor: [7, -15]
});
var markerClusters = L.markerClusterGroup({
polygonOptions: {
opacity: 0,
fillOpacity: 0
}
});
for ( var i = 0; i < markers.length; ++i )
{
var popup =
'<span>'+
'<em>'+ markers[i].type_point +'</em>' +
'<h3>'+ markers[i].name_point +'</h3>' +
'<form action="http://maps.google.com/maps" method="get" target="_blank"><input name="saddr" value="'+ markers[i].get_directions_start_address +'" type="hidden"><input type="hidden" name="daddr" value="'+ markers[i].location_latitude +',' + markers[i].location_longitude +'"><button type="submit" value="Get directions" class="btn_infobox_get_directions">Get directions</button></form>';
var m = L.marker( [markers[i].location_latitude, markers[i].location_longitude], {icon: myIcon} )
.bindPopup( popup );
markerClusters.addLayer( m );
}
map.addLayer( markerClusters );
每個標記的數據來自另一個 js,如下所示
var markers = [
{
"name_point":"Name point",
"type_point":"Type point",
"location_latitude":48.870587,
"location_longitude":2.318943
}
];
我想從外部鏈接打開每個彈出窗口,例如通過 ID 或名稱
<a href="#0" id="marker_1">click</a>
有人可以幫我嗎?
將 id 參數添加到您的數據中:
var markers = [
{
"id":1,
"name_point":"Name point",
"type_point":"Type point",
"location_latitude":51.509,
"location_longitude":-0.08
},
您可以從 url 獲取 id。
//www.xyz.com?markerid=3
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
const regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
var POPUP_MARKER_ID = getParameterByName('markerid');
然后在將標記添加到圖層后,您可以打開彈出窗口,如果它是相同的 id:
var m = L.marker( [markers[i].location_latitude, markers[i].location_longitude],{icon: myIcon})
.bindPopup( popup );
markerClusters.addLayer( m );
if(POPUP_MARKER_ID === markers[i].id){
m.openPopup();
}
或者
如果您想從同一站點上的鏈接字段打開彈出窗口,您可以循環瀏覽圖層。
使用所有 html 元素:
<a class="openpopuplink" data-id="1" href="#">Marker 1</a>
<span class="openpopuplink" data-id="2">Marker 2</span>
//Link on the same page
var classname = document.getElementsByClassName("openpopuplink");
var openMarkerPopup = function() {
var id = this.getAttribute("data-id");
markerClusters.eachLayer(function(layer){
if(layer.options.id && layer.options.id == id){
layer.openPopup();
}
});
};
for (var i = 0; i < classname.length; i++) {
classname[i].addEventListener('click', openMarkerPopup, false);
}
在創建標記時,您必須添加選項id : var m = L.marker( [markers[i].location_latitude, markers[i].location_longitude],{id: markers[i].id,icon: myIcon}).bindPopup( popup );
示例: https : //jsfiddle.net/falkedesign/2uofevbq/
更新
要在 MarkerclusterGroup 中顯示 Popup,先對 group 進行爬網,然后再顯示 popup;
if(layer.options.id && layer.options.id == id){
if(!layer._icon) layer.__parent.spiderfy();
layer.openPopup();
}
if(POPUP_MARKER_ID === markers[i].id){
m.__parent.spiderfy();
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.