2

我正在使用 amCharts。在位置悬停并单击特定位置时，我可以突出显示该区域。

rollOverOutlineColor: "#000000",
rollOverColor: "#62B4EB",
selectedColor: "#0078c8",

但是点击下一个位置，当前位置会突出显示，旧位置会松动。我想显示所有选定/单击的位置以特定颜色突出显示。

map = new AmCharts.AmMap();
map.areasSettings = {
    autoZoom: false,
    rollOverOutlineColor: "#000000",
    rollOverColor: "#62B4EB",
    selectedColor: "#0078c8",
    color: "#999999",
    selectable:true
};

map.pathToImages = '/images/';

map.dataProvider = data;

在此处输入图像描述

请建议。

4

1 回答 1

1

您的解决方案以使用区域showAsSelected属性的形式出现。

当点击事件（clickMapObject）发生时，您可以设置showAsSelected点击区域的属性使其保持选中状态。

map.addListener("clickMapObject", function(event) {
  event.mapObject.showAsSelected = true;
});

请注意，这showAsSelected是在一些后来的 3.x 版本中引入的。（很抱歉，我不太记得是哪一个）如果您使用的是旧版本的 JavaScript Maps，它可能无法正常工作。

这是当前版本的工作演示：

var map;
var data = {
  "map": "worldLow",
  "getAreasFromMap": true
};

map = new AmCharts.AmMap();
map.areasSettings = {
  autoZoom: false,
  rollOverOutlineColor: "#000000",
  rollOverColor: "#62B4EB",
  selectedColor: "#0078c8",
  color: "#999999",
  selectable: true
};

map.pathToImages = '/images/';

map.dataProvider = data;

map.addListener("clickMapObject", function(event) {
  event.mapObject.showAsSelected = true;
});

map.write("chartdiv");
<script src="http://www.amcharts.com/lib/3/ammap.js"></script>
<script src="http://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
<div id="chartdiv" style="width: 100%; height: 400px;"></div>

更新：如果您想使用它们的groupId参数切换整个国家组，可以这样做：

map.addListener("clickMapObject", function(event) {
  if (event.mapObject.groupId !== undefined) {
    for(var i = 0; i < map.dataProvider.areas.length; i++) {
      var area = map.dataProvider.areas[i];
      if (area.groupId == event.mapObject.groupId) {
        area.showAsSelected = true;
      }
    }
    map.validateData();
  }
  else {
    event.mapObject.showAsSelected = true;
  }
});
于 2015-11-18T08:03:00.073 回答