HTML-подсказки маркера Amcharts4 без события наведения

Ну, есть пара шагов, чтобы заставить Tooltip работать так, как вы хотите, из коробки. Во-первых, всплывающие подсказки обычно представляют собой нечто вроде синглтона, а не по одному на полигон или на mapImage, они фактически делят один на свою серию. Таким образом, каждый должен использовать свою собственную всплывающую подсказку (по большей части mapImage ниже — это imageSeries.mapImages.template):

mapImage.tooltip = new am4core.Tooltip();

Далее, условие, которое активирует всплывающую подсказку, обычно при наведении, — это наличие набора tooltipText или tooltipHTML, который не является пустой строкой.

mapImage.tooltipText = "Latitude: {latitude}\nLongitude: {longitude}";

Всплывающие подсказки, отображаемые при наведении, являются поведением по умолчанию, самый простой способ предотвратить это — отключить взаимодействие с мышью на mapImage:

mapImage.interactionsEnabled = false;

Теперь, когда маркер создан, мы просто покажем всплывающую подсказку:

mapImage.events.once("inited", function(event) {
  event.target.showTooltip();
});

По умолчанию всплывающая подсказка position уже установлена ​​на "fixed", а ее pointerOrientation на "vertical", нам просто нужно, чтобы она отображалась над маркером, который в этом примере имеет размер 32x32 px, уменьшенный на 30%, поэтому мы просто сдвинем его на 32 * вверх. 7 через свойство tooltipY mapImage:

mapImage.nonScaling = true; // this is also necessary so the size/vertical shift is predictably the same
mapImage.tooltipY = -32 * .7;

И последнее, но не менее важное: всплывающие подсказки не сохраняют свою позицию при масштабировании, поэтому нам придется делать это самостоятельно, прослушивая изменения масштаба, преобразовывая координаты широты/долготы изображения карты в координаты x/y диаграммы и передавая это в каждая подсказка:

chart.events.on("zoomlevelchanged", function() {
  imageSeries.mapImages.each(function(mapImage) {
    var point = chart.geoPointToSVG({ latitude: mapImage.latitude, longitude: mapImage.longitude });
    mapImage.tooltip.moveTo({ x: point.x, y: point.y - (32 * .7)});
  });
});

Вот демо:

https://codepen.io/team/amcharts/pen/698eb4a11c35733850fbc084631bfc21

Приложение (11 апреля 2019 г.):

Вы также можете привязать свойства широты/долготы к данным и создайте mapImages таким образом с помощью метода addData, например.

var mapImage = imageSeries.mapImages.template;
mapImage.propertyFields.latitude = "latitude";
mapImage.propertyFields.longitude = "longitude";

// You can even start off with some markers at the onset
// From our Animations along lines demo: https://www.amcharts.com/demos/animations-along-lines/
imageSeries.data = [
  { "latitude": 48.8567, "longitude": 2.3510, "name": "Paris"},
  { "latitude": 43.8163, "longitude": -79.4287, "name": "Toronto"},
  { "latitude": 34.3, "longitude": -118.15, "name": "Los Angeles"},
  { "latitude": 23, "longitude": -82, "name": "Havana"},
];

chart.seriesContainer.events.on("hit", function(ev) {
  var coords = chart.svgPointToGeo(ev.svgPoint);
  // var marker = imageSeries.mapImages.create();  
  // marker.latitude = coords.latitude;
  // marker.longitude = coords.longitude;
  imageSeries.addData({
    latitude: coords.latitude,
    longitude: coords.longitude,
  });
});

Если вы хотите удалить маркеры из начала массива data, используйте removeData метод. Если вы хотите изменить массив data с помощью Array.splice, если после этого массив не будет пустым, вам придется запустить imageSeries.invalidateData() для обновления представления. Если массив будет пустым, лучше просто установить вместо него imageSeries.data = undefined. Также имейте в виду, что у метода addData есть второй параметр, который также удаляет элементы из начала массива.

Еще одно замечание: вам придется вручную dispose всплывающие подсказки маркеров в их событии "beforedisposed".

Вот обновленная и улучшенная демонстрация, которая включает в себя некоторые исправления ошибок:

https://codepen.io/team/amcharts/pen/fee1cb6db8971ec3eff6541ad52bab6d