amMap 国家地图中的气球答案

【问题标题】：Balloon in amMap country mapamMap 国家地图中的气球
【发布时间】：2016-02-02 08:45:43
【问题描述】：

我正在使用 amMap 国家/地区地图，并希望在气球中显示所有国家/地区名称，而不会在该国家/地区悬停或悬停。表示所有气球在地图加载时可见。

【问题讨论】：

标签： amcharts ammap

【解决方案1】：

恐怕不可能显示一个以上的滚动气球，或者让它出现而不悬停在一个国家/地区是不可能的。

您可以做的是在每个国家/地区显示一个“标签”。标签是MapImage 的实例，带有文本标签，没有实际图像。

使用经度/纬度坐标为每个国家/地区放置图像/标签可能是一项非常繁琐的工作。因此，您可以使用以下示例，将区域标题自动放置在每个区域的几何中心。

http://codepen.io/amcharts/pen/5687a78507081e1c8779cf067b762de7

以上地图适用于美国，但您可以使用其中的代码处理几乎任何地图上的标签。

以下代码对此负责：

map.addListener("init", function () {
  // set up a longitude exceptions for certain areas
  var longitude = {
    "US-CA": -130,
    "US-FL": 120,
    "US-TX": 1,
    "US-LA": 40
  };

  var latitude = {
    "US-AK": -85
  };

  setTimeout(function () {
    // iterate through areas and put a label over center of each
    map.dataProvider.images = [];
    for( x in map.dataProvider.areas ) {
      var area = map.dataProvider.areas[ x ];
      area.groupId = area.id;
      var image = new AmCharts.MapImage();
      image.latitude = latitude[ area.id ] || map.getAreaCenterLatitude( area );
      image.longitude = longitude[ area.id ] || map.getAreaCenterLongitude( area );
      image.label = area.id.split('-').pop();
      image.title = area.title;
      image.linkToObject = area;
      image.groupId = area.id;
      map.dataProvider.images.push( image );
    }
    map.validateData();
    console.log(map.dataProvider);
  }, 100)
});

请注意，有时国家/州的形状不会使死点成为放置标签的完美合乎逻辑的地方。对于这些情况，请使用 longitude 和 latitude 覆盖来调整特定国家/地区的标签位置。

【讨论】：