HTML-маркеры Amcharts4 без всплывающих подсказок - PullRequest
Новая
       14

HTML-маркеры Amcharts4 без всплывающих подсказок

3 голосов
/ 30 марта 2019

Я использую этот пример, чтобы поставить маркеры на карте, и моя цель - отображать mapMarker.tooltipHTML элементы по умолчанию, без наведения на них курсора.Любые альтернативы, такие как создание HTML-маркеров с, приветствуются.

1 Ответ

2 голосов
/ 03 апреля 2019

Ну, есть пара шагов, чтобы заставить 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 через mapImageСвойство tooltipY: 

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

Приложение (2019-04-11):

Вы также можете привязать свойства широты / долготы к данным и создайте 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 имеет 2-й параметр, который также удаляет элементы из начала массива.

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

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

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

...