代表 Highchart 的第二個彈出窗口不適用於傳單 geojson 多邊形

Question

我有傳單多邊形地圖，我計划在其中彈出一個帶有表示多邊形信息的 Highchart 的彈出窗口。 我面臨的問題是，當我單擊多邊形時，會彈出一個帶有 Highchart 的彈出窗口，但是，如果我單擊另一個多邊形而不關閉第一個彈出窗口會導致一個空彈出窗口（但是，如果我關閉第一個彈出窗口並單擊另一個多邊形，彈出結果格式正確）。 唯一的問題是點擊另一個多邊形而不關閉第一個彈出窗口，第二個彈出窗口結果為空。 下面是 JavaScript。 任何建議表示贊賞。 提前致謝。

$.getJSON('data/Stat_data.json', function(dt) {
  var geojson,
    activeLayer;
  $(document).ready(function() {


    var map = new L.Map('map-holder', {
      center: new L.LatLng(53.3498, -7.2603),
      zoom: 6.6
    });

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      minZoom: 5,
      maxZoom: 15,
      noWrap: true,
      attribution: 'Data: CSO.ie | Tiles courtesy of <a href="http://openstreetmap.se/" target="_blank">OpenStreetMap Sweden</a> &mdash; Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
    }).addTo(map);

    $.getJSON('data/County.geojson', function(data) {

      geojson = L.geoJSON(data, {
        ////////////////////////////////
        ////  Step 1 - look of the layer
        ////////////////////////////////
        style: function(feature) {
          return {
            color: '#fff',
            weight: 1,
            // fillColor: '#FED976',
            fillOpacity: 0.6,
            fillColor: '#800026'
          }
        },
        ////////////////////////////////
        ////  Step 2 - interaction
        ////////////////////////////////
        onEachFeature: onEachFeature
      }).addTo(map);
    });

    function highlightLayer(e) {
      var layer = e.target;
      activeLayer = layer;

      layer.setStyle({
        color: '#fff',
        fillColor: '#31a354'
      });

      if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
        layer.bringToFront();
      }

    }

    function resetHighlight(e) {
      geojson.resetStyle(e.target);
    }

    function data_pre_process(data) {
      var ind = [];
      for (var i in dt) {
        if (dt[i]['Province County or City'].toLowerCase() === data.toLowerCase()) {
          ind.push(dt[i])
        }
      }
      return ind
    }


    function onEachFeature(feature, layer) {
      layer.on({
        mouseover: highlightLayer,
        mouseout: resetHighlight

      })
      // console.log(feature.properties.COUNTY.toLowerCase());
      //layer.unbindPopup()
      var div = L.popup().setContent('<div id="popupcontainer" style="min-width: 250px; height: 250px; margin: 0 z-index: 3">Loading...</div>');
      layer.bindPopup(div);

      layer.on('popupopen', function(e) {
        var pop_2011 = []
        var pop_2016 = []
        var county = e['sourceTarget']['feature']['properties']['COUNTY'].toLowerCase()
        data = data_pre_process(county)
        for (var i in data) {
          if (data[i]['Sex'] === "Both sexes") {
            pop_2011[0] = data[i]['Population 2011 (Number)'];
            pop_2016[0] = data[i]['Population 2016  (Number)'];
          } else if (data[i]['Sex'] === "Female") {
            pop_2011[1] = data[i]['Population 2011 (Number)'];
            pop_2016[1] = data[i]['Population 2016  (Number)'];
          } else {
            pop_2011[2] = data[i]['Population 2011 (Number)'];
            pop_2016[2] = data[i]['Population 2016  (Number)'];
          }
        }

        Highcharts.chart('popupcontainer', {

          chart: {
            type: 'column',
            inverted: true
          },

          title: {
            text: 'Census, Population in ' + (county[0].toUpperCase() + county.slice(1))
          },

          xAxis: {
            categories: ['2016', '2011']
          },

          yAxis: {
            allowDecimals: false,
            min: 0,
            title: {
              text: 'Population'
            }
          },

          tooltip: {
            formatter: function() {
              return '<b>' + this.x + '</b><br/>' +
                this.series.name + ': ' + this.y + '<br/>' +
                'Total: ' + this.point.stackTotal;
            }
          },

          plotOptions: {
            column: {
              stacking: 'normal'
            }
          },

          series: [{
            name: 'Female',
            data: [pop_2016[1], pop_2011[1]]
          }, {
            name: 'Male',
            data: [pop_2016[2], pop_2011[2]]
          }]
        });
      });
    };

  });
});

Answer 1

您創建多個具有相同 id 的div元素。 然后，在Highcharts.chart方法中，您使用此 id，圖表僅在第一個元素中創建。 您應該為每個元素使用單獨的id屬性。

        var div = L.popup().setContent('<div id="popupcontainer" style="min-width: 250px; height: 250px; margin: 0 z-index: 3">Loading...</div>');
        layer.bindPopup(div);