灵活点标记 最后更新时间: 2024年01月02日
本文介绍如何使用AMap.ElasticMarker插件创建灵活点标记，它可以根据地图的缩放级别来改变图标样式，从而在用户缩放地图时提供更加丰富和个性化的展示效果。
灵活点标记示例
1、添加灵活点标记
1
1.1 准备
成为开发者并创建 key
为了正常调用 API ，请先注册成为高德开放平台开发者，并申请 web 平台（JS API）的 key 和安全密钥，点击 具体操作。
提示
你在2021年12月02日以后申请的 key 需要配合你的安全密钥一起使用。
2
1.2 创建地图
var map = new AMap.Map('container', {
zoom: 10, //地图级别
center: [116.397428, 39.90923] //地图中心点
});3
1.3 创建样式列表
var stylesArray = [
{
icon: { //图标样式
img: "https://a.amap.com/jsapi_demos/static/resource/img/men3.png",
size: [16, 16], //图标的原始大小
anchor: "bottom-center", //锚点位置
fitZoom: 14, //最合适的级别 在此级别显示为图标原始大小
scaleFactor: 2, //地图放大一级的缩放比例系数
maxScale: 2, //图片的最大放大比例，随着地图放大图标会跟着放大，最大为2
minScale: 1, //图片的最小缩小比例，随着地图缩小图标会跟着缩小，最小为1
},
label: { //文本标注
content: "百花殿", //文本内容
position: "BM", //文本位置相对于图标的基准点，"BM"为底部中央
minZoom: 15, //label的最小显示级别，即文本标注在地图15级及以上，才会显示
},
},
{
icon: {
img: "https://a.amap.com/jsapi_demos/static/resource/img/tingzi.png",
size: [48, 63],
anchor: "bottom-center",
fitZoom: 17.5,
scaleFactor: 2,
maxScale: 2,
minScale: 0.125,
},
label: {
content: "万寿亭",
position: "BM",
minZoom: 15,
},
},
];提示
stylesArray数组中每个对象都代表了一个点标记的样式设置，例如第一个对象代表了"百花殿"的地标样式，第二个对象代表了"万寿亭"的地标样式。
4
1.4 创建样式列表的级别映射
var zoomStyleMapping = {
14: 0, //14-17级使用样式 0
15: 0,
16: 0,
17: 0,
18: 1, //18-20级使用样式 1
19: 1,
20: 1,
};提示
zoomStyleMapping定义了在地图相应缩放级别显示不同点标记样式，当缩放级别为14-17时，会使用样式数组的第0位样式元素（本例中的"百花殿"的地标样式），而当缩放级别为18-20时，会使用第1位样式元素（本例中的"万寿亭"的地标样式）。
5
1.5 加载灵活点标记的插件
推荐使用异步安装插件，插件引入方式 插件的使用。
AMap.plugin(["AMap.ElasticMarker"], function () {
var elasticMarker = new AMap.ElasticMarker({
position: [116.405562, 39.881166], //点标记位置
styles: stylesArray, //指定样式列表
zoomStyleMapping: zoomStyleMapping, //指定 zoom 与样式的映射
});
map.add(elasticMarker); //添加到地图上
map.setFitView(); //缩放地图到合适的视野级别
});