小册子鼠标悬停弹出数组列表

时间:2017-04-20 08:45:00

标签: javascript jquery html css leaflet

我想在鼠标悬停时显示弹出窗口,我想在弹出窗口中显示名称,将从数组列表中选择,我在不同的latlon上放置多个标记在地图上,现在我想显示一个弹出窗口(其中包含name)对于特定的latlon,这是我的代码,我想在鼠标悬停时显示我的区域名称,现在我在鼠标悬停上获取弹出文本,但我不知道如何在popupcontent中调用我的数组列表,任何我可以建议我应该做什么?

var planes = [
        ["Jodhpur",26.28, 73.02],
        ["Bikaner",28.0229,73.3119],
        ["Churu",28.3254,74.4057],
        ["Ganga Nagar",29.9038,73.8772],
        ["Hanumangarh",29.1547,74.4995],
        ["Jaisalmer", 26.9157,70.9083],
        ["Jalore",25.1257,72.1416],
        ["Jhunjhunu",28.1289,75.3995],
        ["Nagaur",27.1854,74.0300],
        ["Pali",25.7711, 73.3234],
        ["Sikar",27.6094,75.1399],
        ["Sirohi",24.7467,72.8043],
        ["Barmer",25.7532,71.4181],

        ];
        for (var i = 0; i < planes.length; i++) {
            marker = new L.marker([planes[i][1],planes[i][2]],{icon: myIcon}).addTo(map).bindPopup('<div id="chart" class="chart"></div>');
  marker.on('click', onMarkerClick, this);

  /*var currentMarker = planes[i][0];
    currentMarker.on('mouseover', currentMarker.openPopup.bind(currentMarker));
    */

  marker.on('mouseover', function(e) {
  //open popup;
  var popup = L.popup()
   .setLatLng(e.latlng) 
   .setContent('Popup')
   .openOn(map);
});


    }

2 个答案:

答案 0 :(得分:0)

过滤数组以根据lat和/或lng返回名称

 marker.on('mouseover', function(e) {
    var name = "";
    $.each(planes,function(i,v){
       if (v.indexOf(e.latlng[0]) > 0) {//test if the lat is in the array
          name = v[0];//get the name
       }
    })

    var popup = L.popup()
       .setLatLng(e.latlng) 
       .setContent('District: '+name)
       .openOn(map);
 })

注意:我假设e.latlng是[lat,lng]

的数组

答案 1 :(得分:0)

您必须根据标记名称更改marker1名称。

var marker1 = L.marker(23.0225, 72.5714).addTo(mymap)
    .bindPopup("Demo Content of Popup");

let isClicked = false

marker1.on({
    mouseover: function() {
        if(!isClicked) {
            this.openPopup()
        }
    },
    mouseout: function() { 
        if(!isClicked) {
            this.closePopup()
        }
    },
    click: function() {
        isClicked = true
        this.openPopup()
    }
})

mymap.on ({
    click: function() {
        isClicked = false
    },
    popupclose: function () {
        isClicked = false
    }
})