[英]Open leaflet marker popups from a link outside the map?
hope that someone with more experience can help me.希望有更多经验的人可以帮助我。 i have the following 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 );
the data of each marker comes from another js like below每个标记的数据来自另一个 js,如下所示
var markers = [
{
"name_point":"Name point",
"type_point":"Type point",
"location_latitude":48.870587,
"location_longitude":2.318943
}
];
i would like to open each popup from an external link,by id or name for example我想从外部链接打开每个弹出窗口,例如通过 ID 或名称
<a href="#0" id="marker_1">click</a>
could some one help me please?有人可以帮我吗?
Add a id parameter to your data:将 id 参数添加到您的数据中:
var markers = [
{
"id":1,
"name_point":"Name point",
"type_point":"Type point",
"location_latitude":51.509,
"location_longitude":-0.08
},
You can get the id from a url.您可以从 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');
and then after adding the marker to the layer, you can open the popup, if it's the same id:然后在将标记添加到图层后,您可以打开弹出窗口,如果它是相同的 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();
}
OR或者
if you want to open the popup from a link field on the same site you can loop through the layers.如果您想从同一站点上的链接字段打开弹出窗口,您可以循环浏览图层。
Working with all html elements:使用所有 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);
}
And on creating the markers you have to add the option id : var m = L.marker( [markers[i].location_latitude, markers[i].location_longitude],{id: markers[i].id,icon: myIcon}).bindPopup( popup );
在创建标记时,您必须添加选项id :
var m = L.marker( [markers[i].location_latitude, markers[i].location_longitude],{id: markers[i].id,icon: myIcon}).bindPopup( popup );
Example: https://jsfiddle.net/falkedesign/2uofevbq/示例: https : //jsfiddle.net/falkedesign/2uofevbq/
Update更新
To show Popup in a MarkerclusterGroup, spiderfy the group and then show the popup;要在 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.