地图 JSAPI 2.0

基础类

经纬度、像素、边界、大小、这些是地图 JSAPI 开发必须了解的基本类型

AMap.LngLat

经纬度坐标,用来描述地图上的一个点位置, 目前高德地图使用的是 GCJ-02 坐标,如果你采集的是 WGS84 坐标,请先进行坐标转换

new AMap.LngLat(lng: Number?, lat: Number?, noWrap: Boolean?)
参数说明:
lng (Number?) 经度值
lat (Number?) 纬度值
noWrap (Boolean?) 是否自动将经度值修正到 [-180,180] 区间内,缺省时为false。
noWrap 为false时传入 [190,30] ,会被自动修正为 [-170,30] , noWrap 为true时不会自动修正,可以用来进行跨日期限的覆盖物绘制
示例代码:
var lnglat = new AMap.LngLat(116, 39);
成员函数:
lat
lng
setLng(lng)
setLat(lat)
getLng()
getLat()
equals(another)
add(another, noWrap)
subtract(another, noWrap)
offset(E, N)
toString()
toArray()
distance()

AMap.Bounds

地物对象的经纬度矩形范围。

new AMap.Bounds(southWest: LngLat, northEast: LngLat)
参数说明:
southWest (LngLat) 西南角经纬度
northEast (LngLat) 东北角经纬度值
成员函数:
getSouthWest()
getNorthEast()
getNorthWest()
getSouthEast()
contains(obj)
getCenter()
toString()

AMap.Pixel

像素坐标,确定地图上的一个像素点。

new AMap.Pixel(x: number, y: number)
参数说明:
x (number)
y (number)
成员函数:
getX()
getY()
toString()
equals(point)

AMap.Size

地物对象的像素尺寸

new AMap.Size(width: number, height: number)
参数说明:
width (number) 宽度
height (number) 高度
成员函数:
getWidth()
getHeight()
toString()

事件

地图 JSAPI 具有完备的事件体系,在 2.0 版本中所有类型的实例均使用 on/off 方法进行事件的绑定和移除

Event

JSAPI 的所有类型(地图、图层、覆盖物等)都实现了事件接口,用于给当前实例对象绑定、移除、清理事件回调

示例代码:
// 声明点击事件的回调函数
function onClick(e){
    console.log(e);
}
// 给地图实例绑定点击事件 onClick
map.on('click', onClick);

// 移除地图实例的 onClick 事件绑定
map.off('click', onClick);

// 清除地图实例上的所有 click 事件绑定
map.clearEvents('click');

// 覆盖物绑定鼠标移动事件
polygon.on('mousemove',console.log);

// 覆盖物绑定事件判断
polygon.hasEvents('mousemove',console.log);
成员函数:
on(type, function, context, once)
off(type, function, context)
hasEvents(type, function, context)
clearEvents(type)
emit(type, data)

地图

AMap.Map

地图对象类,封装了地图的属性设置、图层变更、事件交互等接口的类。
相关示例

new AMap.Map(div: (String | HTMLDivElement), opts: MapOptions)
参数说明:
div ((String | HTMLDivElement)) 构造一个地图对象,参数 container 中传入地图容器 DIVID 值或者 DIV 对象, Options 地图初始化参数对象,参数详情参看 MapOptions 列表。注意:地图容器在创建之前必须拥有实际大小,否则可能出现底图无法渲染的问题。
opts (MapOptions) 地图初始化参数
属性 描述
opts.center
类型:([Number, Number] | LngLat)?
初始地图中心经纬度。
opts.zoom
类型:Number?
初始地图缩放级别。可以设置为浮点数;若 centerlevel 未赋值,地图初始化默认显示用户所在当前城市范围。
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.terrain
类型:Boolean
default false
初始地图是否展示地形,此属性适用于 3D 地图。默认为值 false 不展示地形,可选 true ,选择 true 会展示地形效果。(注意:此属性适用于 JSAPI v2.1Beta 及以上版本)。
opts.features
类型:Array<String>
default ['bg','point','road','building']
设置地图上显示的元素种类, 支持 'bg' (地图背景)、 'point' (POI点)、 'road' (道路)、 'building' (建筑物)
opts.layers
类型:Array<Layer>
地图图层数组,数组可以是图层 中的一个或多个,默认为普通二维地图。当叠加多个图层,
如:' https://lbs.amap.com/api/jsapi-v2/documentation#tilelayer ' 时,普通二维地图需通过实例化一个 TileLayer 类实现。
如果你希望创建一个默认底图图层,使用 AMap.createDefaultLayer();
opts.zooms
类型:[Number, Number]
default [2,20]
地图显示的缩放级别范围, 默认为 [2, 20] ,取值范围 [2 ~ 26]
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 应符合 CSScursor 属性规范。
opts.isHotspot
类型:Boolean?
是否开启地图热点和标注的 hover 效果。PC端默认是 true , 移动端默认是 false
opts.mapStyle
类型:String?
设置地图的显示样式,目前支持两种地图样式:
  • 第一种:自定义地图样式,如:
  • amap://styles/d6bf8c1d69cea9f5c696185ad4ac4c86.
    可前往地图自定义平台定制自己的个性地图样式;
    第二种:官方样式模版,如:
  • amap://styles/normal
  • amap://styles/grey
  • amap://styles/whitesmoke
  • amap://styles/dark
  • amap://styles/light
  • amap://styles/graffiti.
    其他模版样式及自定义地图的使用说明见开发指南。
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.labelRejectMask
类型:Boolean
default false
文字是否拒绝掩模图层进行掩模
opts.mask
类型:Array<Number>
Map 实例指定掩模的路径,各图层将只显示路径范围内图像, 3D 视图下有效。 格式为一个经纬度的一维、二维或三维数组。
[相关示例] 如:' https://lbs.amap.com/api/jsapi-v2/example/3d/mask '
一维数组时代表一个普通多边形路径,如:
  • [[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]] ] ].
opts.WebGLParams
类型:Object
default {}
额外配置的 WebGL 参数 eg: preserveDrawingBuffer
示例代码:
var map = new AMap.Map('map', {
  viewMode: '3D',
  center: [116.397083, 39.874531],
  layers: [
             AMap.createDefaultLayer()
          ],  // layers 字段为空或者不赋值将会自动创建默认底图。
  zoom: 12,
})
成员函数:
resize()
center(center, immediately, duration)
setCenter(center, immediately, duration?)
zoom(zoom, center, immediately, duration)
setZoomAndCenter(zoom, center, immediately, duration?)
getBounds()
getCenter()
setZoom(zoom, immediately, duration?)
getContainer()
getSize()
getZoom(digits)
zoomIn()
addLayer(layer)
zoomOut()
getPitch()
setPitch(Pitch, immediately, duration?)
getRotation()
setRotation(rotation, immediately, duration?)
removeLayer(layer)
setBounds(bounds, immediately, avoid)
panTo(lnglat, duration?)
setLayers(layers)
getLayers()
panBy(x, y, duration?)
getStatus()
setStatus(status)
add(features)
getDefaultCursor()
setDefaultCursor(cursor)
remove(features)
destroy()
lngLatToCoords(lnglat)
coordsToLngLat(coords)
getLimitBounds()
lngLatToContainer(lnglat)
setLimitBounds()
clearLimitBounds()
getAltitude(lnglat)
getZooms()
setZooms(zooms)
containerToLngLat(pixel)
coordToContainer(coord)
containerToCoord(pixel)
getAltitudeByContainer(pixel)
pixelToLngLat(pixel, zoom?)
lngLatToPixel(lnglat, zoom?)
getResolution()
getScale(dpi)
getCity(getCityCallBack, lnglat)
setCity(cityName)
setFitView(overlays, immediately, avoid, maxZoom)
getFitZoomAndCenterByOverlays(overlays, avoid, maxZoom)
getFitZoomAndCenterByBounds(bounds, avoid, maxZoom)
addControl(control)
removeControl(control)
setMapStyle(value)
getMapStyle()
getAllOverlays(type?)
clearMap()
clearInfoWindow()
getFeatures()
setFeatures(features)
getMapApprovalNumber()
setMask(maskPath)
setLabelRejectMask(reject)
事件:
resize
complete
click
dblclick
mapmove
hotspotclick
hotspotover
hotspotout
movestart
moveend
zoomchange
zoomstart
zoomend
rotatechange
rotatestart
rotateend
mousemove
mousewheel
mouseover
mouseout
mouseup
mousedown
rightclick
dragstart
dragging
dragend
touchstart
touchmove
touchend

MapsEvent

此对象用于表示地图、覆盖物、叠加层上的各种鼠标事件返回,包含以下字段:

Type: Object

属性说明:
lnglat (LngLat) : 发生事件时光标所在处的经纬度坐标。
pixel (Pixel) : 发生事件时光标所在处的像素坐标。
type (string) : 事件类型。
target (Object) : 发生事件的目标对象,不同类型返回target不同。例如,事件对象是Marker,则target表示目标对象为Marker,事件对象是其他,则随之改变。

高德官方图层

由高德官方提供数据或图像的地图图层

AMap.TileLayer

切片图层类,该类为基础类。
相关示例

new AMap.TileLayer(opts: TileLayerOptions)
参数说明:
opts (TileLayerOptions)
属性 描述
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,30]
支持的缩放级别范围,默认范围 [2-30]
opts.dataZooms
类型:[Number, Number]
default [2,30]
数据支持的缩放级别范围,默认范围 [2-30]
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
成员函数:
setTileUrl(url)
reload()
getOptions()
getzIndex()
setzIndex(zIndex)
getOpacity()
setOpacity(opacity)
getZooms()
setZooms(zooms)
show()
hide()
事件:
complete

AMap.TileLayer.Traffic

实时交通图层类,继承自TileLayer。
相关示例

new AMap.TileLayer.Traffic(opts: TrafficLayerOptions)
参数说明:
opts (TrafficLayerOptions)
属性 描述
opts.autoRefresh
类型:Boolean
是否自动更新数据,默认开启
opts.interval
类型:Number
自动更新数据的间隔毫秒数,默认 180ms
opts.zooms
类型:[Number, Number]
default [2,30]
支持的缩放级别范围,默认范围 [2-30]
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
成员函数:
stopFresh()
getOptions()
getzIndex()
setzIndex(zIndex)
getOpacity()
setOpacity(opacity)
getZooms()
setZooms(zooms)
show()
hide()
事件:
complete

AMap.TileLayer.Satellite

卫星图层类,继承自 TileLayer。 相关示例

new AMap.TileLayer.Satellite(opts: SatelliteLayerOptions)
参数说明:
opts (SatelliteLayerOptions)
属性 描述
opts.zooms
类型:[Number, Number]
default [2,30]
支持的缩放级别范围,默认范围 [2-30]
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
成员函数:
getOptions()
getzIndex()
setzIndex(zIndex)
getOpacity()
setOpacity(opacity)
getZooms()
setZooms(zooms)
show()
hide()
destroy()
事件:
complete

AMap.TileLayer.RoadNet

路网图层,展示道路信息
相关示例

new AMap.TileLayer.RoadNet(opts: RoadnetLayerOptions)
参数说明:
opts (RoadnetLayerOptions)
属性 描述
opts.zooms
类型:[Number, Number]
default [2,30]
支持的缩放级别范围,默认范围 [2-30]
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
成员函数:
show()
hide()
getOptions()
getzIndex()
setzIndex(zIndex)
getOpacity()
setOpacity(opacity)
getZooms()
setZooms(zooms)
destroy()
事件:
complete

AMap.Buildings

建筑楼块 3D 图层
相关示例

new AMap.Buildings(opts: BuildingLayerOpts)
参数说明:
opts (BuildingLayerOpts)
属性 描述
opts.wallColor
类型:(Array<String> | String)
楼块侧面颜色,支持 rgba、rgb、十六进制等
opts.roofColor
类型:(Array<String> | String)
楼块顶面颜色,支持 rgba、rgb、十六进制等
opts.heightFactor
类型:Number
楼块的高度系数因子,默认为 1,也就是正常高度
opts.styleOpts
类型: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
示例代码:
var buildingLayer = new AMap.Buildings({
    heightFactor: 1,
    wallColor: [255, 0, 0, 1],
    roofColor: 'rgba(0,0,255,0.5)',
});
map.addLayer(buildingLayer);
成员函数:
setStyle(styleOpts)
getOptions()
getzIndex()
setzIndex(zIndex)
getOpacity()
setOpacity(opacity)
getZooms()
setZooms(zooms)
show()
hide()
destroy()

AMap.DistrictLayer

new AMap.DistrictLayer(opts: DistrictLayerOptions)
参数说明:
opts (DistrictLayerOptions) 图层初始化参数
属性 描述
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 | Function)
default 1
描边线宽
opts.styles.zIndex
类型:(Number | Function)
default 0
图层中每个区域层级,数值越大,层级越高
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]
填充色
静态方法:
World
Country
Province
成员函数:
setSOC(SOC)
setDistricts(adcodes)
getDistricts()
setStyles(styles)
getStyles()
setAdcode(adcodes)
getOptions()
getzIndex()
setzIndex(zIndex)
getOpacity()
setOpacity(opacity)
getZooms()
setZooms(zooms)
show()
hide()

AMap.IndoorMap

室内图层,用于在适当级别展示室内地图,并提供显示商铺tip、切换楼层等功能。

new AMap.IndoorMap(opts: IndoorMapOptions)
参数说明:
opts (IndoorMapOptions)
属性 描述
opts.zIndex
类型:Number
室内图层叠加的顺序值
opts.opacity
类型:Number
图层的透明度,取值范围 [0,1]
opts.cursor
类型:String
指定鼠标悬停到店铺面时的鼠标样式
opts.hideFloorBar
类型:Boolean
是否隐藏楼层切换控件,默认值:false
示例代码:
用法一:创建独立的室内图层
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 室内信息
})
成员函数:
showIndoorMap(indoorid, floor, shopid)
showFloor(floor)
show()
hide()
setMap(map)
setzIndex(index)
showFloorBar()
hideFloorBar()
setOpacity(opacity)
getOpacity()
showLabels()
hideLabels()
getSelectedBuildingId()
getSelectedBuilding()

行业标准图层

符合 OGC 标准或者行业通行规范的的图层类型

AMap.TileLayer.WMS

用于加载OGC标准的WMS地图服务的一种图层类,仅支持EPSG3857坐标系统的WMS图层。
查看 WMS的OGC标准

new AMap.TileLayer.WMS(opts: WMSLayerOptions)
参数说明:
opts (WMSLayerOptions) 默认图层参数
属性 描述
opts.url
类型:String
wmts服务的url地址,如:' https://services.arcgisonline.com/arcgis/rest/services/'+ 'Demographics/USA_Population_Density/MapServer/WMTS/'
opts.blend
类型:Boolean
地图级别切换时,不同级别的图片是否进行混合,如图层的图像内容为部分透明请设置为false
opts.params
类型: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,30]
支持的缩放级别范围,默认范围 [2-30]
opts.opacity
类型:Number
default 1
透明度,默认 1
opts.visible
类型:Boolean
default true
是否显示,默认 true
opts.zIndex
类型:Number
default 4
图层叠加的顺序值,1 表示最底层。默认 zIndex:4
成员函数:
setParams(params)
getParams()
setUrl(url)
setUrl(url)
getOptions()
getzIndex()
setzIndex(zIndex)
getOpacity()
setOpacity(opacity)
getZooms()
setZooms(zooms)
show()
hide()
事件:
complete

AMap.TileLayer.WMTS

用于加载 OGC 标准的 WMTS 地图服务的一种图层类,仅支持 EPSG3857 坐标系统的 WMTS 图层
查看 WMTS 标准
相关示例

new AMap.TileLayer.WMTS(opts: WMTSLayerOptions)
参数说明:
opts (WMTSLayerOptions) 默认图层参数
属性 描述
opts.url
类型:String
wms服务的url地址,如' https://ahocevar.com/geoserver/wms '
opts.blend
类型:Boolean
地图级别切换时,不同级别的图片是否进行混合,如图层的图像内容为部分透明请设置为false
opts.params
类型: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,30]
支持的缩放级别范围,默认范围 [2-30]
opts.opacity
类型:Number
default 1
透明度,默认 1
opts.visible
类型:Boolean
default true
是否显示,默认 true
opts.zIndex
类型:Number
default 4
图层叠加的顺序值,1 表示最底层。默认 zIndex:4
成员函数:
setParams(params)
getParams()
getUrl()
setUrl(url)
getOptions()
getzIndex()
setzIndex(zIndex)
getOpacity()
setOpacity(opacity)
getZooms()
setZooms(zooms)
show()
hide()
事件:
complete

AMap.MapboxVectorTileLayer

为了满足基于矢量瓦片块的数据可视化、矢量瓦片边界展示等开发需求,通过 AMap.MapboxVectorTileLayer 插件提供了简易矢量瓦片图层
此图层可以使用标准的 MVT 瓦片服务作为数据源。
可以配合GeoHub-数据中心发布的矢量瓦片服务。 注意:使用高德数据平台发布服务,由于服务 URL 地址是明文,建议自行做服务代理转发,防止服务 ID 和 Key 明文传输导致数据泄露。
相关示例

new AMap.MapboxVectorTileLayer(opts: MapboxVTLayerOptions)
参数说明:
opts (MapboxVTLayerOptions) 图层初始化参数
属性 描述
opts.zIndex
类型:Number
default 80
图层的层级
opts.opacity
类型:Number
default 1
图层透明度
opts.url
类型:String?
MVT 数据的链接地址
opts.visible
类型:Boolean
default true
图层是否可见
opts.zooms
类型:[number, number]
default [2,22]
图层缩放等级范围
opts.dataZooms
类型:[number, number]
default [2,18]
瓦片数据等级范围,超过范围会使用最大/最小等级的数据
opts.styles
类型:MapboxVTLayerStyle
opts.styles.polygon
类型:PolygonStyle?
面类型的样式
opts.styles.polygon.sourceLayer
类型:String
default 'default'
使用数据中的哪个图层,默认使用 default 图层
opts.styles.polygon.color
类型:(String | Function)?
面填充颜色
opts.styles.polygon.borderWidth
类型:(Number | Function)?
描边宽度
opts.styles.polygon.dash
类型:(Array<Number> | Function)?
描边线的虚线配置,例如: [10,5,8,5]
opts.styles.polygon.borderColor
类型:(String | Function)?
描边颜色
opts.styles.polygon.injection
类型:Array<Any>?
其他属性值中对于函数形式的值,假如需要获取外部变量,要使用数组的形式传入,便于在函数内部访问外部变量。请看下面的示例。
opts.styles.polygon.visible
类型:(Boolean | Function)?
是否显示
opts.styles.line
类型:LineStyle?
线类型数据的样式
opts.styles.line.sourceLayer
类型:String
default 'default'
使用数据中的哪个图层,默认使用 default 图层
opts.styles.line.color
类型:(String | Function)?
线填充颜色
opts.styles.line.lineWidth
类型:(Number | Function)?
宽度
opts.styles.line.dash
类型:(String | Function)?
虚线配置,例如: [10,5,8,5]
opts.styles.line.injection
类型:Array<Any>?
其他属性值中对于函数形式的值,假如需要获取外部变量,要使用数组的形式传入,便于在函数内部访问外部变量。请看下面的示例。
opts.styles.line.visible
类型:(Boolean | Function)?
是否显示
opts.styles.point
类型:PointStyle?
点类型数据的样式
opts.styles.point.sourceLayer
类型:String
default 'default'
使用数据中的哪个图层,默认使用 default 图层
opts.styles.point.radius
类型:(String | Function)?
圆点的半径,单位像素
opts.styles.point.color
类型:(Number | Function)?
圆的填充颜色
opts.styles.point.borderWidth
类型:(String | Function)?
描边的宽度
opts.styles.point.borderColor
类型:(String | Function)?
描边的颜色
opts.styles.point.injection
类型:Array<Any>?
其他属性值中对于函数形式的值,假如需要获取外部变量,要使用数组的形式传入,便于在函数内部访问外部变量。请看下面的示例。
opts.styles.point.visible
类型:(Boolean | Function)?
是否显示
opts.styles.polyhedron
类型:PolyhedronStyle?
多面体类型的样式
opts.styles.polyhedron.sourceLayer
类型:String
default 'default'
使用数据中的哪个图层,默认使用 default 图层
opts.styles.polyhedron.topColor
类型:(String | Function)?
顶面颜色
opts.styles.polyhedron.sideColor
类型:(String | Function)?
侧面颜色
opts.styles.polyhedron.texture
类型:(String | Function)?
侧面纹理,优先级高于侧面颜色
opts.styles.polyhedron.injection
类型:Array<Any>?
其他属性值中对于函数形式的值,假如需要获取外部变量,要使用数组的形式传入,便于在函数内部访问外部变量。请看下面的示例。
opts.styles.polyhedron.visible
类型:(Boolean | Function)?
是否显示
示例代码:
var globalVar = ['这是', '一个', '外部', '变量'];
var mvtl = new AMap.MapboxVectorTileLayer({
     zIndex: 150,
     opacity: 1,
     // URL可以使用数据服务平台的服务,也可以使用自己发布的 MVT 数据服务
     url: 'https://restapi.amap.com/rest/lbs/geohub/tiles/mvt?z=[z]&x=[x]&y=[y]&size=512&key=您申请的key值&id=数据服务ID',
     dataZooms: [2, 18],
     zooms: [2, 20],
     tileSize: 256,
     styles: {
         point: {
             sourceLayer: 'default',
             visible: function (f, inject) {
                 // 这里的 inject 参数就是一个数组,他的值就是 injection 字段的数组值:[visis]。
                 return inject[0].indexOf('这是') > -1;
             },
             injection: [globalVar],
             radius: function (props) {
                 return Math.random() * 20 + 5;
             },
             color: 'red',
             borderWidth: 20 || function (props) {
                 return Math.random() * 5 + 2;
             },
             borderColor: 'rgba(255,255,255,1)',
         },
         polygon: {
             sourceLayer: 'default',
             color: function (props) {
                 return 'rgba(0,0,0,1)';
             },
             dash: [10, 0, 10, 0],
             borderColor: 'rgba(30,112,255,1)',
             borderWidth: 5,
         },
         line: {
             sourceLayer: 'default',
             color: 'rgba(20,140,40,1)',
             lineWidth: 5,
             dash: [10, 0, 10, 0],
         },
         polyhedron: {
             sourceLayer: 'default',
             topColor: 'rgba(230,230,230,0.9)',
             sideColor: 'rgba(240,240,240,0.9)',
         },
     }
 });
成员函数:
setStyles(styles)
filterByRect(rect, type)
getStyles()
on(type, fn, option)
hide()
hide()
getOptions()
getzIndex()
setzIndex(zIndex)
getOpacity()
setOpacity(opacity)
getZooms()
setZooms(zooms)
show()

自有数据图层

用于加载展示开发者自己拥有的数据或者图像的图层类型

AMap.HeatMap

热力图,基于第三方heatmap.js实现,以特殊高亮的形式显示数据密集程度。根据密集程度的不同,图上会呈现不同的颜色,以直观的形式展现数据密度。API引用了heatmap.js最新版本v2.0,v2.0基于新的渲染模型,具有更高的渲染效率和更强的性能。支持chrome、firefox、safari、ie9及以上浏览器。

new AMap.HeatMap(map: Map, opts: HeatMapOptions)
参数说明:
map (Map) 要叠加热力图的地图对象
opts (HeatMapOptions) 热力图属性配置
属性 描述
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});
});
成员函数:
getMap()
setMap(map)
getOptions()
setOptions(options)
getDataSet()
setDataSet(dataset)
addDataPoint(longitude, latitude, count)
getzIndex()
setzIndex(zIndex)
show()
hide()

AMap.VectorLayer

new AMap.VectorLayer(opts: Object)
参数说明:
opts (Object)
属性 描述
opts.visible
类型:boolean
default true
是否显示
opts.zIndex
类型:number
default 110
是否显示
示例代码:
var layer = new AMap.VectorLayer();
map.add(layer);
var circle = new AMap.circle({center: [116.4, 39.9], radius:1000});
layer.add(circle);
成员函数:
add(vectors)
remove(vectors)
show()
hide()
has
clear()
setOptions(opt)
query(geometry)
getBounds()

AMap.LabelsLayer

标注层

new AMap.LabelsLayer(opts: LabelsLayerOptions)
参数说明:
opts (LabelsLayerOptions) 标注层参数
属性 描述
opts.visible
类型:boolean
标注层是否可见,默认值:true
opts.zIndex
类型:number
标注层与其它图层的叠加顺序,默认值:120
opts.opacity
类型:number
标注层透明度
opts.collision
类型:boolean
标注层内的标注是否避让
opts.allowCollision
类型:boolean
标注层内的标注是否允许其它标注层对它避让
opts.zooms
类型:[number, number]
标注层展示层级范围
示例代码:
// 创建一个标注层实例
var labelsLayer = new AMap.LabelsLayer({
     collision: true,
     opacity: 1,
     zIndex: 120,
     allowCollision: true,
});
// 将标注层添加到地图上
map.add(labelsLayer);
成员函数:
getCollision()
setCollision(collision)
getAllowCollision()
setAllowCollision(allowCollision)
getOpacity()
setOpacity(opacity)
getZooms()
setZooms(zooms)
getzIndex()
setzIndex(zIndex)
add(labelMarkers)
remove(labelMarkers)
clear()
show()
hide()
getAllOverlays()

AMap.CustomLayer

自定义图层是一种完全由开发者来指定绘制方法的图层
相关示例

new AMap.CustomLayer(canvas: HTMLCanvasElement, opts: CustomLayerOption)
参数说明:
canvas (HTMLCanvasElement) canvas 对象
opts (CustomLayerOption) 默认图层参数
属性 描述
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
opts.alwaysRender
类型:Boolean
default false
是否主动
示例代码:
var cLayer = new AMap.CustomLayer(canvas, {
     zooms: [2, 18],
     zIndex: 120,
     render() {
         // 对 canvas 进行绘制
     }
})
成员函数:
getOptions()
getzIndex()
setzIndex(zIndex)
setzIndex
getOpacity()
setOpacity(opacity)
getZooms()
setZooms(zooms)
show()
hide()
setMap

AMap.TileLayer.Flexible

灵活切片图层,继承自AMap.TileLayer,开发者可通过构造时传入给其传入createTile字段来指定每一个切片的内容
相关示例

new AMap.TileLayer.Flexible(opts: FlexibleLayerOptions)
参数说明:
opts (FlexibleLayerOptions)
属性 描述
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,30]
支持的缩放级别范围,默认范围 [2-30]
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
成员函数:
getOptions()
getzIndex()
setzIndex(zIndex)
getOpacity()
setOpacity(opacity)
getZooms()
setZooms(zooms)
show()
hide()
destroy()
事件:
complete

AMap.ImageLayer

图片图层类,用户可以将一张静态图片作为图层添加在地图上,图片图层会随缩放级别而自适应缩放。
相关示例

new AMap.ImageLayer(opts: ImageLayerOptions)
参数说明:
opts (ImageLayerOptions) 传入默认参数列表
属性 描述
opts.url
类型:String
图片地址链接
opts.zooms
类型:[Number, Number]
default [2,30]
图层缩放等级范围,默认 [2, 30]
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]
 });
成员函数:
getImageUrl()
setImageUrl(url)
getBounds()
setBounds()
getOptions()
getzIndex()
setzIndex(zIndex)
getOpacity()
setOpacity(opacity)
getZooms()
setZooms(zooms)
show()
hide()
事件:
complete

AMap.CanvasLayer

Canvas图层类,用户可以将一个 Canvas 作为图层添加在地图上,Canvas图层会随缩放级别而自适应缩放。
相关示例

new AMap.CanvasLayer(opts: ImageLayerOptions)
参数说明:
opts (ImageLayerOptions) 传入默认参数列表
属性 描述
opts.canvas
类型:HTMLCanvasElement
Canvas DOM 对象
opts.zooms
类型:[Number, Number]
default [2,30]
图层缩放等级范围,默认 [2, 30]
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
成员函数:
setCanvas(canvas)
getElement()
getBounds()
setBounds()
reFresh()
getOptions()
getzIndex()
setzIndex(zIndex)
getOpacity()
setOpacity(opacity)
getZooms()
setZooms(zooms)
show()
hide()

AMap.GLCustomLayer

3d 自定义图层

new AMap.GLCustomLayer(opts: GlCustomLayerOptions)
参数说明:
opts (GlCustomLayerOptions)
属性 描述
opts.init
类型:Function
初始化的时候,开发者可以在这个函数参数里面获取 gl 上下文,进行一些初始化的操作。
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 glCustomLayer = new GLCustomLayer({
    init: function(gl){
        // init shader or sth...
    },
    render: function(gl, state){
        // render every frame
    },
});
成员函数:
getMap()
getzIndex()
setzIndex(zIndex)
getOpacity()
setOpacity(opacity)
getZooms()
setZooms(zooms)
show()
hide()

点标记

用于在地图上添加点状地图要素的类型

AMap.Marker

点标记

new AMap.Marker(opts: MarkerOptions)
参数说明:
opts (MarkerOptions) 点标记参数
属性 描述
opts.map
类型:Map
要显示该marker的地图对象
opts.position
类型:(Vector2 | 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
类型:(Vector2 | Pixel)
点标记显示位置偏移量,默认值为 [0,0] 。Marker指定position后,默认以marker左上角位置为基准点(若设置了anchor,则以anchor设置位置为基准点),对准所给定的position位置,若需使marker指定位置对准在position处,需根据marker的尺寸设置一定的偏移量。
opts.anchor
类型:(string | Vector2)
设置点标记锚点,可选值:'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
类型:Vector2
点标记显示的层级范围,超过范围不显示。默认值:zooms: [2, 20]
opts.cursor
类型:string
指定鼠标悬停时的鼠,默认值:'pointer'
opts.topWhenClick
类型:boolean
鼠标点击时marker是否置顶,默认false ,不置顶
opts.height
类型:number
设置Marker点是否离地绘制,默认值为0,等于0时贴地绘制。大于0时离地绘制,此时Marker点高度等于height值加Marker点高程值(JSAPI v2.1新增属性目前只适用于v2.1版本)。
opts.label
类型:object
添加文本标注
opts.label.content
类型:string
文本标注的内容
opts.label.offset
类型:(Pixel | Vector2 | 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);
成员函数:
getTitle()
getHeight()
getIcon()
setIcon(icon)
getLabel()
setLabel(opts)
getClickable()
setClickable(clickable)
getDraggable()
setDraggable(draggable)
getTop()
setTop(isTop)
getCursor()
setCursor(cursor)
getExtData()
setExtData(extData)
remove()
moveTo(targetPosition, opts)
moveAlong(path, opts)
startMove()
stopMove()
pauseMove()
resumeMove()
getMap()
setMap(map)
addTo(map)
add(map)
show()
hide()
getPosition()
setPosition(position)
getAnchor()
setAnchor(anchor)
getOffset()
setOffset(offset)
getAngle()
setAngle(angle)
getSize()
setSize(size)
getzIndex()
setzIndex(zIndex)
getOptions()
getContent()
setContent(content)
getBounds()
事件:
click
dblclick
rightclick
mousemove
mouseover
mouseout
mousedown
mouseup
dragstart
dragging
dragend
moving
moveend
movealong
touchstart
touchmove
touchend

AMap.Text

文本标记

new AMap.Text(opts: TextOptions)
参数说明:
opts (TextOptions) 文本参数
属性 描述
opts.map
类型:Map
要显示该marker的地图对象
opts.position
类型:LngLat
点标记在地图上显示的位置
opts.text
类型:LabelOptions
标记显示的文本内容
opts.title
类型:string
鼠标滑过点标记时的文字提示
opts.visible
类型:boolean
点标记是否可见,默认为true
opts.zIndex
类型:number
点标记的叠加顺序
opts.offset
类型:Pixel
点标记显示位置偏移量,默认值 [0, 0] 。 图解说明
opts.anchor
类型:string
设置点标记锚点。默认值:'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
类型:Array
点标记显示的层级范围,超过范围不显示。默认值: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);
成员函数:
getText
setText
setStyle
getTitle()
setTitle(title)
getClickable()
setClickable(clickable)
getDraggable()
getMap()
setMap(map)
addTo(map)
add(map)
show()
hide()
getPosition()
setPosition(position)
getAnchor()
setAnchor(anchor)
getOffset()
setOffset(offset)
getAngle()
setAngle(angle)
getzIndex()
setzIndex(zIndex)
getOptions()
getBounds()
moveTo(targetPosition, opts)
moveAlong(path, opts)
startMove()
stopMove()
pauseMove()
resumeMove()
setDraggable(draggable)
getTop()
setTop(isTop)
getCursor()
setCursor(cursor)
getExtData()
setExtData(extData)
remove()
事件:
click
dblclick
rightclick
mousemove
mouseover
mouseout
mousedown
mouseup
dragstart
dragging
dragend
moving
moveend
movealong
touchstart
touchmove
touchend

AMap.Icon

Icon类 表示点标记的图标 用于添加复杂点标记,即在普通点标记的基础上,添加Icon类,通过在Icon表示的大图上截取其中一部分作为标注的图标 构造点覆盖物图标,通过IconOptions设置图标属性

new AMap.Icon(opts: IconOpts)
参数说明:
opts (IconOpts) 点覆盖物图标,通过IconOptions设置图标属性
属性 描述
opts.size
类型:(Size | Vector2)
= [36,36] 图标尺寸,默认值(36,36)
opts.imageOffset
类型:(Pixel | Vector2)
图标取图偏移量。当image中指定了一个大图时,可通过size和imageOffset配合,显示图标的指定范围
opts.image
类型:string
图标的取图地址。默认为蓝色图钉图片
opts.imageSize
类型:(Size | Vector2)
图标所用图片大小,根据所设置的大小拉伸或压缩图片,等同于CSS中的background-size属性。可用于实现高清屏的高清效果
成员函数:
setImageSize(size)
getImageSize()
setSize(size)
getSize()
setImageOffset(offset)
getImageOffset()
getImage()
setImage(image)
setOriginSize(size)
getOriginSize()

AMap.LabelMarker

标注类

new AMap.LabelMarker(opts: LabelMarkerOptions)
参数说明:
opts (LabelMarkerOptions) 标注参数
属性 描述
opts.name
类型:string
标注名称,作为标注标识,并非最终在地图上显示的文字内容,显示文字内容请设置 opts.text.content
opts.position
类型:(Vector2 | LngLat)
标注位置
opts.zooms
类型:Vector2
标注显示级别范围, 可选值: [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
类型:(Vector2 | Size)
图标大小,默认值: [36, 36]
opts.icon.clipOrigin
类型:(Vector2 | Pixel)
图标所在图片偏移位置,默认值: [0, 0]
opts.icon.clipSize
类型:(Vector2 | Size)
图标所在图片裁剪大小,若未设置,则使用图片大小
opts.icon.offset
类型:(Vector2 | Pixel)
图标所在图片偏移量,默认值 [0, 0]
opts.icon.anchor
类型:(Vector2 | 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 | Vector2)
为偏移量,在 direction 基础上的偏移。默认值 [0, 0]
opts.text.zooms
类型:Vector2
文本显示级别范围,可单独设置文本显示范围
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 AMap.LabelsLayer({
    collision: true,
});
// 将 LabelMarker 实例添加到 LabelsLayer 上
labelsLayer.add(labelMarker);
// 将 LabelsLayer 添加到地图上
map.add(labelsLayer);
成员函数:
getName()
setName(name)
getPosition()
setPosition(position)
getZooms()
setZooms(zooms)
getOpacity()
setOpacity(opacity)
getzIndex()
setzIndex(zIndex)
getRank()
setRank(rank)
getText()
setText(textOpts)
getIcon()
setIcon(iconOpts)
getOptions()
getExtData()
setExtData(extData)
setTop(isTop)
getVisible()
getCollision()
show()
hide()
remove()
moveTo(targetPosition, opts)
moveAlong(path, opts)
startMove()
stopMove()
pauseMove()
resumeMove()
事件:
click
mousemove
mouseover
mouseout
mousedown
mouseup
touchstart
touchmove
touchend

AMap.ElasticMarker

灵活点标记

new AMap.ElasticMarker(opts: ElasticMarkerOptions)
参数说明:
opts (ElasticMarkerOptions) 灵活点标记参数
属性 描述
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);
});
成员函数:
getTitle()
setTitle(title)
getClickable()
getMap()
setMap(map)
show()
hide()
getPosition()
setPosition(position)
setAnchor(anchor)
getzIndex()
setzIndex(zIndex)
getOptions()
getBounds()
setClickable(clickable)
getDraggable()
setDraggable(draggable)
getTop()
setTop(isTop)
getCursor()
setCursor(cursor)