Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/461.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 问题:弹出式can';不能打开两次_Javascript_Popup_Leaflet - Fatal编程技术网

Javascript 问题:弹出式can';不能打开两次

Javascript 问题:弹出式can';不能打开两次,javascript,popup,leaflet,Javascript,Popup,Leaflet,我用记号笔画了一张传单地图。单击一个标记,就会打开一个弹出窗口。我添加了一个搜索栏,使标记可以搜索。选择标记名称后,地图将缩放到该标记,并将打开一个弹出窗口 我的问题是:每个弹出窗口只能打开一次,只有当选择一个标记时,缩放才起作用,弹出窗口不会打开。如果已单击,则第二次单击不会打开弹出窗口。我想这是因为函数changeSelection中有一个错误,但我无法真正理解它。你有什么建议吗 地图的主体位于。你可以用地图查看我的问题。 这是我的js代码: function myFunction() {

我用记号笔画了一张传单地图。单击一个标记,就会打开一个弹出窗口。我添加了一个搜索栏,使标记可以搜索。选择标记名称后,地图将缩放到该标记,并将打开一个弹出窗口

我的问题是:每个弹出窗口只能打开一次,只有当选择一个标记时,缩放才起作用,弹出窗口不会打开。如果已单击,则第二次单击不会打开弹出窗口。我想这是因为函数changeSelection中有一个错误,但我无法真正理解它。你有什么建议吗

地图的主体位于。你可以用地图查看我的问题。 这是我的js代码:

 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();
});

非常感谢您快速、简单且描述良好的回答!效果非常好,我也了解了弹出窗口的工作原理!像您这样的人是我如此热爱这个社区的原因!您对我的第二个问题也有什么建议吗?当我通过搜索栏搜索标记时,我不仅希望将地图缩放到已选择标记,但也打开弹出窗口。我尝试了下面代码中所示的方法,但无效。获得: