我正在使用this示例来点击地图标记,我的目标是默认显示mapMarker.tooltipHTML
元素,而不是在它们上面悬停。欢迎使用任何替代方法,例如创建html标记。
好吧,有几个步骤让Tooltip
s以您想要的方式开箱即用。首先,工具提示通常是一个单独的东西,而不是每个多边形或每个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像素,缩小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
你也可以bind the latitude/longitude properties to data并通过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
method。如果要使用data
修改Array.splice
数组,如果之后数组不为空,则必须运行imageSeries.invalidateData()
来更新视图。如果数组是空的,最好只设置imageSeries.data = undefined
。另外请记住,addData
method有一个第二个参数,它也会从数组的开头删除项目。
另外一点,你必须在他们的dispose
事件中手动"beforedisposed"
标记工具提示。
这是一个更新和改进的演示,其中包含一些错误修复:
https://codepen.io/team/amcharts/pen/fee1cb6db8971ec3eff6541ad52bab6d