Javascript 问题:弹出式can';不能打开两次
我用记号笔画了一张传单地图。单击一个标记,就会打开一个弹出窗口。我添加了一个搜索栏,使标记可以搜索。选择标记名称后,地图将缩放到该标记,并将打开一个弹出窗口 我的问题是:每个弹出窗口只能打开一次,只有当选择一个标记时,缩放才起作用,弹出窗口不会打开。如果已单击,则第二次单击不会打开弹出窗口。我想这是因为函数changeSelection中有一个错误,但我无法真正理解它。你有什么建议吗 地图的主体位于。你可以用地图查看我的问题。 这是我的js代码:Javascript 问题:弹出式can';不能打开两次,javascript,popup,leaflet,Javascript,Popup,Leaflet,我用记号笔画了一张传单地图。单击一个标记,就会打开一个弹出窗口。我添加了一个搜索栏,使标记可以搜索。选择标记名称后,地图将缩放到该标记,并将打开一个弹出窗口 我的问题是:每个弹出窗口只能打开一次,只有当选择一个标记时,缩放才起作用,弹出窗口不会打开。如果已单击,则第二次单击不会打开弹出窗口。我想这是因为函数changeSelection中有一个错误,但我无法真正理解它。你有什么建议吗 地图的主体位于。你可以用地图查看我的问题。 这是我的js代码: function myFunction() {
function myFunction() {
var map = L.map('map').setView([51.426002, 7.503215], 8);
// improve experience on mobile
if (map.tap) map.tap.disable();
L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles © Esri — Esri, DeLorme, NAVTEQ',
maxZoom: 16
}).addTo(map);
map._layersMinZoom=8;
var selectedRadio = 0;
var RadioByName = {};
var markersLayer = new L.LayerGroup(); //layer contain searched elements
map.addLayer(markersLayer);
var controlSearch = new L.Control.Search({
position:'topright',
layer: markersLayer,
initial: false,
zoom: 12,
marker: false,
textPlaceholder: 'Suche...'
});
map.addControl(controlSearch);
// create newsroom markers
var radioMarkers = [];
var icon = L.icon({
iconUrl: 'icons/icon.png',
iconSize: [30, 32], // size of the icon
iconAnchor: [15, 32], // point of the icon which will correspond to marker's location
popupAnchor: [0, -32]
});
for(i=0; i<radio.length; i++) {
RadioByName[radio[i].redaktion] = radio[i];
var radio_marker = [];
radio_marker.redaktion = radio[i].redaktion; // associate marker with newsroom
radio_marker.lat = radio[i].lat;
radio_marker.long = radio[i].long;
radio_marker.stadt = radio[i].stadt;
radio_marker.redaktion_link = radio[i].redaktion_link;
var title = radio_marker.redaktion, //value searched
loc = [radio_marker.long, radio_marker.lat], //position found
radio_marker = new L.marker(new L.latLng(loc), {
icon: icon,
title: title,
stadt: radio_marker.stadt,
redaktion_link: radio_marker.redaktion_link
});
markersLayer.addLayer(radio_marker);
radio_marker.on('click', function(e) {
changeSelection(e.target.options.title);
map.setView([e.target._latlng.lat, e.target._latlng.lng]);
var myPopup = L.popup()
.setContent("<strong>" + e.target.options.redaktion_link + "</strong> | " +
e.target.options.stadt);
e.target.bindPopup(myPopup).openPopup();
});
radioMarkers.push(radio_marker); // keep marker reference for later
}
function changeSelection(radioRedaktion) {
if(selectedRadio == 0 || selectedRadio != radioRedaktion) {
selectedRadio = radioRedaktion;
for(i=0; i<radioMarkers.length; i++) {
if(radioMarkers[i].options.title == radioRedaktion) {
radioMarkers[i].openPopup();
}
}
}
else {
selectedRadio = 0;
}
}
}
函数myFunction(){
var map=L.map('map').setView([51.426002,7.503215],8);
//改善手机体验
if(map.tap)map.tap.disable();
L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z} /{y}/{x}'{
属性:'Tiles©;Esri&mdash;Esri,DeLorme,NAVTEQ',
最大缩放:16
}).addTo(地图);
地图。_layersMinZoom=8;
var selectedRadio=0;
var RadioByName={};
var markersLayer=new L.LayerGroup();//层包含搜索的元素
map.addLayer(markersLayer);
var controlSearch=新的L.Control.Search({
位置:'topright',
图层:markersLayer,
首字母:false,
缩放:12,
马克:错,
文本占位符:“Suche…”
});
map.addControl(controlSearch);
//创建编辑室标记
var放射性标记=[];
var icon=L.icon({
iconUrl:'icons/icon.png',
图标大小:[30,32],//图标的大小
iconAnchor:[15,32],//将对应于标记位置的图标点
popupAnchor:[0,-32]
});
对于(i=0;i查看的源代码),如果弹出窗口已绑定,则后续调用bindpoppup
将无效
您的单击处理程序还应包括对取消绑定弹出窗口的调用:
radio_marker.on('click', function(e) {
changeSelection(e.target.options.title);
map.setView([e.target._latlng.lat, e.target._latlng.lng]);
var myPopup = L.popup().setContent(
"<strong>" +
e.target.options.redaktion_link +
"</strong> | " +
e.target.options.stadt
);
e.target
.unbindPopup()
.bindPopup(myPopup)
.openPopup();
});
radio\u marker.on('click',函数(e){
变更选择(如目标、选项、标题);
map.setView([e.target.\u latlng.lat,e.target.\u latlng.lng]);
var myPopup=L.popup().setContent(
“”+
e、 target.options.redaktion_链接+
“|”+
e、 target.options.statt
);
e、 目标
.unbindpoop()
.bindPopup(myPopup)
.openPopup();
});
非常感谢您快速、简单且描述良好的回答!效果非常好,我也了解了弹出窗口的工作原理!像您这样的人是我如此热爱这个社区的原因!您对我的第二个问题也有什么建议吗?当我通过搜索栏搜索标记时,我不仅希望将地图缩放到已选择标记,但也打开弹出窗口。我尝试了下面代码中所示的方法,但无效。获得: