在Highmaps角度| Highmaps中无法正确显示基于lon / lat的城市名称

如何解决在Highmaps角度| Highmaps中无法正确显示基于lon / lat的城市名称

如果同时使用向下钻取和一些基于自定义经度的城市名称，我会注意到一个特殊的问题。但是，当我分别测试每个时，我能够正确获得正确的结果，因此不会出现导入包问题。问题是当我将mapData和data都用于一个系列时，下钻不起作用：

    {
      name: "USA",mapData: geoj,*****This line creates the problem
      data: data,dataLabels: {
        enabled: true,format: "{point.properties.postal-code}",allowOverlap: true,},

我的实际目标是在美国地图上添加一些自定义城市名称，如果我向下钻取到特定状态，则应保留自定义名称。

以下是CDN链接：

    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js"></script>
    <script src="https://code.highcharts.com/maps/highmaps.js"></script>
    <script src="https://code.highcharts.com/maps/modules/data.js"></script>
    <script src="https://code.highcharts.com/maps/modules/drilldown.js"></script>
    <script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/maps/modules/offline-exporting.js"></script>
    <script src="https://code.highcharts.com/mapdata/countries/us/us-all.js"></script>

这里是使用div #container在id中渲染地图的完整方法：

let data = Highcharts.geojson(Highcharts.maps["countries/us/us-all"]);
    let separators = Highcharts.geojson(
      Highcharts.maps["countries/us/us-all"],"mapline"
    );
    var geoj = Highcharts.maps["countries/us/us-all"];
    let small = $("#container").width() < 400;
    let cities = [
      {
        abbrev: "CT",capital: "Hartford",lat: 41.763325,lon: -72.674069,parentState: "Connecticut",population: 124775,z: 124775,{
        abbrev: "DE",capital: "Dover",lat: 39.158035,lon: -75.524734,parentState: "Delaware",population: 36047,z: 36047,{
        abbrev: "FL",capital: "Tallahassee",lat: 30.439775,lon: -84.280649,parentState: "Florida",population: 181376,z: 181376,{
        abbrev: "GA",capital: "Atlanta",lat: 33.748315,lon: -84.391109,parentState: "Georgia",population: 420003,z: 420003,{
        abbrev: "AL",capital: "Montgomery",lat: 32.38012,lon: -86.300629,parentState: "Alabama",population: 205764,z: 205764,];

    data.map((item,i) => {
      item["drilldown"] = item["properties"]["hc-key"];
      item["value"] = 0; // Non-random bogus data
    });

    let mapChart = Highcharts.mapChart("container",{
      chart: {
        events: {
          drilldown: function (e) {
            console.log("events e",e);
            if (!e.seriesOptions) {
              var chart = this,mapKey = "countries/us/" + e.point.drilldown + "-all",// Handle error,the timeout is cleared on success
                fail = setTimeout(function () {
                  if (!Highcharts.maps[mapKey]) {
                    chart.showLoading(
                      '<i class="icon-frown"></i> Failed loading ' +
                        e.point.name
                    );
                    fail = setTimeout(function () {
                      chart.hideLoading();
                    },1000);
                  }
                },3000);
              // Show the spinner
              chart.showLoading(
                '<i class="icon-spinner icon-spin icon-3x"></i>'
              ); // Font Awesome spinner

              // Load the drilldown map
              $.getScript(
                "https://code.highcharts.com/mapdata/" + mapKey + ".js",function () {
                  data = Highcharts.geojson(Highcharts.maps[mapKey]);

                  // Set a non-random bogus value
                  $.each(data,function (i) {
                    this.value = 0;
                  });

                  // Hide loading and add series
                  chart.hideLoading();
                  clearTimeout(fail);
                  chart.addSeriesAsDrilldown(e.point,{
                    name: e.point.name,data: data,allowPointSelect: true,dataLabels: {
                      enabled: true,format: "{point.name}",cursor: "pointer",states: {
                      select: {
                        color: "red",borderColor: "black",dashStyle: "shortdot",borderWidth: 0.5,});
                }
              );
            }

            this.setTitle(null,{ text: e.point.name });
          },drillup: function () {
            this.setTitle(null,{ text: "" });
          },title: {
        text: "Highcharts Map Drilldown",subtitle: {
        text: "",floating: true,align: "right",y: 50,style: {
          fontSize: "16px",legend: false,colorAxis: {
        min: 0,minColor: "#E6E7E8",maxColor: "#005645",mapNavigation: {
        enabled: true,buttonOptions: {
          verticalAlign: "bottom",plotOptions: {
        map: {
          states: {
            hover: {
              color: "#EEDD66",series: [
        {
          name: "USA",dataLabels: {
            enabled: true,showInLegend: true,{
          name: "Cities",type: "mappoint",marker: {
            symbol: "square",fillColor: "red",data: cities,{
          type: "mapline",data: separators,color: "silver",enableMouseTracking: false,animation: {
            duration: 500,],drilldown: {
        activeDataLabelStyle: {
          color: "#FFFFFF",textDecoration: "none",textOutline: "1px #000000",drillUpButton: {
          relativeTo: "spacingBox",position: {
            x: 0,y: 60,});

我想要这样的东西-other JS fiddle，但对我们来说，区域和数据应来自highmap集合，而无需明确定义。

谢谢， 编码愉快。