Javascript 如何在高图表地图的选定区域添加图标？

我正在使用Highcharts在我的应用程序中显示地图

我想要两个功能：

1） 当我点击任何区域时，需要用红色{done}突出显示该区域

2） 当我点击任何区域时，就会有一个标记图标被填充到它上面{未完成：（}

下面是我为click事件编写的代码

plotOptions: {
  series: {
      turboThreshold:3000,
      cursor: 'pointer',
      point: {
          events: {
              click: function(e){
                    e.point.series.data[e.point.index].update({
    color: 'red'
  })
              }
          }
      }
  }
 }

这里我有两个bug：

1） 当我点击一个状态时，它会高亮显示，但当我选择另一个状态时，上一个颜色仍然保留，需要返回到上一个颜色

2） 希望在选定状态上有一个图标

---

这里有谁能帮我解决这两个问题，我是海图新手。请帮助我。谢谢。

您应该启用

allowPointSelect

选项并在

状态下设置颜色，而不是更新点。选择.color

要在选定点上添加一些图标，可以使用自定义标记符号创建

mappoint

系列，并在

select

事件函数回调中从第一个系列更新其数据

series: [{
  allowPointSelect: true,
  states: {
    select: {
      color: 'red'
    }
  },
  point: {
    events: {
      select: function() {
        this.series.chart.series[1].setData([{
          x: this._midX,
          y: this._midY
        }]);
      }
    }
  },
  data: data,
  keys: ['code_hasc', 'value'],
  joinBy: 'code_hasc'
}, {
  enableMouseTracking: false,
  colorAxis: false,
  type: 'mappoint',
  marker: {
    symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
  },
  states: {
    inactive: {
      opacity: 1
    }
  }
}]

---

现场演示：

API参考：

---

您应该启用

allowPointSelect

选项并在

状态中设置颜色，而不是更新点。选择.color

要在选定点上添加一些图标，可以使用自定义标记符号创建

mappoint

系列，并在

select

事件函数回调中从第一个系列更新其数据

series: [{
  allowPointSelect: true,
  states: {
    select: {
      color: 'red'
    }
  },
  point: {
    events: {
      select: function() {
        this.series.chart.series[1].setData([{
          x: this._midX,
          y: this._midY
        }]);
      }
    }
  },
  data: data,
  keys: ['code_hasc', 'value'],
  joinBy: 'code_hasc'
}, {
  enableMouseTracking: false,
  colorAxis: false,
  type: 'mappoint',
  marker: {
    symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
  },
  states: {
    inactive: {
      opacity: 1
    }
  }
}]

---

现场演示：

API参考：