以下是一个使用amcharts4库创建动态位置标记的代码示例:
// 引入amcharts4库
import * as am4core from "@amcharts/amcharts4/core";
import * as am4maps from "@amcharts/amcharts4/maps";
import * as am4plugins from "@amcharts/amcharts4/plugins";
import am4geodata_worldLow from "@amcharts/amcharts4-geodata/worldLow";
// 创建地图实例
let chart = am4core.create("chartdiv", am4maps.MapChart);
// 设置地图数据源
chart.geodata = am4geodata_worldLow;
// 设置投影方式
chart.projection = new am4maps.projections.Miller();
// 创建地图系列
let polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());
// 设置多边形样式
let polygonTemplate = polygonSeries.mapPolygons.template;
polygonTemplate.fill = am4core.color("#74B266");
polygonTemplate.stroke = am4core.color("#ffffff");
polygonTemplate.strokeOpacity = 0.5;
polygonTemplate.tooltipText = "{name}";
// 创建标记系列
let imageSeries = chart.series.push(new am4maps.MapImageSeries());
// 创建标记模板
let imageTemplate = imageSeries.mapImages.template;
let marker = imageTemplate.createChild(am4plugins.Marker);
marker.scale = 0.6;
marker.fill = am4core.color("#DB4C3C");
marker.tooltipText = "{title}";
// 添加标记数据
imageSeries.data = [{
"latitude": 48.8567,
"longitude": 2.3510,
"title": "Paris"
}, {
"latitude": 51.5074,
"longitude": -0.1278,
"title": "London"
}, {
"latitude": 40.7128,
"longitude": -74.0060,
"title": "New York"
}];
// 设置标记位置
imageTemplate.propertyFields.latitude = "latitude";
imageTemplate.propertyFields.longitude = "longitude";
// 创建缩放控件
chart.zoomControl = new am4maps.ZoomControl();
// 设置地图初始缩放级别
chart.homeZoomLevel = 2.5;
// 设置地图初始中心位置
chart.homeGeoPoint = {
latitude: 35,
longitude: 0
};
在上面的代码示例中,我们首先引入了amcharts4库,并创建了一个地图实例。然后,我们设置了地图的数据源和投影方式。
接下来,我们创建了地图的多边形系列,用于显示地图的多边形区域。我们设置了多边形的填充色、边框颜色和提示文本。
然后,我们创建了地图的标记系列,并设置了标记的样式和提示文本。我们还添加了一些标记的数据,包括经纬度和标题。
最后,我们创建了一个缩放控件,并设置了地图的初始缩放级别和中心位置。
在HTML中,我们需要添加一个具有"id"属性为"chartdiv"的div元素,用于显示地图。
通过运行上述代码,您将得到一个具有动态位置标记的地图。您可以根据自己的需求修改标记的样式和位置。