Воздушный шар в карте страны amMap

Question

Я использую карту стран amMap и хочу, чтобы все названия стран отображались на воздушных шарах без опрокидывания или наведения на эту страну. Означает, что все шары видны на карте загрузки.

Answer 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 переопределяет, чтобы настроить положение метки для конкретной страны.