Question

我正在开发一个项目，我创建的地图显示akdatagateway跟踪的所有社区，当点击标记时，弹出窗口会打开，显示随时间变化的人口统计信息以及其他一些数据。我已经获得了所有标记，并且能够通过网站的API获得所需的数据。问题在于在弹出窗口中生成高图。我无法弄清楚如何传入或获取数组到onPopupOpen（）以进行后续的函数调用。

Reverent Functions：

  function addMarker(array){
            for (i in array){
                var communityData = array[i] 
                L.marker([array[i].latitude,array[i].longitude], {bounceOnAdd: true, bounceOnAddOptions: {duration: 250, height: 50}}).addTo(map).on('popupopen', onPopUpOpen)
                .bindPopup('<p style="font-size:130%;"><b>'+ array[i].name +'</b></p><div id="container" style="min-width: 300px; height: 200px; margin: 0 auto"></div><p><br />PCE for Electricity: ' + pcePrice + '<br />EIA for Electricity: ' + eiaPrice + '</p>').addTo(community);
            }
        }

  function getPopulationData(array){
        var id = array.id
        var years = ""
        var populations = ""
        var populationData = []

        var community_pop = $.ajax({type: "GET", url: "/api/models/population/?community=" + id  +"", async: false}).responseText
        community_pop = JSON.parse(community_pop)
        community_pop = community_pop.results
        for ( i = 0; i < community_pop.length; i++){
            years += "'" + community_pop[i].year + "',";
            populations += community_pop[i].total_population +",";
        }
        populationData[0] = years
        populationData[1] = populations
        return populationData;
    }

    function onPopUpOpen (e) {
        //some code to get the community id from popup to use the function.
        // getPopulationData()
        $('#container').highcharts({
        chart: {
            type: 'line'
        },
        title: {
          text: 'Population Over Time'
        },
        subtitle: {
          text: 'Source: AEDG'
        },
        xAxis: {
          categories: [popData[0]]
        },
        yAxis: {
          title: {
            text: 'Population'
          }
        },
        plotOptions: {
          line: {
            dataLabels: {
              enabled: false
            },
            enableMouseTracking: true
          }
        },
        series: [{
          name: '',
          data: [popData[1]]
        }]
      });
    }

我测试了Community数组元素的函数，它们确实生成了正确的数据，我无法弄清楚如何在弹出窗口中调用它们，从而生成高图。任何评论都表示赞赏！

参考信息的链接：
http://leafletjs.com/reference.html
http://www.highcharts.com/docs

Answer 1

看起来您的代码应该工作，因此如果没有完整的可重现示例，则很难进行故障排除。所以，我将提供一个有效的例子：

var popup = L.popup().setContent('<p style="font-size:130%;"><b>Some Name</b></p><div id="container" style="min-width: 300px; height: 200px; margin: 0 auto">Loading...</div>');

L.circle([51.49, -0.09], 500, {
  color: 'red',
  fillColor: '#f03',
  fillOpacity: 0.5
}).addTo(map).bindPopup(popup);


map.on('popupopen', function(e) {
  $.ajax({
      type: "GET",
      url: "data.json"
    })
    .done(function(data) {
      $('#container').highcharts({
        chart: {height: 175, width: 295},
        title: {text: ''},
        series: data
      });
    });
});

map.on('popupclose', function(e){
  $('#container').html("Loading...");
});

另外，我警告你不要拨打async: false电话。它不仅被弃用，而且还会导致糟糕的用户体验，而且这里完全没有必要。

Complete code sample is runnable here.

向Leaflet Popup添加高图

1 个答案: