灵活点标记 最后更新时间: 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(); //缩放地图到合适的视野级别 });