开发 地图 JS API 2.0 进阶教程 点标记 灵活点标记

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

2、本章涉及的属性及方法说明

2.1 AMap.ElasticMarker

参数/方法

说明

类型 

position

点标记在地图上显示的位置

经纬度对象或经纬度构成的一维数组。例如:

AMap.LngLat(116.39,39.9)[116.39, 39.9]

styles

多个不同样式的数组

Array

icon

灵活标注图标样式类型

ElasticIcon

img

图标的 url

String

size

图标的原始大小

Vector

anchor

图标原始大小下锚点所处的位置

String

fitZoom

最合适的级别,在此级别下显示为原始大小

Number

scaleFactor

地图放大一级的缩放比例系数

Number

maxScale

最大放大比例

Number

minScale

最小放大比例

Number

label

灵活标注文本样式类型

ElasticLabel

content

文本内容

String

position

文本位置相对于图标的基准点,可选值:BL、BM、BR、ML、MR、TL、TM、TR 分别代表左下角、底部中央、右下角、左侧中央、右侧中央、左上角、顶部中央、右上角

String

minZoom

label 的最小显示级别

String

zoomStyleMapping

zoom 与样式的映射

Object

返回顶部 示例中心 常见问题 智能客服 公众号
二维码