经纬度、像素、边界、大小、这些是地图 JSAPI 开发必须了解的基本类型
经纬度坐标,用来描述地图上的一个点位置, 目前高德地图使用的是 GCJ-02 坐标,如果你采集的是 WGS84 坐标,请先进行坐标转换
(number)
经度值
(number)
纬度值
(boolean)
是否自动将经度值修正到
[-180,180]
区间内,缺省为false;
noWrap 为false时传入
[190,30]
,会被自动修正为
[-170,30]
,
noWrap 为true时不会自动修正,可以用来进行跨日期限的覆盖物绘制
var lnglat = new AMap.LngLat(116, 39);
设置经度值
(number)
经度
设置纬度值
(number)
获取经度值
number
:
获取纬度值
number
:
LngLat对象以字符串的形式返回
string
:
格式如'lng值,lat值'的字符串
LngLat对象以字符串的形式返回
string
:
格式如'lng值,lat值'的字符串
地物对象的经纬度矩形范围。
像素坐标,确定地图上的一个像素点。
地物对象的像素尺寸
地图 JSAPI 具有完备的事件体系,在 2.0 版本中所有类型的实例均使用 on/off 方法进行时间的绑定和移除
JSAPI 的所有类型(地图、图层、覆盖物等)都实现了事件接口,用于给当前实例对象绑定、移除、清理事件回调
// 声明点击事件的回调函数
function onClick(e){
console.log(e);
}
// 给地图实例绑定点击事件 onClick
map.on('click', onClick);
// 移除地图实例的 onClick 事件绑定
map.off('click', onClick);
// 清除地图实例上的所有 click 事件绑定
map.clearEvents('click');
地图对象类,封装了地图的属性设置、图层变更、事件交互等接口的类。 相关示例
((String | HTMLDivElement))
构造一个地图对象,参数container中传入地图容器DIV的ID值或者DIV对象,
opts地图初始化参数对象,参数详情参看MapOptions列表。注意:地图容器在创建之前必须拥有实际大小,否则可能出现底图无法渲染的问题。
(MapOptions)
地图初始化参数
Name | Description |
---|---|
opts.center ([Number, Number] | LngLat)
|
初始中心经纬度 |
opts.zoom Number
|
地图显示的缩放级别,可以设置为浮点数;若center与level未赋值,地图初始化默认显示用户所在城市范围。 |
opts.rotation Number
(default 0 )
|
地图顺时针旋转角度,取值范围 [0-360] ,默认值:0 |
opts.pitch Number
(default 0 )
|
俯仰角度,默认 0,最大值根据地图当前 zoom 级别不断增大,2D地图下无效 。 |
opts.viewMode String
(default '2D' )
|
地图视图模式, 默认为‘2D’,可选’3D’,选择‘3D’会显示 3D 地图效果。 |
opts.features Array<String>
(default ['bg','point','road','building'] )
|
设置地图上显示的元素种类, 支持'bg'(地图背景)、'point'(POI点)、'road'(道路)、'building'(建筑物) |
opts.layers Array<Layer>
|
地图图层数组,数组可以是图层 中的一个或多个,默认为普通二维地图。 当叠加多个 图层 时,普通二维地图需通过实例化一个TileLayer类实现。 如果你希望创建一个默认底图图层,使用 AMap.createDefaultLayer() |
opts.zooms [Number, Number]
(default [2,20] )
|
地图显示的缩放级别范围, 默认为 [2, 20] ,取值范围 [2 ~ 20] |
opts.dragEnable Boolean
(default true )
|
地图是否可通过鼠标拖拽平移, 默认为 true。此属性可被 setStatus/getStatus 方法控制 |
opts.zoomEnable Boolean
(default true )
|
地图是否可缩放,默认值为 true。此属性可被 setStatus/getStatus 方法控制 |
opts.jogEnable Boolean
(default true )
|
地图是否使用缓动效果,默认值为true。此属性可被setStatus/getStatus 方法控制 |
opts.pitchEnable Boolean
(default true )
|
是否允许设置俯仰角度, 3D 视图下为 true, 2D 视图下无效。 |
opts.rotateEnable Boolean
(default true )
|
地图是否可旋转, 图默认为true |
opts.animateEnable Boolean
(default true )
|
地图平移过程中是否使用动画(如调用panBy、panTo、setCenter、setZoomAndCenter等函数, 将对地图产生平移操作, 是否使用动画平移的效果), 默认为true, 即使用动画 |
opts.keyboardEnable Boolean
(default true )
|
地图是否可通过键盘控制, 默认为true, 方向键控制地图平移,"+"和"-"可以控制地图的缩放, Ctrl+“→”顺时针旋转,Ctrl+“←”逆时针旋转。此属性可被setStatus/getStatus 方法控制 |
opts.doubleClickZoom Boolean
(default true )
|
地图是否可通过双击鼠标放大地图, 默认为true。此属性可被setStatus/getStatus 方法控制 |
opts.scrollWheel Boolean
(default true )
|
地图是否可通过鼠标滚轮缩放浏览,默认为true。此属性可被setStatus/getStatus 方法控制 |
opts.touchZoom Boolean
(default true )
|
地图在移动终端上是否可通过多点触控缩放浏览地图,默认为true。关闭手势缩放地图,请设置为false。 |
opts.touchZoomCenter Boolean
(default 1 )
|
可缺省,当touchZoomCenter=1的时候,手机端双指缩放的以地图中心为中心,否则默认以双指中间点为中心。 |
opts.showLabel Boolean
(default true )
|
是否展示地图文字和 POI 信息。 |
opts.defaultCursor String
|
地图默认鼠标样式。参数 defaultCursor 应符合 CSS 的 cursor 属性规范。 |
opts.isHotspot Boolean
|
是否开启地图热点和标注的 hover 效果。PC端默认是true, 移动端默认是 false。 |
opts.mapStyle String
|
设置地图的显示样式,目前支持两种地图样式: 第一种:自定义地图样式,如 "amap://styles/d6bf8c1d69cea9f5c696185ad4ac4c86" 可前往地图自定义平台定制自己的个性地图样式; 第二种:官方样式模版,如"amap://styles/grey"。 其他模版样式及自定义地图的使用说明见开发指南 |
opts.wallColor (String | Array<Number>)
|
地图楼块的侧面颜色 |
opts.roofColor (String | Array<Number>)
|
地图楼块的顶面颜色 |
opts.showBuildingBlock Boolean
(default true )
|
是否展示地图 3D 楼块,默认 true |
opts.showIndoorMap Boolean
(default false )
|
是否自动展示室内地图,默认是 false |
opts.skyColor (String | Array<Number>)
|
天空颜色,3D 模式下带有俯仰角时会显示 |
opts.mask Array<Number>
|
为 Map 实例指定掩模的路径,各图层将只显示路径范围内图像,3D视图下有效。 格式为一个经纬度的一维、二维或三维数组。 相关示例 一维数组时代表一个普通多边形路径,如: [lng1,lat1] , [lng2,lat2] , [lng3,lat3] ] 二维数组时代表一个带洞的多边形路径,如: [ [lng4,lat4] , [lng5,lat5] , [lng6,lat6] ], [ [lng7,lat7] , [lng8,lat8] , [lng9,lat9] ] ] 三维数组时代表多个多边形路径,如: [ [ [lng1,lat1] , [lng2,lat2] , [lng3,lat3] ], // 一个普通多边形 [ //一个带洞多边形 [ [lng4,lat4] , [lng5,lat5] , [lng6,lat6] ], [ [lng7,lat7] , [lng8,lat8] , [lng9,lat9] ] ] ] |
var map = new AMap.Map('map', {
viewMode: '3D',
center: [116.397083, 39.874531],
layers: [AMap.createDefaultLayer()], // layers 字段为空或者不赋值将会自动创建默认底图。
zoom: 12,
})
地图放大一级显示
地图缩小一级显示
获取地图当前俯仰角
Number
:
角度
返回地图对象的容器
HTMLElement
:
地图 DOM 容器
获取地图顺时针旋转角度, 范围: [0 ~ 360]
Number
:
旋转角度值
获取地图容器尺寸,单位:像素
Size
:
地图容器尺寸
添加图层到地图上
(Layer)
地图图层对象
从地图上移除图层
(Layer)
地图图层
将多个图层一次替代地图上原有图层,会移除地图原有图层
(Array<Layer>)
地图图层数组
获取地图图层数组,数组为一个或多个图层
Array<Layer>
:
地图图层数组
获取当前地图状态信息,包括是否可鼠标拖拽移动地图、地图是否可缩放、地图是否可旋转(rotateEnable)、 是否可双击放大地图、是否可以通过键盘控制地图旋转(keyboardEnable)等
object
:
地图状态信息映射集合
添加覆盖物/图层。参数为单个覆盖物/图层,或覆盖物/图层的数组。
((VectorOverlay | Array<any>))
覆盖物对象或者数组
获取地图默认鼠标指针样式
string
:
地图鼠标指针样式
设置地图默认鼠标指针样式
(string)
设置鼠标指针默认样式,参数cursor应符合CSS的cursor属性规范。可为CSS标注中的光标样式,
如:setCursor(“pointer”)等;或者自定义的光标样式,
如:setCursor("url('
https://lbs.amap.com/webapi/static/Images//0.png'
),pointer")
删除覆盖物/图层。参数为单个覆盖物/图层,或覆盖物/图层的数组。
((Array<any> | VectorOverlay))
覆盖物对象或者数组
注销地图对象,并清空地图容器
获取Map的限制区域
设置 Map 的限制区域,设定区域限制后,传入参数为限制的 Bounds。地图仅在区域内可拖拽 相关示例
清除 Map 的限制区域
获取指定位置的地图分辨率,单位:米/像素。 参数point有指定值时,返回指定点地图分辨率,point缺省时,默认返回当前地图中心点位置的分辨率
Number
:
分辨率
根据地图上添加的覆盖物分布情况,自动缩放地图到合适的视野级别,参数均可缺省。 overlayList为覆盖物数组,缺省时为当前地图上添加的所有覆盖物图层, immediately代表是否需要动画过程,avoid代表上下左右的像素避让宽度,maxZoom代表fitView之后的最大级 相关示例
(Array<Overlay>)
覆盖物
(Boolean
= false
)
是否立即过渡
(Number
= CoreMap.defaultZooms[1]
)
最大 zoom 级别
Bounds
:
bounds 新的地图视口范围
var map = new AMap.Map({
zoom: 10,
});
var marker = new AMap.Marker({
map: map,
position: [112, 30],
icon: "https://webapi.amap.com/images/car.png",
offset: new AMap.Pixel(-26, -13),
});
var marker1 = new AMap.Marker({
map: map,
position: [110, 31],
icon: "https://webapi.amap.com/images/car.png",
offset: new AMap.Pixel(-26, -13),
});
map.setFitView(
[marker, marker1], // 覆盖物数组
false, // 动画过渡到制定位置
[60, 60, 60, 60], // 周围边距,上、下、左、右
10, // 最大 zoom 级别
);
获取地图显示样式
删除地图上所有的覆盖物
清除地图上的信息窗体。
鼠标在地图上移动时触发
地图缩放级别更改后触发
地图平移时触发事件
鼠标滚轮开始缩放地图时触发
缩放开始时触发
鼠标移入地图容器内时触发
鼠标移出地图容器时触发
鼠标左键双击事件
鼠标左键单击事件
缩放结束时触发
地图移动结束后触发,包括平移,以及中心点变化的缩放。如地图有拖拽缓动效果,则在缓动结束后触发
鼠标在地图上单击抬起时触发
鼠标在地图上单击按下时触发
鼠标右键单击事件
地图平移开始时触发
开始拖拽地图时触发
拖拽地图过程中触发
停止拖拽地图时触发。如地图有拖拽缓动效果,则在拽停止,缓动开始前触发
鼠标移出热点时触发
鼠标滑过热点时触发
触摸开始时触发事件,仅适用移动设备
地图资源加载完成后触发事件
鼠标点击热点时触发
拖拽地图过程中触发,仅适用移动设备
触摸结束时触发事件,仅适用移动设备
地图容器尺寸改变事件
此对象用于表示地图、覆盖物、叠加层上的各种鼠标事件返回,包含以下字段:
Type: Object
由高德官方提供数据或图像的地图图层
切片图层类,该类为基础类。 相关示例
(TileLayerOptions)
Name | Description |
---|---|
opts.tileUrl String
|
切片取图地址 如:' https://abc{0,1,2,3}.amap.com/tile?x=[x]&y=[y]&z=[z] ' [x] 、 [y] 、 [z] 分别替代切片的xyz。 |
opts.zooms [Number, Number]
(default [2,20] )
|
支持的缩放级别范围,默认范围 [2-20] |
opts.dataZooms [Number, Number]
(default [2,20] )
|
数据支持的缩放级别范围,默认范围 [2-20] |
opts.opacity Number
(default 1 )
|
透明度,默认 1 |
opts.visible Boolean
(default true )
|
是否显示,默认 true |
opts.zIndex Number
(default 4 )
|
图层叠加的顺序值,1 表示最底层。默认 zIndex:4 |
opts.tileSize Number
(default 256 )
|
切片大小,取值: 256,表示切片大小为256 256, 128,表示切片大小为128 128, 64,表示切片大小为64*64。默认值为256 |
设置图层的取图地址
(String)
瓦片图地址
获取图层透明度
Number
:
opacity 图层透明度
重新加载图层资源,重新渲染
获取图层层级
Number
:
zIndex 图层层级
设置图层隐藏
设置图层层级,数字越大图层层级越高
(Number)
图层层级值
获取图层参数信息
Object
:
图层参数信息
设置图层透明度,范围 [0 ~ 1]
(Number)
图层透明度
设置图层可见
图块切片加载完成事件
实时交通图层类,继承自TileLayer。 相关示例
(TrafficLayerOptions)
Name | Description |
---|---|
opts.autoRefresh Boolean
|
是否自动更新数据,默认开启 |
opts.interval Number
|
自动更新数据的间隔毫秒数,默认 180ms |
opts.zooms [Number, Number]
(default [2,20] )
|
支持的缩放级别范围,默认范围 [2-20] |
opts.opacity Number
(default 1 )
|
透明度,默认 1 |
opts.visible Boolean
(default true )
|
是否显示,默认 true |
opts.zIndex Number
(default 4 )
|
图层叠加的顺序值,1 表示最底层。默认 zIndex:4 |
opts.tileSize Number
(default 256 )
|
切片大小,取值: 256,表示切片大小为256 256, 128,表示切片大小为128 128, 64,表示切片大小为64*64。默认值为256 |
停止自动更新数据
设置图层可见
获取图层层级
Number
:
zIndex 图层层级
设置图层隐藏
获取图层参数信息
Object
:
图层参数信息
设置图层透明度,范围 [0 ~ 1]
(Number)
图层透明度
获取图层透明度
Number
:
opacity 图层透明度
设置图层层级,数字越大图层层级越高
(Number)
图层层级值
图块切片加载完成事件
卫星图层类,继承自 TileLayer。 相关示例
(SatelliteLayerOptions)
Name | Description |
---|---|
opts.zooms [Number, Number]
(default [2,20] )
|
支持的缩放级别范围,默认范围 [2-20] |
opts.opacity Number
(default 1 )
|
透明度,默认 1 |
opts.visible Boolean
(default true )
|
是否显示,默认 true |
opts.zIndex Number
(default 4 )
|
图层叠加的顺序值,1 表示最底层。默认 zIndex:4 |
opts.tileSize Number
(default 256 )
|
切片大小,取值: 256,表示切片大小为256 256, 128,表示切片大小为128 128, 64,表示切片大小为64*64。默认值为256 |
获取图层层级
Number
:
zIndex 图层层级
销毁图层
获取图层参数信息
Object
:
图层参数信息
设置图层隐藏
设置图层层级,数字越大图层层级越高
(Number)
图层层级值
设置图层可见
获取图层透明度
Number
:
opacity 图层透明度
设置图层透明度,范围 [0 ~ 1]
(Number)
图层透明度
图块切片加载完成事件
路网图层,展示道路信息 相关示例
(RoadnetLayerOptions)
Name | Description |
---|---|
opts.zooms [Number, Number]
(default [2,20] )
|
支持的缩放级别范围,默认范围 [2-20] |
opts.opacity Number
(default 1 )
|
透明度,默认 1 |
opts.visible Boolean
(default true )
|
是否显示,默认 true |
opts.zIndex Number
(default 4 )
|
图层叠加的顺序值,1 表示最底层。默认 zIndex:4 |
opts.tileSize Number
(default 256 )
|
切片大小,取值: 256,表示切片大小为256 256, 128,表示切片大小为128 128, 64,表示切片大小为64*64。默认值为256 |
设置图层可见
设置图层隐藏
设置图层层级,数字越大图层层级越高
(Number)
图层层级值
获取图层透明度
Number
:
opacity 图层透明度
获取图层层级
Number
:
zIndex 图层层级
获取图层参数信息
Object
:
图层参数信息
设置图层透明度,范围 [0 ~ 1]
(Number)
图层透明度
销毁图层
图块切片加载完成事件
建筑楼块 3D 图层 相关示例
(BuildingLayerOpts)
Name | Description |
---|---|
opts.wallColor (Array<String> | String)
|
楼块侧面颜色,支持 rgba、rgb、十六进制等 |
opts.roofColor (Array<String> | String)
|
楼块顶面颜色,支持 rgba、rgb、十六进制等 |
opts.heightFactor Number
|
楼块的高度系数因子,默认为 1,也就是正常高度 |
opts.BuildingStyleOptions BuildingStyleOptions
|
楼块的围栏和样式设置 |
opts.zooms [Number, Number]
(default [2,20] )
|
图层缩放等级范围,默认 [2, 20] |
opts.opacity Number
(default 1 )
|
图层透明度,默认为 1 |
opts.visible Boolean
(default true )
|
图层是否可见,默认为 true |
opts.zIndex Number
(default 11 )
|
图层的层级,默认为 11 |
(BuildingStyleOptions)
setStyle 方法使用的参数
Name | Description |
---|---|
styleOpts.hideWithoutStyle Boolean
|
是否隐藏围栏之外的楼块 |
styleOpts.areas Array<Area>
|
围栏信息数组 |
styleOpts.areas.rejectTexture Boolean
|
是否隐藏围栏之外的楼块 |
styleOpts.areas.visible Boolean
|
围栏信息数组 |
styleOpts.areas.path Array<Number>
|
围栏经纬度列表 |
styleOpts.areas.color1 (Array<String> | String)
|
围栏区域内楼块顶面颜色,支持 rgba、rgb、十六进制等 |
styleOpts.areas.color2 (Array<String> | String)
|
围栏区域内楼块侧面颜色,支持 rgba、rgb、十六进制等 |
styleOpts.areas Area
|
var buildingLayer = new AMap.Buildings({
heightFactor: 1,
wallColor: [255, 0, 0, 1],
roofColor: 'rgba(0,0,255,0.5)',
});
map.addLayer(buildingLayer);
设置楼块图层样式 相关示例
(BuildingStyleOptions)
样式
var options = {
hideWithoutStyle:false,//是否隐藏设定区域外的楼块
areas:[{ //围栏1
//visible:false,//是否可见
rejectTexture:true,//是否屏蔽自定义地图的纹理
color1: 'ffffff00',//楼顶颜色
color2: 'ffffcc00',//楼面颜色
path: [[116.473606,39.995997],[116.473005,39.995482],[116.474179,39.996516],[116.473606,39.995997]]
}, { //围栏2
color1: 'ff99ff00',
color2: 'ff999900',
path: [[116.474609,39.993478],[116.474489,39.993495],[116.47469,39.99348],[116.474609,39.993478]]
}]
};
buildingLayer.setStyle(options); //此配色优先级高于自定义mapStyle
设置图层隐藏
设置图层可见
销毁图层
设置图层层级,数字越大图层层级越高
(Number)
图层层级值
获取图层层级
Number
:
zIndex 图层层级
获取图层参数信息
object
:
图层参数信息
获取图层透明度
Number
:
opacity 图层透明度
设置图层透明度,范围 [0 ~ 1]
(Number)
图层透明度
为了满足基于行政区块的数据可视化、行政区边界展示等开发需求,我们通过AMap.DistrictLayer插件提供了一组简易行政区图层,包括: 世界简易行政区图层 AMap.DistrictLayer.World 相关示例 国家简易行政区图层 AMap.DistrictLayer.Country 相关示例 省市简易行政区图层 AMap.DistrictLayer.Province 相关示例
(DistrictLayerOptions)
图层初始化参数
Name | Description |
---|---|
opts.adcode String
|
行政区的编码 adcode与省市行政区对照表 |
opts.SOC String
(default 'CHN' )
|
设定显示的国家 SOC 国家代码、名称、Bounds对照表下载 |
opts.depth Number
(default 0 )
|
设定数据的层级深度,depth为0的时候只显示国家面,depth为1的时候显示省级, 当国家为中国时设置depth为2的可以显示市一级 |
opts.zIndex Number
(default 80 )
|
图层的层级,默认为 80 |
opts.opacity Number
(default 1 )
|
图层透明度,默认为 1 |
opts.visible Boolean
(default true )
|
图层是否可见,默认为 true |
opts.zooms [number, number]
(default [2,20] )
|
图层缩放等级范围,默认 [2, 20] |
opts.styles DistrictLayerStyle
|
为简易行政区图设定各面的填充颜色和描边颜色。 styles各字段的值可以是颜色值,也可以是一个返回颜色值* 的回调函数function。支持的颜色格式有: 1. #RRGGBB,如:'#FFFFFF' 2. rgba(),如:'rgba(255,255,255,1)' 3. rgb(),如:'rgb(255,255,255)' 4. [r,g,b,a] ,如: [1,1,1,1] 5. '',代表不赋予颜色 |
opts.styles.stroke-width Number
(default 1 )
|
描边线宽 |
opts.styles.coastline-stroke (Array<String> | String | Function)
(default [0.18,0.63,0.94,1] )
|
海岸线颜色 |
opts.styles.nation-stroke (Array<String> | String | Function)
(default [0.35,0.35,0.35,1] )
|
国境线颜色 |
opts.styles.province-stroke (Array<String> | String | Function)
(default [0.5,0.5,0.5,1] )
|
省界颜色 |
opts.styles.city-stroke (Array<String> | String | Function)
(default [0.7,0.7,0.7,1] )
|
城市界颜色 |
opts.styles.county-stroke (Array<String> | String | Function)
(default [0.85,0.85,0.85,1] )
|
区/县界颜色 |
opts.styles.fill (Array<String> | String | Function)
(default [1,1,1,1] )
|
填充色 |
设定显示的国家 SOC
(String)
SOC
获取 adcodes
any
:
adcodes
设置样式信息
(DistrictLayerStyle)
样式信息
获取样式信息
DistrictLayerStyle
:
样式
获取图层参数信息
object
:
图层参数信息
获取图层透明度
Number
:
opacity 图层透明度
获取图层层级
Number
:
zIndex 图层层级
设置图层透明度,范围 [0 ~ 1]
(Number)
图层透明度
设置图层隐藏
设置图层可见
设置图层层级,数字越大图层层级越高
(Number)
图层层级值
室内图层,用于在适当级别展示室内地图,并提供显示商铺tip、切换楼层等功能。
用法一:创建独立的室内图层
var indoorMap = new AMap.IndoorMap({
zIndex: 1000, // 设置室内图层叠加顺序
opacity: 1, // 设置室内图层透明度
});
var map = new AMap.Map('mapDiv', {
showIndoorMap: false, //隐藏地图默认的室内地图图层
layers: [indoorMap, AMap.createDefaultLayer()] // 添加室内等图层
});
indoorMap.showIndoorMap('B0FFFAB6J2'); // 显示指定 POI 室内信息
用法二:调用默认室内图层
var map = new AMap.Map('mapDiv',{
showIndoorMap: true, //显示地图默认的室内地图图层
});
map.on('indoor_create',function(){
map.indoorMap.showIndoorMap('B000A8VT15',4); // 显示指定 POI 室内信息
})
显示指定的楼层
(number)
楼层
显示室内地图
隐藏室内地图
设置显示室内图层的地图对象
(Map)
设置室内地图的显示顺序
(number)
显示楼层切换控件
隐藏楼层切换控件
设置室内图层透明度
(number)
获取室内图层透明度
number
:
显示室内图层上的标注
隐藏室内图层上的标注
获取被选中室内的 POIID
获取被选中的室内地图的一些基本信息,包含名称、当前楼层、所有楼层信息、POIID等
矢量覆盖物图层,可添加/删除/查询矢量覆盖物(Polygon/Polyline/CircleMarker/Ellipse/RectAngle/BezierCurve)的图层
var layer = new AMap.VectorLayer();
map.add(layer);
var circle = new AMap.circle({center: [116.4, 39.9], radius:1000});
layer.add(circle);
添加矢量覆盖物到集合中,不支持添加重复的覆盖物
((VectorOverlay | Array<VectorOverlay>))
矢量覆盖物或矢量覆盖物数组
删除矢量覆盖物
((VectorOverlay | Array<VectorOverlay>))
矢量覆盖物或矢量覆盖物数组
显示图层
隐藏图层
判断传入的矢量覆盖物实例是否在VectorLayer这中
(VectorOverlay)
boolean
:
清空 VectorLayer
批量修改矢量覆盖物属性(包括线样式、样色等等)
(Object)
根据经纬度查询矢量覆盖物信息
(LngLatLike)
(VectorOverlay | undefined)
:
vector 矢量覆盖物
符合 OGC 标准或者行业通行规范的的图层类型
用于加载OGC标准的WMS地图服务的一种图层类,仅支持EPSG3857坐标系统的WMS图层。 查看 WMS的OGC标准。
(WMSLayerOptions)
默认图层参数
Name | Description |
---|---|
opts.url String
|
wmts服务的url地址,如:' https://services.arcgisonline.com/arcgis/rest/services/'+ 'Demographics/USA_Population_Density/MapServer/WMTS/' |
opts.blend Boolean
|
地图级别切换时,不同级别的图片是否进行混合,如图层的图像内容为部分透明请设置为false |
opts.param Object
|
OGC标准的WMS地图服务的GetMap接口的参数,包括VERSION、LAYERS、STYLES、FORMAT、TRANSPARENT等, CRS、BBOX、REQUEST、WIDTH、HEIGHT等参数请勿添加,例如: { LAYERS: 'topp:states', VERSION:'1.3.0', FORMAT:'image/png' } |
opts.zooms [Number, Number]
(default [2,20] )
|
支持的缩放级别范围,默认范围 [2-20] |
opts.opacity Number
(default 1 )
|
透明度,默认 1 |
opts.visible Boolean
(default true )
|
是否显示,默认 true |
opts.zIndex Number
(default 4 )
|
图层叠加的顺序值,1 表示最底层。默认 zIndex:4 |
设置OGC标准的WMS getMap接口的参数,包括VERSION、LAYERS、STYLES、FORMAT、TRANSPARENT等
(Object)
参数集合,{VERSION: '1.0', ...}
获取 OGC 标准的 WMS getMap 接口的参数
设置 WMS 服务地址
(String)
服务地址
设置 WMS 服务地址
(String)
服务地址
设置图层隐藏
设置图层透明度,范围 [0 ~ 1]
(Number)
图层透明度
设置图层可见
设置图层层级,数字越大图层层级越高
(Number)
图层层级值
获取图层层级
Number
:
zIndex 图层层级
获取图层参数信息
Object
:
图层参数信息
获取图层透明度
Number
:
opacity 图层透明度
图块切片加载完成事件
用于加载 OGC 标准的 WMTS 地图服务的一种图层类,仅支持 EPSG3857 坐标系统的 WMTS 图层 查看 WMTS 标准 相关示例
(WMTSLayerOptions)
默认图层参数
Name | Description |
---|---|
opts.url String
|
wms服务的url地址,如' https://ahocevar.com/geoserver/wms ' |
opts.blend Boolean
|
地图级别切换时,不同级别的图片是否进行混合,如图层的图像内容为部分透明请设置为false |
opts.param Object
|
OGC标准的WMTS地图服务的GetTile接口的参数,包括Version、Layer、 Style、Format、Service等,TileMatrixSet、TileRow、TileCol、Request等参数请勿添加,例如: { Layer: '0', Version:'1.0.0', Format: 'image/png' } |
opts.zooms [Number, Number]
(default [2,20] )
|
支持的缩放级别范围,默认范围 [2-20] |
opts.opacity Number
(default 1 )
|
透明度,默认 1 |
opts.visible Boolean
(default true )
|
是否显示,默认 true |
opts.zIndex Number
(default 4 )
|
图层叠加的顺序值,1 表示最底层。默认 zIndex:4 |
设置 OGC 标准的 WMTS getTile接口的参数,包括Version、Layer、Style、Format、Service等
(Object)
参数集合,{VERSION: '1.0', ...}
获取 OGC 标准的 WMTS getMap 接口的参数
获取 WMTS 服务地址
String
:
地址
设置 WMTS 服务地址
(String)
服务地址
设置图层透明度,范围 [0 ~ 1]
(Number)
图层透明度
设置图层隐藏
获取图层透明度
Number
:
opacity 图层透明度
设置图层层级,数字越大图层层级越高
(Number)
图层层级值
获取图层层级
Number
:
zIndex 图层层级
获取图层参数信息
Object
:
图层参数信息
设置图层可见
图块切片加载完成事件
用于加载展示开发者自己拥有的数据或者图像的图层类型
热力图,基于第三方heatmap.js实现,以特殊高亮的形式显示数据密集程度。根据密集程度的不同,图上会呈现不同的颜色,以直观的形式展现数据密度。API引用了heatmap.js最新版本v2.0,v2.0基于新的渲染模型,具有更高的渲染效率和更强的性能。支持chrome、firefox、safari、ie9及以上浏览器。
(Map)
要叠加热力图的地图对象
(HeatMapOptions)
热力图属性配置
Name | Description |
---|---|
opts.radius number
|
热力图中单个点的半径,默认:30,单位:pixel |
opts.gradient object
|
热力图的渐变区间,热力图按照设置的颜色及间隔显示热力图,例{0.4:'rgb(0, 255, 255)',0.85:'rgb(100, 0, 255)',},其中 key 表示间隔位置,取值范围: [0,1] ,value 为颜色值。默认:heatmap.js标准配色方案 |
opts.opacity array
|
热力图透明度区间数组,取值范围 [0,1] ,0表示完全透明,1表示不透明,默认: [0,1] |
opts.zooms array
|
支持的缩放级别范围,取值范围 [3-20] ,默认: [3,20] |
opts.visible boolean
|
是否可见 |
opts.zIndex number
|
热力图层在地图上的叠加顺序,默认 130 |
opts.3d HeatMap3DOptions
|
3D热力图属性 |
opts.3d.heightScale number
|
高度缩放因子,表示在单位高度上的缩放比例, 默认为 1 |
opts.3d.heightBezier array
|
影响高度平滑度的贝塞尔曲线因子,默认 [0.5, 0, 1, 0.5] , |
opts.3d.gridSize number
|
取样精度,越小越平滑,越大性能越高 |
var heatmap;
var points = [
{"lng":116.191031,"lat":39.988585,"count":10},
{"lng":116.389275,"lat":39.925818,"count":11},
{"lng":116.287444,"lat":39.810742,"count":12},
{"lng":116.481707,"lat":39.940089,"count":13},
{"lng":116.410588,"lat":39.880172,"count":14},
{"lng":116.394816,"lat":39.91181,"count":15},
{"lng":116.416002,"lat":39.952917,"count":16},
];
// 加载热力图插件
map.plugin(["AMap.HeatMap"],function(){
// 在地图对象叠加热力图
heatmap = new AMap.Heatmap({map:map});
// 设置热力图数据集
heatmap.setDataSet({data:points,max:100});
});
获取热力图的属性信息
HeatMapOptions
:
设置热力图要叠加的地图实例,也可以在Map中的layers属性中设置为默认显示的图层
(Map)
地图实例
隐藏热力图
显示热力图
设置热力图层叠加层级
(number)
热力图层叠加层级
获得热力图层叠加层级
number
:
设置热力图展现的数据集,dataset数据集格式为: { max: Number 权重的最大值, data: Array 坐标数据集 }, 其中max不填则取数据集count最大值 例: { max: 100, data: [{lng: 116.405285, lat: 39.904989, count: 65},{}, …] } 也可以通过url来加载数据,格式为 { data:jsonp格式数据的服务地址URL, dataParser: 数据格式转换function //当jsonp返回结果和官方结构不一致的时候,用户可以传递一个函数用来进行数据格式转换; } 例: { data:'http://abc.com/jsonp.js', dataParser:function(data){ return doSomthing(data);//返回的对象结果应该与上面例子的data字段结构相同 } }
(object)
数据集
输出热力图的数据集,数据结构同setDataSet中的数据集
object
:
设置热力图属性,请参考 HeatMapOptions 列表中的说明
(HeatMapOptions)
热力图配置
获取热力图叠加地图对象
Map
:
标注层
(LabelsLayerOptions)
标注层参数
Name | Description |
---|---|
opts.visible boolean
|
标注层是否可见,默认值:true |
opts.zIndex number
|
标注层与其它图层的叠加顺序,默认值:120 |
opts.opacity number
|
标注层透明度 |
opts.collision boolean
|
标注层内的标注是否互相避让,默认值: true |
opts.allowCollision boolean
|
标注层内的标注是否允许其它标注层对它避让,默认值:false,开启该功能可实现地图标注对 LabelMarker 的避让 |
opts.zooms Array<number>
|
标注层展示层级范围 |
// 创建一个标注层实例
var labelsLayer = new AMap.LabelsLayer({
collision: true,
opacity: 1,
zIndex: 120,
allowCollision: true,
});
// 将标注层添加到地图上
map.add(labelsLayer);
获取标注层是否支持内部标注避让
any
:
设置标注层是否支持内部标注避让
(boolean)
默认值: true
获取标注层是否允许其它层标注避让
boolean
:
获取标注层透明度
number
:
设置标注层透明度
(number)
获取标注层显示层级范围
any
:
设置标注层显示层级范围
([number])
获取标注层叠加顺序
number
:
设置标注层叠加顺序
(number)
将 labelMarker 添加到标注层上
(Array<LabelMarker>)
可添加单个标注或标注数组
将 labelMarker 从标注层上移除
((LabelMarker | Array<LabelMarker>))
可移除单个标注或标注数组
清空标注层上的标注
显示标注层
隐藏标注层
获取标注层内的所有标注对象
Array<any>
:
自定义图层是一种完全由开发者来指定绘制方法的图层 相关示例
(HTMLCanvasElement)
canvas 对象
(CustomLayerOption)
默认图层参数
Name | Description |
---|---|
opts.render Function
|
绘制函数,初始化完成时候,开发者需要给该图层设定render方法, 该方法需要实现图层的绘制,API会在合适的时机自动调用该方法 |
opts.zooms [Number, Number]
(default [2,20] )
|
图层缩放等级范围,默认 [2, 20] |
opts.opacity Number
(default 1 )
|
图层透明度,默认为 1 |
opts.visible Boolean
(default true )
|
图层是否可见,默认为 true |
opts.zIndex Number
(default 120 )
|
图层的层级,默认为 120 |
var cLayer = new AMap.CustomLayer(canvas, {
zooms: [2, 18],
zIndex: 120,
render() {
// 对 canvas 进行绘制
}
})
获取图层透明度
Number
:
opacity 图层透明度
设置图层层级,数字越大图层层级越高
(Number)
图层层级值
设置图层层级
(number)
图层层级
设置图层透明度,范围 [0 ~ 1]
(Number)
图层透明度
获取图层层级
Number
:
zIndex 图层层级
设置图层隐藏
获取图层参数信息
Object
:
图层参数信息
设置图层可见
添加到地图上
(Map)
灵活切片图层,继承自AMap.TileLayer,开发者可通过构造时传入给其传入createTile字段来指定每一个切片的内容 相关示例
(FlexibleLayerOptions)
Name | Description |
---|---|
opts.cacheSize Number
|
缓存瓦片数量 |
opts.createTile function (x, y, z, success, fail)
|
由开发者实现,由API自动调用,xyz分别为切片横向纵向编号和层级,切片大小 256。假设每次创建的贴片为A(支持img或者canvas),当创建或者获取成功时请回调success(A),不需要显示或者失败时请回调fail() |
opts.zooms [Number, Number]
(default [2,20] )
|
支持的缩放级别范围,默认范围 [2-20] |
opts.opacity Number
(default 1 )
|
透明度,默认 1 |
opts.visible Boolean
(default true )
|
是否显示,默认 true |
opts.zIndex Number
(default 4 )
|
图层叠加的顺序值,1 表示最底层。默认 zIndex:4 |
opts.tileSize Number
(default 256 )
|
切片大小,取值: 256,表示切片大小为256 256, 128,表示切片大小为128 128, 64,表示切片大小为64*64。默认值为256 |
设置图层透明度,范围 [0 ~ 1]
(Number)
图层透明度
获取图层透明度
Number
:
opacity 图层透明度
设置图层层级,数字越大图层层级越高
(Number)
图层层级值
获取图层层级
Number
:
zIndex 图层层级
获取图层参数信息
Object
:
图层参数信息
销毁图层
设置图层隐藏
设置图层可见
图块切片加载完成事件
图片图层类,用户可以将一张静态图片作为图层添加在地图上,图片图层会随缩放级别而自适应缩放。 相关示例
(ImageLayerOptions)
传入默认参数列表
Name | Description |
---|---|
opts.url String
|
图片地址链接 |
opts.zooms [Number, Number]
(default [2,20] )
|
图层缩放等级范围,默认 [2, 20] |
opts.bounds ([Number, Number, Number, Number] | Bounds)
|
图片的范围大小经纬度,如果传递数字数组类型: [minlng,minlat,maxlng,maxlat] |
opts.opacity Number
(default 1 )
|
图层透明度,默认为 1 |
opts.visible Boolean
(default true )
|
图层是否可见,默认为 true |
opts.zIndex Number
(default 6 )
|
图层的层级,默认为 6 |
var imageLayer = new AMap.ImageLayer({
url: 'https://amappc.cn-hangzhou.oss-pub.aliyun-inc.com/lbs/static/img/dongwuyuan.jpg',
bounds: new AMap.Bounds(
[116.327911, 39.939229],
[116.342659, 39.946275]
),
zooms: [10, 18]
});
获取图片的地址
设置图片的地址
(String)
图片地址
获取 ImageLayer显示的范围
Bounds
:
经纬度范围值
设置 ImageLayer显示的范围
获取图层参数信息
object
:
图层参数信息
获取图层层级
Number
:
zIndex 图层层级
设置图层层级,数字越大图层层级越高
(Number)
图层层级值
获取图层透明度
Number
:
opacity 图层透明度
设置图层透明度,范围 [0 ~ 1]
(Number)
图层透明度
设置图层可见
设置图层隐藏
图块切片加载完成事件
Canvas图层类,用户可以将一个 Canvas 作为图层添加在地图上,Canvas图层会随缩放级别而自适应缩放。 相关示例
(ImageLayerOptions)
传入默认参数列表
Name | Description |
---|---|
opts.canvas HTMLCanvasElement
|
Canvas DOM 对象 |
opts.zooms [Number, Number]
(default [2,20] )
|
图层缩放等级范围,默认 [2, 20] |
opts.bounds ([Number, Number, Number, Number] | Bounds)
|
canvas 的范围大小经纬度, 如果传递数字数组类型: [minlng,minlat,maxlng,maxlat] |
opts.opacity Number
(default 1 )
|
图层透明度,默认为 1 |
opts.visible Boolean
(default true )
|
图层是否可见,默认为 true |
opts.zIndex Number
(default 6 )
|
图层的层级,默认为 6 |
修改显示的Canvas
(HTMLCanvasElement)
返回 Canvas 对象
HTMLCanvasElement
:
canvas 对象
返回 canvas 范围的经纬度
Bounds
:
范围经纬度
当canvas的内容发生改变是用于刷新图层,3D视图下调用,2D视图不需要调用
获取图层层级
number
:
zIndex 图层层级
设置图层层级,数字越大图层层级越高
(number)
图层层级值
获取图层透明度
number
:
opacity 图层透明度
设置图层透明度,范围 [0 ~ 1]
(number)
图层透明度
获取图层参数信息
object
:
图层参数信息
设置图层可见
设置图层隐藏
用于在地图上添加点状地图要素的类型
点标记
(MarkerOptions)
点标记参数
Name | Description |
---|---|
opts.map Map
|
要显示该marker的地图对象 |
opts.position (Vector | LngLat)
|
点标记在地图上显示的位置 |
opts.icon (Icon | string)
|
在点标记中显示的图标。可以传一个图标地址,也可以传Icon对象。有合法的content内容设置时,此属性无效。 |
opts.content (string | HTMLElement)
|
点标记显示内容。可以是HTML要素字符串或者HTML DOM对象。content有效时,icon属性将被覆盖。 |
opts.title string
|
鼠标滑过点标记时的文字提示。不设置则鼠标滑过点标无文字提示。 |
opts.visible boolean
|
点标记是否可见,默认值:true |
opts.zIndex number
|
点标记的叠加顺序。地图上存在多个点标记叠加时,通过该属性使级别较高的点标记在上层显示,默认zIndex:12 |
opts.offset (Vector | Pixel)
|
点标记显示位置偏移量,默认值为 [0,0] 。Marker指定position后,默认以marker左上角位置为基准点(若设置了anchor,则以anchor设置位置为基准点),对准所给定的position位置,若需使marker指定位置对准在position处,需根据marker的尺寸设置一定的偏移量。 |
opts.anchor (string | Vector)
|
设置点标记锚点,可选值:'top-left','top-center','top-right', 'middle-left', 'center', 'middle-right', 'bottom-left', 'bottom-center', 'bottom-right' 相关示例 |
opts.angle number
|
点标记的旋转角度,,广泛用于改变车辆行驶方向。默认值:0 |
opts.clickable boolean
|
点标记是否可点击,默认值: true |
opts.draggable boolean
|
设置点标记是否可拖拽移动,默认值:false |
opts.bubble boolean
|
事件是否冒泡,默认为 false |
opts.zooms Vector
|
点标记显示的层级范围,超过范围不显示。默认值:zooms: [2, 20] |
opts.cursor string
|
指定鼠标悬停时的鼠,默认值:'pointer' |
opts.topWhenClick boolean
|
鼠标点击时marker是否置顶,默认false ,不置顶 |
opts.label object
|
添加文本标注 |
opts.label.content string
|
文本标注的内容 |
opts.label.offset (Pixel | Vector | Array<number>)
|
为偏移量。如设置了 direction,以 direction 方位为基准点进行偏移。 |
opts.label.direction string
|
文本标注方位 可选值:'top'|'right'|'bottom'|'left'|'center',默认值: 'right'。 |
opts.extData any
|
用户自定义属 ,支持JavaScript API任意数据类型,如 Marker的id等。可将自定义数据保存在该属性上,方便后续操作使用。 |
var marker = new AMap.Marker({
position: new AMap.LngLat(116.397428, 39.90923),
icon: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
anchor: 'bottom-center',
});
map.add(marker);
设置鼠标滑过点标记时的文字提示
(string)
点标记的文字提示
设置点标记的显示图标,设置了有效 content 则 icon 不生效
((Icon | string))
点标记中显示的图标
获取点标记文本标签内容
LabelOptions
:
文本标签设置项
设置点标记文本标签内容
(LabelOptions)
获取点标记是否支持鼠标单击事件
boolean
:
设置点标记是否支持鼠标单击事件
(boolean)
默认值: true
获取点标记对象是否可拖拽移动
boolean
:
设置点标记对象是否可拖拽移动
(boolean)
获取该点标记是否置顶
boolean
:
地图上有多个marker时,设置是否置顶该点标记
(boolean)
获取鼠标悬停时的光标设置
string
:
设置鼠标悬停时的光标
(string)
获取用户自定义数据
(any | undefined)
:
设置用户自定义数据
(any)
用户自定义数据
移除点标记 相关示例
以给定时长/速度移动点标记到指定位置, 需加载 AMap.MoveAnimation 插件才可使用
((LngLat | Vector))
指定位置
(MoveToOptions)
moveTo 动画参数
Name | Description |
---|---|
opts.duration number
|
每段动画持续时长, 单位:ms |
opts.speed number
|
动画速度,已废弃 |
opts.easing EasingCallback
|
easing 时间函数 |
opts.autoRotation boolean
|
点标记方向是否沿路径旋转 |
AMap.plugin('AMap.MoveAnimation', function(){
// 加载完 AMap.MoveAnimation 插件以后,创建一个 Marker 实例
const animationMarker = new AMap.Marker({
position: new AMap.LngLat(116.397389,39.909466),
icon: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png",
offset: new AMap.Pixel(-13, -26),
});
// 调用 moveTo 方法
animationMarker.moveTo([116.397389, 39.909466], {
duration: 1000,
delay: 500,
});
});
以指定的时长,点标记沿指定的路径移动,加载 AMap.MoveAnimation 后可以使用 JSAPI 2.0 可支持分段设置速度和时长 相关示例
(MoveAlongOptions)
moveAlong 动画参数 可选
Name | Description |
---|---|
opts.duration (number | AnimationCallback)
|
每段动画持续时长, 单位:ms |
opts.speed (number | AnimationCallback)
|
每段动画速度,已废弃 |
opts.easing EasingCallback
|
easing 时间函数 |
opts.circlable boolean
|
动画是否循环 |
opts.delay (number | AnimationCallback)
|
延迟动画时长 |
opts.aniInterval number
|
每段完整动画间隔时长 |
opts.autoRotation boolean
|
覆盖物是否沿路径旋转 |
const path = [
new AMap.LngLat(116.397389, 39.909466),
new AMap.LngLat(116.379707, 39.968168),
new AMap.LngLat(116.434467, 39.95001),
new AMap.LngLat(116.46365, 39.979481),
new AMap.LngLat(116.397389, 39.909466),
];
// 分段设置时长
const customData = [
{ position: path[0], duration: 200 },
{ position: path[1], duration: 400 },
{ position: path[2], duration: 600 },
{ position: path[3], duration: 800 },
{ position: path[4], duration: 1000 },
];
AMap.plugin('AMap.MoveAnimation', function(){
// 加载完 AMap.MoveAnimation 插件以后,创建一个 Marker 实例
const animationMarker = new AMap.Marker({
position: new AMap.LngLat(116.397389,39.909466),
angle: 90,
});
// 调用 moveAlong 方法
animationMarker.moveAlong(customData);
});
开启点标记动画,加载 AMap.MoveAnimation 后创建的点标记可以使用
animationMarker.startMove();
停止点标记动画,加载 AMap.MoveAnimation 后创建的点标记可以使用
animationMarker.stopMove();
暂停点标记动画,加载 AMap.MoveAnimation 后创建的点标记可以使用
animationMarker.pauseMove();
重新启动点标记动画,加载 AMap.MoveAnimation 后创建的点标记可以使用
animationMarker.resumeMove();
设置尺寸
((Vector | Size))
设置覆盖物的叠加顺序
(number)
获取覆盖物的所有属性
OverlayOptions
:
获取点标记显示的自定义内容
(string | HTMLElement | undefined)
:
将覆盖物加到地图上
(Map)
设置覆盖物偏移量
((Vector | Pixel))
设置点标记显示的自定义内容,可以是HTML要素字符串或者HTML DOM对象
((HTMLDOM | string))
获取点标记范围
Bounds
:
设置覆盖物锚点
(string)
获取覆盖物的地图实例
(Map | null)
:
设置覆盖物位置
(Vector)
获取覆盖物位置
any
:
隐藏覆盖物
显示覆盖物
将覆盖物设置到地图上
((Map | null))
将覆盖物加到地图上
(Map)
设置覆盖物旋转角度
(number)
如设置了尺寸,获取设置的尺寸
Vector
:
开始拖拽点标记时触发事件
触摸移动进行中时触发事件,仅适用移动设备
鼠标左键单击事件
鼠标左键双击事件
鼠标右键单击事件
鼠标移动
鼠标移近点标记时触发事件
鼠标移出点标记时触发事件
鼠标在点标记上按下时触发事件
鼠标在点标记上按下后抬起时触发事件
鼠标拖拽移动点标记时触发事件
点标记拖拽移动结束触发事件
点标记在执行moveTo,moveAlong动画时触发事件,Object对象的格式是{passedPath:Array.
点标记执行moveTo动画结束时触发事件,也可以由moveAlong方法触发
触摸结束时触发事件,仅适用移动设备
点标记执行moveAlong动画一次后触发事件
触摸开始时触发事件,仅适用移动设备
文本标记
(TextOptions)
文本参数
Name | Description |
---|---|
opts.map Map
|
要显示该marker的地图对象 |
opts.position (Vector | LngLat)
|
点标记在地图上显示的位置 |
opts.text LabelOptions
|
标记显示的文本内容 |
opts.title string
|
鼠标滑过点标记时的文字提示 |
opts.visible boolean
|
点标记是否可见,默认为true |
opts.zIndex number
|
点标记的叠加顺序 |
opts.offset (Vector | Pixel)
|
点标记显示位置偏移量,默认值 [0, 0] 。 图解说明 |
opts.anchor (string | Vector)
|
设置点标记锚点。默认值:'center'。可选值:'top-left'|'top-center'|'top-right'|'middle-left'|'center'|'middle-right'|'bottom-left'|'bottom-center'|'bottom-right' |
opts.angle number
|
点标记的旋转角度。默认值:0 。注:angle属性是使用CSS3来实现的,支持IE9及以上版本 |
opts.clickable boolean
|
点标记是否可点击。默认值: true |
opts.draggable boolean
|
设置点标记是否可拖拽移动。默认值:false |
opts.bubble boolean
|
事件是否冒泡,默认值:false |
opts.zooms Vector
|
点标记显示的层级范围,超过范围不显示。默认值:zooms: [2, 20] 。 |
opts.cursor string
|
指定鼠标悬停时的鼠标样式。 |
opts.topWhenClick boolean
|
鼠标点击时marker是否置顶,默认值: false |
opts.extData any
|
用户自定义属性 ,支持JavaScript API任意数据类型,如 Marker的id等。可将自定义数据保存在该属性上,方便后续操作使用。 |
opts.style object
|
设置文本样式,Object同css样式表,如:{'background-color':'red'} |
var text = new AMap.Text({
position: new AMap.LngLat(116.397428, 39.90923),
anchor: 'bottom-center',
text: '文本标记',
style: {'background-color':'red'},
});
map.add(text);
设置文本标记内容
(string)
修改文本标记样式。Object同css样式表,如:{'background-color':'red'}
(any)
设置鼠标滑过文本标记时的文字提示
(string)
文本标记的文字提示
获取文本标记是否支持鼠标单击事件
boolean
:
设置文本标记是否支持鼠标单击事件
(boolean)
默认值: true
获取文本标记对象是否可拖拽移动
boolean
:
设置文本标记对象是否可拖拽移动
(boolean)
获取该文本标记是否置顶
boolean
:
获取文本标记的地图实例
(Map | null)
:
将文本标记设置到地图上
((Map | null))
将文本标记加到地图上,不推荐使用。推荐使用 map.add(text);
(Map)
将文本标记加到地图上
(Map)
显示文本标记
隐藏文本标记
获取文本标记位置
any
:
设置文本标记位置
(Vector)
设置文本标记锚点
(string)
设置文本标记旋转角度
(number)
设置文本标记的叠加顺序
(number)
获取文本标记的所有属性
OverlayOptions
:
获取文本标记范围
Bounds
:
以给定速度移动文本标记到指定位置, 需加载 AMap.MoveAnimation 插件才可使用
((LngLat | Vector))
指定位置
(MoveToOptions)
moveTo 动画参数
Name | Description |
---|---|
opts.duration number
|
每段动画持续时长, 单位:ms |
opts.speed number
|
动画速度,已废弃 |
opts.easing EasingCallback
|
easing 时间函数 |
opts.autoRotation boolean
|
覆盖物是否沿路径旋转 |
AMap.plugin('AMap.MoveAnimation', function(){
// 加载完 AMap.MoveAnimation 插件以后,创建一个 Text 实例
const animationText = new AMap.Text({
text: '文本标记',
position: new AMap.LngLat(116.397389,39.909466),
});
animationText.moveTo([116.397389, 39.909466], {
duration: 1000,
delay: 500,
});
});
以指定的时长,文本标记沿指定的路径移动,加载 AMap.MoveAnimation 后可以使用
(MoveAlongOptions)
moveAlong 动画参数 可选
Name | Description |
---|---|
opts.duration (number | AnimationCallback)
|
每段动画持续时长, 单位:ms |
opts.speed (number | AnimationCallback)
|
每段动画速度,已废弃 |
opts.easing EasingCallback
|
easing 时间函数 |
opts.circlable boolean
|
动画是否循环 |
opts.delay (number | AnimationCallback)
|
延迟动画时长 |
opts.aniInterval number
|
每段完整动画间隔时长 |
opts.autoRotation boolean
|
覆盖物是否沿路径旋转 |
const path = [
new AMap.LngLat(116.397389, 39.909466),
new AMap.LngLat(116.379707, 39.968168),
new AMap.LngLat(116.434467, 39.95001),
new AMap.LngLat(116.46365, 39.979481),
new AMap.LngLat(116.397389, 39.909466),
];
const customData = [
{ position: path[0], duration: 200 },
{ position: path[1], duration: 400 },
{ position: path[2], duration: 600 },
{ position: path[3], duration: 800 },
{ position: path[4], duration: 1000 },
];
AMap.plugin('AMap.MoveAnimation', function(){
// 加载完 AMap.MoveAnimation 插件以后,创建一个 Text 实例
const animationText = new AMap.Text({
text: '文本标记',
position: new AMap.LngLat(116.397389,39.909466),
});
animationText.moveAlong(customData);
});
开启文本标记动画,加载 AMap.MoveAnimation 后可以使用
animationText.startMove();
停止文本标记动画,加载 AMap.MoveAnimation 后可以使用
animationText.stopMove();
暂停文本标记动画,加载 AMap.MoveAnimation 后可以使用
animationText.pauseMove();
重新启动文本标记动画,加载 AMap.MoveAnimation 后可以使用
animationText.resumeMove();
地图上有多个marker时,设置是否置顶该文本标记
(boolean)
获取鼠标悬停时的光标设置
string
:
设置鼠标悬停时的光标
(string)
获取用户自定义数据
(any | undefined)
:
设置用户自定义数据
(any)
用户自定义数据
移除点标记
点标记在执行moveTo,moveAlong动画时触发事件,Object对象的格式是{passedPath:Array.
触摸移动进行中时触发事件,仅适用移动设备
触摸结束时触发事件,仅适用移动设备
点标记执行moveAlong动画一次后触发事件
触摸开始时触发事件,仅适用移动设备
点标记执行moveTo动画结束时触发事件,也可以由moveAlong方法触发
鼠标左键单击事件
鼠标左键双击事件
鼠标右键单击事件
鼠标移动
鼠标移近点标记时触发事件
鼠标移出点标记时触发事件
鼠标在点标记上按下时触发事件
鼠标在点标记上按下后抬起时触发事件
开始拖拽点标记时触发事件
点标记拖拽移动结束触发事件
鼠标拖拽移动点标记时触发事件
标注类
(LabelMarkerOptions)
标注参数
Name | Description |
---|---|
opts.name string
|
标注名称,作为标注标识,并非最终在地图上显示的文字内容,显示文字内容请设置 opts.text.content |
opts.position (Vector | LngLat)
|
标注位置 |
opts.zooms Vector
|
标注显示级别范围, 可选值: [2,20] |
opts.opacity number
|
标注透明度,默认值: 1 |
opts.rank number
|
避让优先级,获取标注的优先级,该优先级用于 labelsLayer 支持避让时,rank 值大的标注会避让掉 rank 值低的标注。默认值:1 |
opts.zIndex number
|
同一 LabelsLayer 内标注显示层级,数字越大越靠前,默认值: 1 |
opts.visible boolean
|
标注是否可见, 默认值: true |
opts.extData any
|
用户自定义类型数据,可将自定义数据保存在该属性上,方便后续操作使用。 |
opts.icon IconOptions
|
标注图标设置 |
opts.icon.image string
|
图标 url。 |
opts.icon.size (Vector | Size)
|
图标大小,默认值: [36, 36] |
opts.icon.clipOrigin (Vector | Pixel)
|
图标所在图片偏移位置,默认值: [0, 0] |
opts.icon.clipSize (Vector | Size)
|
图标所在图片裁剪大小,若未设置,则使用图片大小 |
opts.icon.anchor (Vector | Pixel | string)
|
图标锚点,锚点位置对应设置的 position 位置。可选值:'top-left'| 'top-center'|'top-right'|'middle-left'|'center'| 'middle-right'| 'bottom-left'| 'bottom-center'| 'bottom-right' 。默认值:'top-left'。 |
opts.text TextOptions
|
标注文本设置 |
opts.text.content string
|
文本标注的内容,该属性为直接显示在标注上的文本内容。 |
opts.text.direction string
|
文本标注方位。若设置了 icon,则 direction 是以 icon 为中心的偏移,若未设置 icon,则相对 position 偏移。 可选值:'top'|'right'|'bottom'|'left'|'center'。默认值: right |
opts.text.offset (Pixel | Vector)
|
为偏移量,在 direction 基础上的偏移。默认值 [0, 0] |
opts.text.zooms Vector
|
文本显示级别范围,可单独设置文本显示范围 |
opts.text.style TextStyleOptions
|
文本样式设置 |
opts.text.style.fontSize number
|
文字大小,默认值: 12 |
opts.text.style.fillColor string
|
文字颜色 |
opts.text.style.strokeColor string
|
文字描边颜色 |
opts.text.style.padding (string | Array<(string | number)>)
|
文字 padding。默认值: [3, 3, 3, 3] |
opts.text.style.backgroundColor string
|
文字背景颜色 |
opts.text.style.borderColor string
|
文字背景描边颜色 |
opts.text.style.borderWidth number
|
文字背景描边粗细 |
opts.text.style.fold boolean
|
文字是否折行(6个字一折行) |
// 创建一个 LabelMarker 实例
var labelMarker = new AMap.LabelMarker({
position: [116.468599, 39.995847],
opacity: 1,
zIndex: 2,
icon: {
image: 'https://a.amap.com/jsapi_demos/static/images/poi-marker.png',
anchor: 'bottom-center',
size: [25, 34],
clipOrigin: [459, 92],
clipSize: [50, 68]
},
text: {
content: '香猪坊',
direction: 'right',
style: {
fontSize: 15,
fillColor: '#fff',
strokeColor: 'rgba(255,0,0,0.5)',
strokeWidth: 2,
padding: [3, 10],
backgroundColor: 'yellow',
borderColor: '#ccc',
borderWidth: 3,
}
}
});
// 创建一个 LabelsLayer 实例来承载 LabelMarker,[LabelsLayer 文档](https://lbs.amap.com/api/jsapi-v2/documentation#labelslayer)
var labelsLayer = new LabelsLayer({
collision: true,
});
// 将 LabelMarker 实例添加到 LabelsLayer 上
labelsLayer.add(labelMarker);
// 将 LabelsLayer 添加到地图上
map.add(labelsLayer);
设置标注的名称,作为标注标识,并非最终在地图上显示的文字内容
(string)
获取标注的显示位置
LngLat
:
获取标注显示级别范围
(Vector | undefined)
:
设置显示级别范围
([number])
设置标注透明度
(number)
设置标注的叠加顺序
(number)
设置标注的优先级,该优先级用于 labelsLayer 支持避让时,rank 值大的标注会避让掉 rank 值低的标注。
(number)
获取标注的文本设置
(TextOptions | undefined)
:
设置标注的文本设置,可设置显示的文字内容和文字样式等
(TextOptions)
获取标注的图标设置
(IconOptions | undefined)
:
设置标注的图标设置,可设置显示的标注图片
(IconOptions)
获取标注的全部属性配置
LabelMarkerOptions
:
获取用户自定义属性
(any | undefined)
:
设置用户自定义属性
(any)
是否设置置顶标注,设置为 true 表示该标注会显示在所有标注之前
(boolean)
标注显示
标注隐藏
将自身从标注层移除
重新启动标注动画,加载 AMap.MoveAnimation 后创建的标注可以使用
animationLabel.resumeMove();
停止标注动画,加载 AMap.MoveAnimation 后创建的标注可以使用
animationLabel.stopMove();
开启标注动画,加载 AMap.MoveAnimation 后创建的标注可以使用
animationLabel.startMove();
以指定的时长,标注沿指定的路径移动,加载 AMap.MoveAnimation 后可以使用
(MoveAlongOptions)
moveAlong 动画参数 可选
Name | Description |
---|---|
opts.duration (number | AnimationCallback)
|
每段动画持续时长, 单位:ms |
opts.speed (number | AnimationCallback)
|
每段动画速度,已废弃 |
opts.easing EasingCallback
|
easing 时间函数 |
opts.circlable boolean
|
动画是否循环 |
opts.delay (number | AnimationCallback)
|
延迟动画时长 |
opts.aniInterval number
|
每段完整动画间隔时长 |
opts.autoRotation boolean
|
覆盖物是否沿路径旋转 |
const path = [
new AMap.LngLat(116.397389, 39.909466),
new AMap.LngLat(116.379707, 39.968168),
new AMap.LngLat(116.434467, 39.95001),
new AMap.LngLat(116.46365, 39.979481),
new AMap.LngLat(116.397389, 39.909466),
];
const customData = [
{ position: path[0], duration: 200 },
{ position: path[1], duration: 400 },
{ position: path[2], duration: 600 },
{ position: path[3], duration: 800 },
{ position: path[4], duration: 1000 },
];
AMap.plugin('AMap.MoveAnimation', function(){
// 加载完 AMap.MoveAnimation 插件以后,创建一个 LabelMarker 实例
const animationLabel = new AMap.LabelMarker({
content: '标注',
position: new AMap.LngLat(116.397389,39.909466),
text: {
content: '动画标注'
}
});
labelsLayer.add(animationLabel);
// 调用 moveAlong 方法
animationLabel.moveAlong(customData);
});
以给定速度移动标注到指定位置, 需加载 AMap.MoveAnimation 插件才可使用
((LngLat | Vector))
指定位置
(MoveToOptions)
moveTo 动画参数
Name | Description |
---|---|
opts.duration number
|
每段动画持续时长, 单位:ms |
opts.speed number
|
动画速度,已废弃 |
opts.easing EasingCallback
|
easing 时间函数 |
opts.autoRotation boolean
|
覆盖物是否沿路径旋转 |
AMap.plugin('AMap.MoveAnimation', function(){
// 加载完 AMap.MoveAnimation 插件以后,创建一个 LabelMarker 实例
const animationLabel = new AMap.LabelMarker({
content: '标注',
position: new AMap.LngLat(116.397389,39.909466),
text: {
content: '动画标注'
}
});
labelsLayer.add(animationLabel);
// 调用 moveTo 方法
animationLabel.moveTo([116.397389, 39.909466], {
duration: 1000,
delay: 500,
});
});
暂停标注动画,加载 AMap.MoveAnimation 后创建的标注可以使用
animationLabel.pauseMove();
鼠标在标注上按下时触发事件
鼠标在标注上按下后抬起时触发事件
触摸开始时触发事件,仅适用移动设备
触摸移动进行中时触发事件,仅适用移动设备
触摸结束时触发事件,仅适用移动设备
鼠标左键单击标注触发的事件
鼠标在标注上移动触发的事件
鼠标移进标注时触发事件
鼠标移出标注时触发事件
灵活点标记
(ElasticMarkerOptions)
灵活点标记参数
Name | Description |
---|---|
opts.map Map
|
要显示该marker的地图对象 |
opts.position (Vector | LngLat)
|
点标记在地图上显示的位置 |
opts.visible boolean
|
点标记是否可见,默认为true |
opts.zIndex number
|
点标记的叠加顺序 |
opts.offset (Vector | Pixel)
|
点标记显示位置偏移量 |
opts.clickable boolean
|
点标记是否可点击 |
opts.draggable boolean
|
设置点标记是否可拖拽移动 |
opts.bubble boolean
|
事件是否冒泡,默认为 false |
opts.cursor string
|
指定鼠标悬停时的鼠标样式 |
opts.topWhenClick boolean
|
鼠标点击时marker是否置顶 |
opts.zoomStyleMapping Record<string, number>
|
表示地图级别与styles中样式的映射,{14:0,15:0,16:1,17:1,}表示14到15级使用styles中的第0个样式,16-17级使用第二个样式 |
opts.extData any
|
用户自定义属性 |
opts.styles Array<ElasticStyle>
|
多个不同样式的数组 |
opts.styles.icon ElasticIcon
|
灵活标注图标样式类型 |
opts.styles.icon.img string
|
图标 url |
opts.styles.icon.size Vector
|
图标显示大小 |
opts.styles.icon.anchor (Vector | string)
|
图标锚点 |
opts.styles.icon.imageOffset (Vector | string)
|
图片偏移量 |
opts.styles.icon.imageSize number
|
图片大小 |
opts.styles.icon.fitZoom number
|
最合适的级别,在此级别下显示为原始大小 |
opts.styles.icon.scaleFactor number
|
地图放大一级的缩放比例系数 |
opts.styles.icon.maxScale number
|
最大放大比例 |
opts.styles.icon.minScale number
|
最小放大比例 |
opts.styles.label ElasticLabel
|
灵活标注文本样式类型 |
opts.styles.label.content ElasticLabel
|
文本内容 |
opts.styles.label.position ElasticLabel
|
文本位置相对于图标的基准点,可选值:BL、BM、BR、ML、MR、TL、TM、TR分别代表左下角、底部中央、右下角、左侧中央、右侧中央、左上角、顶部中央、右上角 |
opts.styles.label.offset ElasticLabel
|
相对position的偏移量 |
opts.styles.label.minZoom ElasticLabel
|
label的最小显示级别 |
// 样式列表
var stylesArr = [{
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,//最大放大比例
minScale: 1//最小放大比例
},
label: {
content: '百花殿',
position: 'BM',
minZoom: 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
}
}];
zoom 与样式的映射
var zoomStyleMapping1 = {
14: 0, // 14级使用样式 0
15: 0,
16: 0,
17: 0,
18: 1,
19: 1,
20: 1,
};
// 加载灵活点标记的插件
AMap.plugin(['AMap.ElasticMarker'], function(){
var elasticMarker = new AMap.ElasticMarker({
position: [116.405562, 39.881166],
// 指定样式列表
styles: stylesArray,
// 指定 zoom 与样式的映射
zoomStyleMapping: zoomStyleMapping,
});
map.add(elasticMarker);
});
设置鼠标滑过灵活点标记时的文字提示
(string)
灵活点标记的文字提示
获取灵活点标记是否支持鼠标单击事件
boolean
:
设置灵活点标记是否支持鼠标单击事件
(boolean)
默认值: true
获取灵活点标记对象是否可拖拽移动
boolean
:
显示覆盖物
Bounds
:
获取覆盖物的所有属性
OverlayOptions
:
设置覆盖物的叠加顺序
(number)
设置灵活点标记锚点
(string)
设置灵活点标记位置
(Vector)
获取覆盖物的地图实例
(Map | null)
:
隐藏覆盖物
获取覆盖物位置
any
:
将覆盖物设置到地图上
((Map | null))
设置灵活点标记对象是否可拖拽移动
(boolean)
获取该灵活点标记是否置顶
boolean
:
地图上有多个marker时,设置是否置顶该灵活点标记
(boolean)
获取鼠标悬停时的光标设置
string
:
设置鼠标悬停时的光标
(string)
获取用户自定义数据
(any | undefined)
:
设置用户自定义数据
(any)
用户自定义数据
移除点标记
触摸结束时触发事件,仅适用移动设备
触摸移动进行中时触发事件,仅适用移动设备
触摸开始时触发事件,仅适用移动设备
点标记拖拽移动结束触发事件
鼠标拖拽移动点标记时触发事件
开始拖拽点标记时触发事件
鼠标在点标记上按下后抬起时触发事件
鼠标在点标记上按下时触发事件
鼠标移出点标记时触发事件
鼠标移近点标记时触发事件
鼠标移动
鼠标右键单击事件
鼠标左键双击事件
鼠标左键单击事件
用于展示大量点标记,将点标记按照距离进行聚合,以提高绘制性能。点聚合支持用户自定义样式,以插件形式调用。
(Map)
要添加点聚合的地图对象
(Array)
需要进行聚合显示的点数据
Name | Description |
---|---|
dataOptions.lnglat Array
|
点标记的经纬度信息 |
dataOptions.weight number
|
点标记的权重信息,以权重高的点为中心进行聚合 |
(Object)
点聚合属性设置
Name | Description |
---|---|
MarkerClusterOptions.gridSize Number
|
聚合计算时网格的像素大小,默认60 |
MarkerClusterOptions.maxZoom Number
|
最大的聚合级别,大于该级别就不进行相应的聚合。默认值为 18,即小于 18 级的级别均进行聚合,18 及以上级别不进行聚合 |
MarkerClusterOptions.averageCenter Boolean
|
聚合点的图标位置是否是所有聚合内点的中心点。默认为 true。数据中如果含有权重值,以权重高的点为中心进行聚合 |
MarkerClusterOptions.clusterByZoomChange Boolean
|
地图缩放过程中是否聚合。默认值 false。 |
MarkerClusterOptions.styles Array<Object>
|
指定聚合后的点标记的图标样式,可缺省,缺省时为默认样式
数据元素分别对应聚合量在1-10,11-100,101-1000…的聚合点的样式;
当用户设置聚合样式少于实际叠加的点数,未设置部分按照系统默认样式显示;
单个图标样式包括以下几个属性:
1. {string} url:图标显示图片的url地址(必选)
2. {AMap.Size} size:图标显示图片的大小(必选)
3. {AMap.Pixel} offset:图标定位在地图上的位置相对于图标左上角的偏移值。默认为(0,0),不偏移(可选)
4. {AMap.Pixel} imageOffset:图片相对于可视区域的偏移值,此功能的作用等同CSS中的background-position属性。默认为(0,0),不偏移(可选)
5. {String} textColor:文字的颜色,默认为"#000000"(可选)
6. {Number} textSize:文字的大小,默认为10(可选)
|
MarkerClusterOptions.renderClusterMarker function
|
该方法用来实现聚合点的自定义绘制,由开发者自己实现,API 将在绘制每个聚合点的时候调用这个方法,可以实现聚合点样式的灵活设定,指定了 renderClusterMarker 后 styles 无效。
该函数的入参为一个Object,包含如下属性:
1. count: 当前聚合点下聚合的 Marker 的数量
2. marker: 当前聚合点显示的 Marker
|
MarkerClusterOptions.renderMarker function
|
该方法用来实现非聚合点的自定义绘制,由开发者自己实现,API 将在绘制每个非聚合点的时候调用这个方法
该函数的入参为一个Object,包含如下属性:
marker: 非聚合点 Marker 对象
|
// 数据格式为一组含有经纬度信息的数组,如下所示。其中【经纬度】lnglat 为必填字段,【权重】weight 为可选字段。
var points = [
{ weight: 8, lnglat: ["108.939621", "34.343147"] },
{ weight: 1, lnglat: ["112.985037", "23.15046"] },
{ weight: 1, lnglat: ["110.361899", "20.026695"] },
{ weight: 1, lnglat: ["121.434529", "31.215641"] }
];
// 加载点聚合插件
map.plugin(["AMap.MarkerCluster"],function(){
var cluster = new AMap.MarkerCluster(map, points, {
gridSize: 80 // 聚合网格像素大小
});
});
获取聚合点的总数量
Number
:
在原数据基础上添加数据,格式同 dataOptions
(dataOptions)
设置数据,格式同 dataOptions
(dataOptions)
获取聚合网格的像素大小
Number
:
设置聚合网格的像素大小
(Number)
像素大小
获取地图中点标记的最大聚合级别
Number
:
设置聚合点位置是否是所有聚合点的中心
(Boolean)
获取单个聚合点位置是否是聚合内所有标记的平均中心
Boolean
:
设置地图对象
(Map)
获取地图对象
Map
:
获取样式
Array
:
设置样式聚合点,格式同 opts.styles
(Map)
设置地图中点标记的最大聚合级别
(Number)
级别
海量点类
(Array<MassData>)
海量点数据参数
Name | Description |
---|---|
data.lnglat LngLat
|
经纬度,必填。 |
data.style number
|
样式索引值,默认值:0 |
(Array<MassMarkersOptions>)
海量点参数设置
Name | Description |
---|---|
opts.zIndex number
|
图标叠加层级,值越大层级越高 |
opts.opacity number
|
图标显示透明度,默认值:1 |
opts.zooms Vector
|
海量点显示层级范围,范围外不显示。默认值: [2, 20] |
opts.style (MassMarkersStyleOptions | Array<MassMarkersStyleOptions>)
|
海量点样式列表。 |
opts.style.url string
|
图标 url |
opts.style.size (Vector | Size)
|
图标显示大小 |
opts.style.anchor Pixel
|
锚点位置 |
opts.style.zIndex number
|
点展示优先级,默认为使用样式的索引值。 |
// 创建 MassMarks 实例,[亲手试一试](https://lbs.amap.com/api/jsapi-v2/example/marker/massmarks)
var massMarks = new AMap.MassMarks(data, {
opacity: 0.8,
zIndex: 111,
cursor: 'help',
style: style,
});
// 将海量点实例添加到地图上
map.add(massMarks);
设置显示MassMark的地图对象
(Map)
获取Marker所在地图对象
any
:
输出MassMark的数据集,数据结构同setDatas中的数据集
Array<MassData>
:
设置MassMark展现的数据集
(Array<MassData>)
获取MassMark的显示样式
Array<MassMarkersStyleOptions>
:
设置MassMark的显示样式,可设置单个样式或样式列表,每条数据通过设置的样式索引值获取对应样式
((MassMarkersStyleOptions | Array<MassMarkersStyleOptions>))
获取海量点图层的透明度
number
:
设置海量点图层透明度
(number)
透明度
设置海量点图层叠加顺序
(number)
叠加顺序
获取海量点图层的透明度
number
:
获取海量点图层可见层级范围
Vector
:
设置海量点图层可见层级范围
(Vector)
可见层级范围
显示海量点图层
隐藏海量点图层
清除海量点
触摸开始时触发事件,仅适用移动设备, 数据结构同setDatas中的数据集
触摸结束时触发事件,仅适用移动设备, 数据结构同setDatas中的数据集
鼠标移动
鼠标左键单击事件
鼠标左键单击事件
海量点加载完成事件
鼠标移近海量点时触发事件
鼠标在海量点上按下时触发事件
鼠标在海量点上按下后抬起时触发事件
鼠标移出海量点时触发事件
用于实现点标记沿线段或者路径轨迹移动的动画基类,可用于满足轨迹回放、实时轨迹等场景。MoveAnimation无需单独声明或初始化,Marker、Text、LabelMarker均已继承了 MoveAnimation的实现。
以指定的时长,点标记沿指定的路径移动,加载 AMap.MoveAnimation 后可以使用
(MoveAlongOptions)
moveAlong 动画参数 可选
Name | Description |
---|---|
opts.duration (number | AnimationCallback)
|
每段动画持续时长, 单位:ms |
opts.speed (number | AnimationCallback)
|
每段动画速度,已废弃 |
opts.easing EasingCallback
|
easing 时间函数 |
opts.circlable boolean
|
动画是否循环 |
opts.delay (number | AnimationCallback)
|
延迟动画时长 |
opts.aniInterval number
|
每段完整动画间隔时长 |
opts.autoRotation boolean
|
覆盖物是否沿路径旋转 |
const path = [
new AMap.LngLat(116.397389, 39.909466),
new AMap.LngLat(116.379707, 39.968168),
new AMap.LngLat(116.434467, 39.95001),
new AMap.LngLat(116.46365, 39.979481),
new AMap.LngLat(116.397389, 39.909466),
];
const customData = [
{ position: path[0], duration: 200 },
{ position: path[1], duration: 400 },
{ position: path[2], duration: 600 },
{ position: path[3], duration: 800 },
{ position: path[4], duration: 1000 },
];
AMap.plugin('AMap.MoveAnimation', function(){
const animationMarker = new AMap.Marker({
position: new AMap.LngLat(116.397389,39.909466),
angle: 90,
});
animationMarker.moveAlong(customData);
});
重新启动点标记动画,加载 AMap.MoveAnimation 后可以使用
animationMarker.resumeMove();
停止点标记动画,加载 AMap.MoveAnimation 后可以使用
animationMarker.stopMove();
开启点标记动画,加载 AMap.MoveAnimation 后可以使用
animationMarker.startMove();
以给定时间移动点标记到指定位置,加载 AMap.MoveAnimation 后可以使用
((LngLat | Vector))
指定位置
(MoveToOptions)
moveTo 动画参数
Name | Description |
---|---|
opts.duration number
|
每段动画持续时长, 单位:ms |
opts.speed number
|
动画速度,已废弃 |
opts.easing EasingCallback
|
easing 时间函数 |
opts.autoRotation boolean
|
覆盖物是否沿路径旋转 |
AMap.plugin('AMap.MoveAnimation', function(){
const animationMarker = new AMap.Marker({
position: new AMap.LngLat(116.397389,39.909466),
});
animationMarker.moveTo([116.397389, 39.909466], {
duration: 1000,
delay: 500,
});
});
MoveAnimation 回调函数
Type: function
number
:
时间函数回调
Type: function
(number)
已经过去的时长
number
:
用于在地图上展示复杂的说明性信息的类型
信息窗体,地图仅可同时展示一个信息窗体,推荐为信息窗体通过样式显示设置尺寸。 * // 亲手试一试
(InfoOptions)
信息窗体参数
Name | Description |
---|---|
opts.isCustom boolean
|
是否自定义窗体。设为true时,信息窗体外框及内容完全按照content所设的值添加(默认为false,即在系统默认的信息窗体外框中显示content内容) |
opts.autoMove boolean
|
是否自动调整窗体到视野内(当信息窗体超出视野范围时,通过该属性设置是否自动平移地图,使信息窗体完全显示) |
opts.avoid Array<number>
|
autoMove 为 true 时,自动平移到视野内后的上右下左的避让宽度。默认值: [20, 20, 20, 20] |
opts.closeWhenClickMap boolean
|
控制是否在鼠标点击地图后关闭信息窗体,默认false,鼠标点击地图后不关闭信息窗体 |
opts.content (String | HTMLElement)
|
显示内容,可以是HTML要素字符串或者HTMLElement对象, 自定义窗体示例 |
opts.size Size
|
信息窗体尺寸(isCustom为true时,该属性无效) |
opts.anchor string
|
信息窗体锚点。默认值:'bottom-center'。可选值:'top-left'|'top-center'|'top-right'|'middle-left'|'center'|'middle-right'|'bottom-left'|'bottom-center'|'bottom-right' |
opts.offset (Vector | Pixel)
|
信息窗体显示位置偏移量。默认基准点为信息窗体的底部中心。默认值: [0, 0] |
opts.position (Vector | LngLat)
|
信息窗体显示基点位置 |
var infoWindow = new AMap.InfoWindow({
content: '信息窗体',
anchor: 'bottom-center',
});
// 在地图上打开信息窗体
infoWindow.open(map, [116.397389,39.909466]);
获取信息窗体是否打开
boolean
:
设置信息窗体大小(isCustom为false时有效)
((Size | Vector))
获取信息窗体大小
((HTMLElement | string))
设置信息窗体锚点 默认值:'bottom-center'。可选值:'top-left'|'top-center'|'top-right'|'middle-left'|'center'|'middle-right'|'bottom-left'|'bottom-center'|'bottom-right'
(string)
信息窗体打开之后触发事件
信息窗体关闭之后触发事件
右键菜单 亲手试一试
(OverlayOptions)
右键菜单参数
Name | Description |
---|---|
opts.position (Vector | LngLat)
|
右键菜单显示的位置 |
opts.content (string | HTMLElement)
|
右键菜单内容(针对自定义菜单时,添加菜单内容及功能。可以是HTML要素字符串或者HTML DOM对象。) |
// 创建一个右键菜单实例
var contextMenu = new AMap.ContextMenu();
//右键放大
contextMenu.addItem("放大一级", function () {
var zoom = map.getZoom();
map.setZoom(zoom++);
}, 0);
// 在地图上指定位置打开右键菜单
contextMenu.open(map, [116.397389,39.909466]);
打开右键菜单
(Map)
(Vector)
关闭右键菜单
菜单添加一条内容
菜单移除一条内容
(string)
(EventListener)
右键菜单打开事件
右键菜单关闭事件
用于在地图上绘制线、面等矢量地图要素的类型
构造多边形对象,通过PolygonOptions指定多边形样式
(PolygonOptions)
Name | Description |
---|---|
opts.path (Array<LngLat> | Array<Array<LngLat>> | Array<Array<Array<LngLat>>>)
|
多边形轮廓线的节点坐标数组。
支持 单个普通多边形({Array
|
opts.zIndex number
(default 10 )
|
多边形覆盖物的叠加顺序。地图上存在多个多边形覆盖物叠加时,通过该属性使级别较高的多边形覆盖物在上层显示 |
opts.bubble boolean
(default false )
|
是否将覆盖物的鼠标或touch等事件冒泡到地图上(自v1.3 新增) |
opts.cursor string?
|
指定鼠标悬停时的鼠标样式,自定义cursor,IE仅支持cur/ani/ico格式,Opera不支持自定义cursor |
opts.strokeColor string
(default #00D3FC )
|
线条颜色,使用16进制颜色代码赋值。默认值为#00D3FC |
opts.strokeOpacity number
(default 0.9 )
|
轮廓线透明度,取值范围 [0,1] ,0表示完全透明,1表示不透明。默认为0.9 |
opts.strokeWeight number
(default 2 )
|
轮廓线宽度 |
opts.fillColor string
(default #00B2D5 )
|
多边形填充颜色,使用16进制颜色代码赋值,如:#00B2D5 |
opts.fillOpacity number
(default 0.5 )
|
多边形填充透明度,取值范围 [0,1] ,0表示完全透明,1表示不透明。默认为0.5 |
opts.draggable boolean
(default false )
|
设置多边形是否可拖拽移动,默认为false |
opts.extData object?
|
用户自定义属性,支持JavaScript API任意数据类型,如Polygon的id等 |
opts.strokeStyle (
(default solid )
|
轮廓线样式,实线:solid,虚线:dashed |
opts.strokeDasharray Array<number>?
|
勾勒形状轮廓的虚线和间隙的样式,此属性在strokeStyle 为dashed 时有效, 此属性在ie9+浏览器有效 取值: 实线: [0,0,0] 虚线: [10,10] , [10,10] 表示10个像素的实线和10个像素的空白(如此反复)组成的虚线 点画线: [10,2,10] , [10,2,10] 表示10个像素的实线和2个像素的空白 + 10个像素的实线和10个像素的空白 (如此反复)组成的虚线 |
获取当前多边形的矩形范围对象。
Bounds
:
获取多边形的面积(单位:平方米)
number
:
判断坐标是否在多边形内
(LngLatLike)
boolean
:
true 包含,false 不包含
隐藏多边形
显示多边形
获取用户自定义属性
Object
:
设置用户自定义属性,支持JavaScript API任意数据类型
(Object)
修改多边形属性(样式风格,包括组成多边形轮廓线的节点、轮廓线样式等。属性详情参看PolygonOptions列表)
(PolygonOptions)
触摸开始时触发事件,仅适用移动设备
(MapsEvent)
鼠标移出
(MapsEvent)
鼠标经过
(MapsEvent)
鼠标抬起
(MapsEvent)
鼠标按下
(MapsEvent)
鼠标右键单击事件
(MapsEvent)
鼠标左键单击事件
(MapsEvent)
鼠标左键双击事件
(MapsEvent)
触摸结束时触发事件,仅适用移动设备
(MapsEvent)
触摸移动进行中时触发事件,仅适用移动设备
(MapsEvent)
构造折线对象,支持 lineString 和 MultiLineString
(any)
{PolylineOptions}
Name | Description |
---|---|
opts.path (Array<LngLat> | Array<Array<LngLat>>)
|
polyline 路径,支持 lineString 和 MultiLineString |
opts.zIndex number
(default 10 )
|
多边形覆盖物的叠加顺序。地图上存在多个多边形覆盖物叠加时,通过该属性使级别较高的多边形覆盖物在上层显示 |
opts.bubble boolean
(default false )
|
是否将覆盖物的鼠标或touch等事件冒泡到地图上(自v1.3 新增) |
opts.cursor string?
|
指定鼠标悬停时的鼠标样式,自定义cursor,IE仅支持cur/ani/ico格式,Opera不支持自定义cursor |
opts.strokeColor string
(default #00D3FC )
|
线条颜色,使用16进制颜色代码赋值。默认值为#00D3FC |
opts.strokeOpacity number
(default 0.5 )
|
轮廓线透明度,取值范围 [0,1] ,0表示完全透明,1表示不透明。默认为0.5 |
opts.strokeWeight number
(default 2 )
|
轮廓线宽度 |
opts.borderWeight number
(default 2 )
|
描边线宽度 |
opts.isOutline boolean
(default false )
|
是否显示描边,默认false |
opts.borderWeight number
(default 1 )
|
描边的宽度,默认为1 |
opts.outlineColor string
(default #00B2D5 )
|
线条描边颜色,此项仅在isOutline为true时有效,默认:#00B2D5 |
opts.draggable boolean
(default false )
|
设置多边形是否可拖拽移动,默认为false |
opts.extData object?
|
用户自定义属性,支持JavaScript API任意数据类型,如Polygon的id等 |
opts.strokeStyle (
(default solid )
|
轮廓线样式,实线:solid,虚线:dashed |
opts.strokeDasharray Array<number>?
|
勾勒形状轮廓的虚线和间隙的样式,此属性在strokeStyle 为dashed 时有效, 此属性在ie9+浏览器有效 取值: 实线: [0,0,0] 虚线: [10,10] , [10,10] 表示10个像素的实线和10个像素的空白(如此反复)组成的虚线 点画线: [10,2,10] , [10,2,10] 表示10个像素的实线和2个像素的空白 + 10个像素的实线和10个像素的空白 (如此反复)组成的虚线 |
opts.lineJoin (
(default miter )
|
折线拐点的绘制样式,默认值为'miter'尖角,其他可选值:'round'圆角、'bevel'斜角 |
opts.lineCap (
(default butt )
|
折线两端线帽的绘制样式,默认值为'butt'无头,其他可选值:'round'圆头、'square'方头 |
opts.geodesic boolean
(default false )
|
是否绘制成大地线,默认false |
opts.showDir boolean
(default false )
|
是否延路径显示白色方向箭头,默认false。建议折线宽度大于6时使用 |
获取折线的总长度(单位:米)
number
:
隐藏折线
显示折线
获取用户自定义属性
Object
:
设置用户自定义属性,支持JavaScript API任意数据类型
(Object)
获取线的属性
PolylineOptions
:
修改折线属性(包括路径的节点、线样式、是否绘制大地线等。属性详情参看PolylineOptions列表)
(PolylineOptions)
判断坐标是否在折线内
(LngLatLike)
boolean
:
鼠标移出
(MapsEvent)
鼠标右键单击事件
(MapsEvent)
鼠标左键双击事件
(MapsEvent)
鼠标左键单击事件
(MapsEvent)
鼠标经过
(MapsEvent)
触摸结束时触发事件,仅适用移动设备
(MapsEvent)
触摸移动进行中时触发事件,仅适用移动设备
(MapsEvent)
触摸开始时触发事件,仅适用移动设备
(MapsEvent)
鼠标抬起
(MapsEvent)
鼠标按下
(MapsEvent)
贝塞尔曲线
(BezierCurveOptions)
BezierCurve配置项
Name | Description |
---|---|
opts.path Array
|
贝瑟尔曲线的路径。描述为一个二维数组规则如下:第一个元素是起点, 之后的元素同时描述控制点和途经点,之后每个元素可以有0个到2个控制点 控制点在前,途经点在最后 [ [lng,lat] ,//起点0 [lng,lat,lng,lat,lng,lat] ,//控制 |