经纬度、像素、边界、大小、这些是地图 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');
// 覆盖物绑定鼠标移动事件
polygon.on('mousemove',console.log);
// 覆盖物绑定事件判断
polygon.hasEvents('mousemove',console.log);
地图对象类,封装了地图的属性设置、图层变更、事件交互等接口的类。 相关示例
((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 ~ 30] |
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.labelRejectMask Boolean
(default false )
|
文字是否拒绝掩模图层进行掩模 |
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] ] ] ] |
opts.WebGLParams any
(default {} )
|
额外配置的WebGL参数 eg: preserveDrawingBuffer |
var map = new AMap.Map('map', {
viewMode: '3D',
center: [116.397083, 39.874531],
layers: [AMap.createDefaultLayer()], // layers 字段为空或者不赋值将会自动创建默认底图。
zoom: 12,
})
获取审图号
重新计算容器大小
地图放大一级显示
地图缩小一级显示
获取地图当前俯仰角
Number
:
角度
获取地图顺时针旋转角度, 范围: [0 ~ 360]
Number
:
旋转角度值
返回地图对象的容器
HTMLElement
:
地图 DOM 容器
获取地图容器尺寸,单位:像素
Size
:
地图容器尺寸
添加图层到地图上
(Layer)
地图图层对象
从地图上移除图层
(Layer)
地图图层
将多个图层一次替代地图上原有图层,会移除地图原有图层
(Array<Layer>)
地图图层数组
获取地图图层数组,数组为一个或多个图层
Array<Layer>
:
地图图层数组
添加覆盖物/图层。参数为单个覆盖物/图层,或覆盖物/图层的数组。
((VectorOverlay | Array<any>))
覆盖物对象或者数组
获取当前地图状态信息,包括是否可鼠标拖拽移动地图、地图是否可缩放、地图是否可旋转(rotateEnable)、 是否可双击放大地图、是否可以通过键盘控制地图旋转(keyboardEnable)等
object
:
地图状态信息映射集合
删除覆盖物/图层。参数为单个覆盖物/图层,或覆盖物/图层的数组。
((Overlay | Layer | Array<(Overlay | Layer)>))
覆盖物对象或者数组
获取地图默认鼠标指针样式
string
:
地图鼠标指针样式
设置地图默认鼠标指针样式
(string)
设置鼠标指针默认样式,参数cursor应符合CSS的cursor属性规范。可为CSS标注中的光标样式,
如:setCursor(“pointer”)等;或者自定义的光标样式,
如:setCursor("url('
https://lbs.amap.com/webapi/static/Images//0.png'
),pointer")
注销地图对象,并清空地图容器
获取Map的限制区域
设置 Map 的限制区域,设定区域限制后,传入参数为限制的 Bounds。地图仅在区域内可拖拽 相关示例
清除 Map 的限制区域
获取指定位置的地图分辨率,单位:米/像素。 参数point有指定值时,返回指定点地图分辨率,point缺省时,默认返回当前地图中心点位置的分辨率
Number
:
分辨率
根据地图上添加的覆盖物分布情况,自动缩放地图到合适的视野级别,参数均可缺省。 overlayList为覆盖物数组,缺省时为当前地图上添加的所有覆盖物图层, immediately代表是否需要动画过程,avoid代表上下左右的像素避让宽度,maxZoom代表fitView之后的最大级 相关示例
(Array<Overlay>)
覆盖物
(Boolean
= false
)
是否立即过渡
(Number
= zooms[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 级别
);
获取地图显示样式
删除地图上所有的覆盖物
清除地图上的信息窗体。
设置文字是否拒绝掩模,true:不进行掩模,false:掩模
(boolean)
是否拒绝掩模
地图容器尺寸改变事件
地图资源加载完成后触发事件
鼠标左键单击事件
鼠标左键双击事件
地图平移时触发事件
鼠标点击热点时触发
鼠标滑过热点时触发
鼠标移出热点时触发
地图平移开始时触发
地图移动结束后触发,包括平移,以及中心点变化的缩放。如地图有拖拽缓动效果,则在缓动结束后触发
地图缩放级别更改后触发
缩放开始时触发
缩放结束时触发
鼠标在地图上移动时触发
鼠标滚轮开始缩放地图时触发
鼠标移入地图容器内时触发
鼠标移出地图容器时触发
鼠标在地图上单击抬起时触发
鼠标在地图上单击按下时触发
鼠标右键单击事件
开始拖拽地图时触发
拖拽地图过程中触发
停止拖拽地图时触发。如地图有拖拽缓动效果,则在拽停止,缓动开始前触发
触摸开始时触发事件,仅适用移动设备
拖拽地图过程中触发,仅适用移动设备
触摸结束时触发事件,仅适用移动设备
此对象用于表示地图、覆盖物、叠加层上的各种鼠标事件返回,包含以下字段:
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,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 |
设置图层的取图地址
(String)
瓦片图地址
重新加载图层资源,重新渲染
获取图层参数信息
Object
:
图层参数信息
获取图层层级
Number
:
zIndex 图层层级
设置图层层级,数字越大图层层级越高
(Number)
图层层级值
获取图层透明度
Number
:
opacity 图层透明度
设置图层透明度,范围 [0 ~ 1]
(Number)
图层透明度
设置图层可见
设置图层隐藏
图块切片加载完成事件
实时交通图层类,继承自TileLayer。 相关示例
(TrafficLayerOptions)
Name | Description |
---|---|
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 |
停止自动更新数据
获取图层参数信息
Object
:
图层参数信息
获取图层层级
Number
:
zIndex 图层层级
设置图层层级,数字越大图层层级越高
(Number)
图层层级值
获取图层透明度
Number
:
opacity 图层透明度
设置图层透明度,范围 [0 ~ 1]
(Number)
图层透明度
设置图层可见
设置图层隐藏
图块切片加载完成事件
卫星图层类,继承自 TileLayer。 相关示例
(SatelliteLayerOptions)
Name | Description |
---|---|
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 |
获取图层参数信息
Object
:
图层参数信息
获取图层层级
Number
:
zIndex 图层层级
设置图层层级,数字越大图层层级越高
(Number)
图层层级值
获取图层透明度
Number
:
opacity 图层透明度
设置图层透明度,范围 [0 ~ 1]
(Number)
图层透明度
设置图层可见
设置图层隐藏
销毁图层
图块切片加载完成事件
路网图层,展示道路信息 相关示例
(RoadnetLayerOptions)
Name | Description |
---|---|
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 |
设置图层可见
设置图层隐藏
获取图层参数信息
Object
:
图层参数信息
获取图层层级
Number
:
zIndex 图层层级
设置图层层级,数字越大图层层级越高
(Number)
图层层级值
获取图层透明度
Number
:
opacity 图层透明度
设置图层透明度,范围 [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.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);
设置楼块图层样式 相关示例
(BuildingStyleOptions)
样式
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、十六进制等 |
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
获取图层参数信息
object
:
图层参数信息
获取图层层级
Number
:
zIndex 图层层级
设置图层层级,数字越大图层层级越高
(Number)
图层层级值
获取图层透明度
Number
:
opacity 图层透明度
设置图层透明度,范围 [0 ~ 1]
(Number)
图层透明度
设置图层可见
设置图层隐藏
销毁图层
(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 | 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] )
|
填充色 |
设定显示的国家 SOC
(String)
SOC
获取 adcodes
any
:
adcodes
设置样式信息
(DistrictLayerStyle)
样式信息
获取样式信息
DistrictLayerStyle
:
样式
获取图层参数信息
object
:
图层参数信息
获取图层层级
Number
:
zIndex 图层层级
设置图层层级,数字越大图层层级越高
(Number)
图层层级值
获取图层透明度
Number
:
opacity 图层透明度
设置图层透明度,范围 [0 ~ 1]
(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等
符合 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,30] )
|
支持的缩放级别范围,默认范围 [2-30] |
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)
服务地址
获取图层参数信息
Object
:
图层参数信息
获取图层层级
Number
:
zIndex 图层层级
设置图层层级,数字越大图层层级越高
(Number)
图层层级值
获取图层透明度
Number
:
opacity 图层透明度
设置图层透明度,范围 [0 ~ 1]
(Number)
图层透明度
设置图层可见
设置图层隐藏
图块切片加载完成事件
用于加载 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,30] )
|
支持的缩放级别范围,默认范围 [2-30] |
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)
服务地址
获取图层参数信息
Object
:
图层参数信息
获取图层层级
Number
:
zIndex 图层层级
设置图层层级,数字越大图层层级越高
(Number)
图层层级值
获取图层透明度
Number
:
opacity 图层透明度
设置图层透明度,范围 [0 ~ 1]
(Number)
图层透明度
设置图层可见
设置图层隐藏
图块切片加载完成事件
为了满足基于矢量瓦片块的数据可视化、矢量瓦片边界展示等开发需求,通过 AMap.MapboxVectorTileLayer 插件提供了简易矢量瓦片图层 此图层可以使用标准的 MVT 瓦片服务作为数据源。 可以配合GeoHub-数据中心发布的矢量瓦片服务。 注意:使用高德数据平台发布服务,由于服务 URL 地址是明文,建议自行做服务代理转发,防止服务 ID 和 Key 明文传输导致数据泄露。 相关示例
(MapboxVTLayerOptions)
图层初始化参数
Name | Description |
---|---|
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.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.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.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)?
|
是否显示 |
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: {
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: {
color: function (props) {
return 'rgba(0,0,0,1)';
},
dash: [10, 0, 10, 0],
borderColor: 'rgba(30,112,255,1)',
borderWidth: 5,
},
line: {
color: 'rgba(20,140,40,1)',
lineWidth: 5,
dash: [10, 0, 10, 0],
},
}
});
设置样式信息
(MapboxVTLayerStyle)
样式信息
获取样式信息
MapboxVTLayerStyle
:
样式
获取图层参数信息
object
:
图层参数信息
获取图层层级
Number
:
zIndex 图层层级
设置图层层级,数字越大图层层级越高
(Number)
图层层级值
获取图层透明度
Number
:
opacity 图层透明度
设置图层透明度,范围 [0 ~ 1]
(Number)
图层透明度
设置图层可见
设置图层隐藏
用于加载展示开发者自己拥有的数据或者图像的图层类型
热力图,基于第三方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});
});
获取热力图叠加地图对象
Map
:
设置热力图要叠加的地图实例,也可以在Map中的layers属性中设置为默认显示的图层
(Map)
地图实例
获取热力图的属性信息
HeatMapOptions
:
设置热力图属性,请参考 HeatMapOptions 列表中的说明
(HeatMapOptions)
热力图配置
输出热力图的数据集,数据结构同setDataSet中的数据集
object
:
设置热力图展现的数据集,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)
数据集
获得热力图层叠加层级
number
:
设置热力图层叠加层级
(number)
热力图层叠加层级
显示热力图
隐藏热力图
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 矢量覆盖物
标注层
// 创建一个标注层实例
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 |
opts.alwaysRender Boolean
(default false )
|
是否主动 |
var cLayer = new AMap.CustomLayer(canvas, {
zooms: [2, 18],
zIndex: 120,
render() {
// 对 canvas 进行绘制
}
})
获取图层参数信息
Object
:
图层参数信息
获取图层层级
Number
:
zIndex 图层层级
设置图层层级,数字越大图层层级越高
(Number)
图层层级值
设置图层层级
(number)
图层层级
获取图层透明度
Number
:
opacity 图层透明度
设置图层透明度,范围 [0 ~ 1]
(Number)
图层透明度
设置图层可见
设置图层隐藏
添加到地图上
(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,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 |
获取图层参数信息
Object
:
图层参数信息
获取图层层级
Number
:
zIndex 图层层级
设置图层层级,数字越大图层层级越高
(Number)
图层层级值
获取图层透明度
Number
:
opacity 图层透明度
设置图层透明度,范围 [0 ~ 1]
(Number)
图层透明度
设置图层可见
设置图层隐藏
销毁图层
图块切片加载完成事件
图片图层类,用户可以将一张静态图片作为图层添加在地图上,图片图层会随缩放级别而自适应缩放。 相关示例
(ImageLayerOptions)
传入默认参数列表
Name | Description |
---|---|
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]
});
获取图片的地址
设置图片的地址
(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,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 |
修改显示的Canvas
(HTMLCanvasElement)
返回 Canvas 对象
HTMLCanvasElement
:
canvas 对象
返回 canvas 范围的经纬度
Bounds
:
范围经纬度
当canvas的内容发生改变是用于刷新图层,3D视图下调用,2D视图不需要调用
设置 CanvasLayer 显示的范围
获取图层参数信息
object
:
图层参数信息
获取图层层级
number
:
zIndex 图层层级
设置图层层级,数字越大图层层级越高
(number)
图层层级值
获取图层透明度
number
:
opacity 图层透明度
设置图层透明度,范围 [0 ~ 1]
(number)
图层透明度
设置图层可见
设置图层隐藏
3d 自定义图层
(GlCustomLayerOptions)
Name | Description |
---|---|
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 10 )
|
图层的层级,默认为 120 |
var glCustomLayer = new GLCustomLayer({
init: function(gl){
// init shader or sth...
},
render: function(gl, state){
// render every frame
},
});
获取GLCustomLayer所属地图实例
(Map | null)
:
获取GLCustomLayer叠加顺序
number
:
设置GLCustomLayer叠加顺序
(number)
叠加值
void
:
获取GLCustomLayer透明度
number
:
设置GLCustomLayer透明度
(number)
透明度
void
:
获取GLCustomLayer显示层级范围
number
:
设置GLCustomLayer显示层级范围
(Vector)
显示层级范围,默认
[3, 20]
number
:
显示GLCustomLayer
void
:
隐藏GLCustomLayer
void
:
用于在地图上添加点状地图要素的类型
点标记
(MarkerOptions)
点标记参数
Name | Description |
---|---|
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.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);
设置鼠标滑过点标记时的文字提示
(string)
点标记的文字提示
获取点标记文本标签内容
LabelOptions
:
文本标签设置项
设置点标记文本标签内容
(LabelOptions)
获取点标记是否支持鼠标单击事件
boolean
:
设置点标记是否支持鼠标单击事件
(boolean)
默认值: true
获取点标记对象是否可拖拽移动
boolean
:
设置点标记对象是否可拖拽移动
(boolean)
获取该点标记是否置顶
boolean
:
地图上有多个marker时,设置是否置顶该点标记
(boolean)
获取鼠标悬停时的光标设置
string
:
设置鼠标悬停时的光标
(string)
获取用户自定义数据
(any | undefined)
:
设置用户自定义数据
(any)
用户自定义数据
移除点标记 相关示例
以给定时长/速度移动点标记到指定位置, 需加载 AMap.MoveAnimation 插件才可使用
((LngLat | Vector2))
指定位置
(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();
获取覆盖物的地图实例
(Map | null)
:
将覆盖物设置到地图上
((Map | null))
将覆盖物加到地图上
(Map)
将覆盖物加到地图上
(Map)
显示覆盖物
隐藏覆盖物
获取覆盖物位置
any
:
设置覆盖物位置
(Vector2)
设置覆盖物锚点
(string)
设置覆盖物偏移量
((Vector2 | Pixel))
设置覆盖物旋转角度
(number)
如设置了尺寸,获取设置的尺寸
Vector2
:
设置尺寸
((Vector2 | Size))
设置覆盖物的叠加顺序
(number)
获取覆盖物的所有属性
OverlayOptions
:
获取点标记显示的自定义内容
(string | HTMLElement | undefined)
:
设置点标记显示的自定义内容,可以是HTML要素字符串或者HTML DOM对象
((HTMLDOM | string))
获取点标记范围
Bounds
:
鼠标左键单击事件
鼠标左键双击事件
鼠标右键单击事件
鼠标移动
鼠标移近点标记时触发事件
鼠标移出点标记时触发事件
鼠标在点标记上按下时触发事件
鼠标在点标记上按下后抬起时触发事件
开始拖拽点标记时触发事件
鼠标拖拽移动点标记时触发事件
点标记拖拽移动结束触发事件
点标记在执行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.
点标记执行moveTo动画结束时触发事件,也可以由moveAlong方法触发
点标记执行moveAlong动画一次后触发事件
触摸开始时触发事件,仅适用移动设备
触摸移动进行中时触发事件,仅适用移动设备
触摸结束时触发事件,仅适用移动设备
标注类
(LabelMarkerOptions)
标注参数
Name | Description |
---|---|
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.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 LabelsLayer({
collision: true,
});
// 将 LabelMarker 实例添加到 LabelsLayer 上
labelsLayer.add(labelMarker);
// 将 LabelsLayer 添加到地图上
map.add(labelsLayer);
设置标注的名称,作为标注标识,并非最终在地图上显示的文字内容
(string)
获取标注的显示位置
LngLat
:
获取标注显示级别范围
(Vector2 | undefined)
:
设置显示级别范围
([number])
设置标注透明度
(number)
设置标注的叠加顺序
(number)
设置标注的优先级,该优先级用于 labelsLayer 支持避让时,rank 值大的标注会避让掉 rank 值低的标注。
(number)
获取标注的文本设置
(LabelMarkerTextOptions | undefined)
:
设置标注的文本设置,可设置显示的文字内容和文字样式等
(LabelMarkerTextOptions)
获取标注的图标设置
(LabelMarkerIconOptions | undefined)
:
设置标注的图标设置,可设置显示的标注图片
(LabelMarkerIconOptions)
获取标注的全部属性配置
LabelMarkerOptions
:
获取用户自定义属性
(any | undefined)
:
设置用户自定义属性
(any)
是否设置置顶标注,设置为 true 表示该标注会显示在所有标注之前
(boolean)
标注显示
标注隐藏
将自身从标注层移除
以给定速度移动标注到指定位置, 需加载 AMap.MoveAnimation 插件才可使用
((LngLat | Vector2))
指定位置
(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 后可以使用
(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 后创建的标注可以使用
animationLabel.startMove();
停止标注动画,加载 AMap.MoveAnimation 后创建的标注可以使用
animationLabel.stopMove();
暂停标注动画,加载 AMap.MoveAnimation 后创建的标注可以使用
animationLabel.pauseMove();
重新启动标注动画,加载 AMap.MoveAnimation 后创建的标注可以使用
animationLabel.resumeMove();
鼠标左键单击标注触发的事件
鼠标在标注上移动触发的事件
鼠标移进标注时触发事件
鼠标移出标注时触发事件
鼠标在标注上按下时触发事件
鼠标在标注上按下后抬起时触发事件
触摸开始时触发事件,仅适用移动设备
触摸移动进行中时触发事件,仅适用移动设备
触摸结束时触发事件,仅适用移动设备
灵活点标记
(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
:
获取覆盖物的地图实例
(Map | null)
:
将覆盖物设置到地图上
((Map | null))
显示覆盖物
隐藏覆盖物
获取覆盖物位置
any
:
设置灵活点标记位置
(Vector)
设置灵活点标记锚点
(string)
设置覆盖物的叠加顺序
(number)
获取覆盖物的所有属性
OverlayOptions
:
Bounds
:
设置灵活点标记对象是否可拖拽移动
(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 // 聚合网格像素大小
});
});
在原数据基础上添加数据,格式同 dataOptions
(dataOptions)
设置数据,格式同 dataOptions
(dataOptions)
获取聚合点的总数量
Number
:
获取聚合网格的像素大小
Number
:
设置聚合网格的像素大小
(Number)
像素大小
获取地图中点标记的最大聚合级别
Number
:
设置地图中点标记的最大聚合级别
(Number)
级别
设置样式聚合点,格式同 opts.styles
(Map)
获取样式
Array
:
获取地图对象
Map
:
设置地图对象
(Map)
获取单个聚合点位置是否是聚合内所有标记的平均中心
Boolean
:
设置聚合点位置是否是所有聚合点的中心
(Boolean)
海量点类
(Array<MassMarkersOptions>)
海量点参数
Name | Description |
---|---|
opts.zIndex number
|
图标 url |
opts.opacity number
|
图标显示大小 |
opts.zooms Vector2
|
旋转角度 |
opts.cursor string
|
锚点位置 |
opts.style (MassMarkersStyleOptions | Array<MassMarkersStyleOptions>)
|
点展示优先级 |
opts.style.url string
|
图标 url |
opts.style.size (Vector2 | Size)
|
图标显示大小 |
opts.style.rotation number
|
旋转角度 |
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
:
获取海量点图层可见层级范围
Vector2
:
设置海量点图层可见层级范围
(Vector2)
可见层级范围
显示海量点图层
隐藏海量点图层
清除海量点
海量点加载完成事件
鼠标左键单击事件
鼠标左键单击事件
鼠标移动
鼠标移近海量点时触发事件
鼠标移出海量点时触发事件
鼠标在海量点上按下时触发事件
鼠标在海量点上按下后抬起时触发事件
触摸开始时触发事件,仅适用移动设备, 数据结构同setDatas中的数据集
触摸结束时触发事件,仅适用移动设备, 数据结构同setDatas中的数据集
用于实现点标记沿线段或者路径轨迹移动的动画基类,可用于满足轨迹回放、实时轨迹等场景。MoveAnimation无需单独声明或初始化,Marker、Text、LabelMarker均已继承了 MoveAnimation的实现。
以给定时间移动点标记到指定位置,加载 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,
});
});
以指定的时长,点标记沿指定的路径移动,加载 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.startMove();
停止点标记动画,加载 AMap.MoveAnimation 后可以使用
animationMarker.stopMove();
重新启动点标记动画,加载 AMap.MoveAnimation 后可以使用
animationMarker.resumeMove();
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 | Vector2))
获取信息窗体大小
((HTMLElement | string))
设置信息窗体锚点 默认值:'bottom-center'。可选值:'top-left'|'top-center'|'top-right'|'middle-left'|'center'|'middle-right'|'bottom-left'|'bottom-center'|'bottom-right'
(string)
获取用户自定义属性
(any | undefined)
:
设置用户自定义属性
(any)
信息窗体打开之后触发事件
信息窗体关闭之后触发事件
右键菜单 亲手试一试
(OverlayOptions)
右键菜单参数
Name | Description |
---|---|
opts.position (Vector2 | 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)
(Vector2)
关闭右键菜单
菜单添加一条内容
菜单移除一条内容
(string)
(EventListener)
右键菜单打开事件
右键菜单关闭事件
用于在地图上绘制线、面等矢量地图要素的类型
构造多边形对象,通过PolygonOptions指定多边形样式
Implements Event
(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个像素的空白 (如此反复)组成的虚线 |
隐藏多边形
显示多边形
获取用户自定义属性
Object
:
修改多边形属性(样式风格,包括组成多边形轮廓线的节点、轮廓线样式等。属性详情参看PolygonOptions列表)
(PolygonOptions)
设置用户自定义属性,支持JavaScript API任意数据类型
(Object)
获取当前多边形的矩形范围对象。
Bounds
:
获取多边形的面积(单位:平方米)
number
:
判断坐标是否在多边形内
(LngLatLike)
boolean
:
true 包含,false 不包含
(any)
销毁内存-多边形
鼠标左键单击事件
(MapsEvent)
鼠标左键双击事件
(MapsEvent)
鼠标右键单击事件
(MapsEvent)
鼠标按下
(MapsEvent)
鼠标抬起
(MapsEvent)
鼠标经过
(MapsEvent)
鼠标移出
(MapsEvent)
触摸开始时触发事件,仅适用移动设备
(MapsEvent)
触摸移动进行中时触发事件,仅适用移动设备
(MapsEvent)
触摸结束时触发事件,仅适用移动设备
(MapsEvent)
构造折线对象,支持 lineString 和 MultiLineString
Implements Event
(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时使用 |
隐藏折线
显示折线
(any
= {}
)
获取用户自定义属性
Object
:
获取线的属性
PolylineOptions
:
设置用户自定义属性,支持JavaScript API任意数据类型
(Object)
销毁内存-折线
(any)
(any)
获取折线的总长度(单位:米)
number
:
(any)
修改折线属性(包括路径的节点、线样式、是否绘制大地线等。属性详情参看PolylineOptions列表)
(PolylineOptions)
判断坐标是否在折线内
(LngLatLike)
boolean
:
鼠标左键单击事件
(MapsEvent)
鼠标左键双击事件
(MapsEvent)
鼠标右键单击事件
(MapsEvent)
鼠标按下
(MapsEvent)
鼠标抬起
(MapsEvent)
鼠标经过
(MapsEvent)
鼠标移出
(MapsEvent)
触摸开始时触发事件,仅适用移动设备
(MapsEvent)
触摸移动进行中时触发事件,仅适用移动设备
(MapsEvent)
触摸结束时触发事件,仅适用移动设备
(MapsEvent)
贝塞尔曲线
Implements Event
(BezierCurveOptions)
BezierCurve配置项
Name | Description |
---|---|
opts.path Array
|
贝瑟尔曲线的路径。描述为一个二维数组规则如下:第一个元素是起点, 之后的元素同时描述控制点和途经点,之后每个元素可以有0个到2个控制点 控制点在前,途经点在最后 [ [lng,lat] ,//起点0 [lng,lat,lng,lat,lng,lat] ,//控制点、控制点、途经点2 [lng,lat,lng,lat] //控制点、途经点3 ] 或者 [ [ [lng,lat] ],//起点0 [ [lng,lat] , [lng,lat] ],//控制点、途经点1 [ [lng,lat] , [lng,lat] , [lng,lat] ],//控制点、控制点、途经点2 [ [lng,lat] , [lng,lat] ]//控制点、途经点3 ] |
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时使用 |
修改折线属性(包括路径的节点、线样式、是否绘制大地线等。属性详情参看 BezierCurveOptions 列表)
(BezierCurveOptions)
(any)
设置组成该折线的节点数组
((Array<Array<number>> | Array<Array<Array<number>>>))
贝瑟尔曲线的路径。描述为一个二维数组规则如下:第一个元素是起点,
之后的元素同时描述控制点和途经点,之后每个元素可以有0个到2个控制点
控制点在前,途经点在最后
[
[lng,lat]
,//起点0
[lng,lat,lng,lat,lng,lat]
,//控制点、控制点、途经点2
[lng,lat,lng,lat]
//控制点、途经点3
]
或者
[
[
[lng,lat]
],//起点0
[
[lng,lat]
,
[lng,lat]
],//控制点、途经点1
[
[lng,lat]
,
[lng,lat]
,
[lng,lat]
],//控制点、控制点、途经点2
[
[lng,lat]
,
[lng,lat]
]//控制点、途经点3
]
隐藏贝塞尔线
显示贝塞尔曲线
获取用户自定义属性
Object
:
设置用户自定义属性,支持JavaScript API任意数据类型
(Object)
销毁内存-贝塞尔曲线
获取线的属性
BezierCurveOptions
:
判断坐标是否在曲线内
(LngLatLike)
boolean
:
获取曲线的总长度(单位:米)
number
:
鼠标左键单击事件
(MapsEvent)
鼠标左键双击事件
(MapsEvent)
鼠标右键单击事件
(MapsEvent)
鼠标按下
(MapsEvent)
鼠标抬起
(MapsEvent)
鼠标经过
(MapsEvent)
鼠标移出
(MapsEvent)
触摸开始时触发事件,仅适用移动设备
(MapsEvent)
触摸移动进行中时触发事件,仅适用移动设备
(MapsEvent)
触摸结束时触发事件,仅适用移动设备
(MapsEvent)
构造圆形对象,通过CircleOptions指定多边形样式
Implements Event
(CircleOptions)
Name | Description |
---|---|
opts.center LngLat
|
圆心位置 |
opts.radius number
|
圆半径,单位:米 |
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个像素的空白 (如此反复)组成的虚线 |
设置圆中心点
(LngLatLike)
设置圆形的半径
(number)
获取圆中心点
LngLat
:
center
获取圆形的半径
number
:
radius
(any)
隐藏圆形
判断指定点坐标是否在圆内
(LngLatLike)
boolean
:
修改圆属性(样式风格,包括组成圆形轮廓线的节点、轮廓线样式等。属性详情参看CircleOptions列表)
(CircleOptions)
显示圆形
获取用户自定义属性
Object
:
设置用户自定义属性,支持JavaScript API任意数据类型
(Object)
销毁内存-圆形
获取圆形的属性
CircleOptions
:
获取面积,平米
number
:
鼠标左键单击事件
(MapsEvent)
鼠标左键双击事件
(MapsEvent)
鼠标右键单击事件
(MapsEvent)
鼠标按下
(MapsEvent)
鼠标抬起
(MapsEvent)
鼠标经过
(MapsEvent)
鼠标移出
(MapsEvent)
触摸开始时触发事件,仅适用移动设备
(MapsEvent)
触摸移动进行中时触发事件,仅适用移动设备
(MapsEvent)
触摸结束时触发事件,仅适用移动设备
(MapsEvent)
构造圆形对象,通过CircleOptions指定多边形样式
(CircleMarkerOptions)
Name | Description |
---|---|
opts.center LngLat
|
圆心位置 |
opts.radius number
|
圆半径,单位:px 最大值64 |
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等 |
隐藏圆点
设置圆点的半径
(number)
显示CircleMarker
获取圆点中心
LngLat
:
获取圆点的半径
number
:
判断指定点坐标是否在圆内
(LngLatLike)
boolean
:
修改圆点标记的属性(样式风格,包括轮廓线、填充色等。属性详情参看CircleMarkerOptions列表)
(CircleMarkerOptions)
获取用户自定义属性
Object
:
获取圆点的属性
CircleMarkerOptions
:
设置用户自定义属性,支持JavaScript API任意数据类型
(Object)
销毁内存-CircleMarker
鼠标左键单击事件
(MapsEvent)
鼠标左键双击事件
(MapsEvent)
鼠标右键单击事件
(MapsEvent)
鼠标按下
(MapsEvent)
鼠标抬起
(MapsEvent)
鼠标经过
(MapsEvent)
鼠标移出
(MapsEvent)
触摸开始时触发事件,仅适用移动设备
(MapsEvent)
触摸移动进行中时触发事件,仅适用移动设备
(MapsEvent)
触摸结束时触发事件,仅适用移动设备
(MapsEvent)
构造多边形对象,通过EllipseOptions指定多边形样式
Implements Event
(EllipseOptions)
Name | Description |
---|---|
opts.center LngLatLike
|
椭圆圆心 |
opts.radius [number, number]
|
椭圆的半径,用2个元素的数组表示,单位:米 如: radius: [1000, 2000] 表示横向半径是1000,纵向的半径是2000 默认值: [1000, 1000] |
opts.zIndex number
(default 10 )
|
椭圆覆盖物的叠加顺序。地图上存在多个多边形覆盖物叠加时,通过该属性使级别较高的多边形覆盖物在上层显示 |
opts.bubble boolean
(default false )
|
是否将覆盖物的鼠标或touch等事件冒泡到地图上 |
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任意数据类型,如 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个像素的空白 (如此反复)组成的虚线 |
设置椭圆的中心点
(LngLatLike)
获取椭圆的圆心
LngLat
:
获取椭圆的半径
number
:
(any)
隐藏椭圆
修改椭圆属性(样式风格,包括组成椭圆轮廓线的节点、轮廓线样式等。属性详情参看Ellipse
(EllipseOptions)
显示椭圆
获取用户自定义属性
Object
:
设置用户自定义属性,支持JavaScript API任意数据类型
(Object)
销毁内存-椭圆
获取椭圆的属性
EllipseOptions
:
获取面积,平米
number
:
判断指定点坐标是否在椭圆内
(LngLatLike)
鼠标左键单击事件
(MapsEvent)
鼠标左键双击事件
(MapsEvent)
鼠标右键单击事件
(MapsEvent)
鼠标按下
(MapsEvent)
鼠标抬起
(MapsEvent)
鼠标经过
(MapsEvent)
鼠标移出
(MapsEvent)
触摸开始时触发事件,仅适用移动设备
(MapsEvent)
触摸移动进行中时触发事件,仅适用移动设备
(MapsEvent)
触摸结束时触发事件,仅适用移动设备
(MapsEvent)
构造矩形对象,通过RectangleOptions指定多边形样式
Implements Event
(RectangleOptions)
Name | Description |
---|---|
opts.map Map
|
要显示该覆盖物的地图对象 |
opts.bounds Bounds
|
矩形的范围 |
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)
void
:
(any)
修改矩形属性(样式风格,包括组成矩形轮廓线的节点、轮廓线样式等。属性详情参看RectangleOptions列表)
(RectangleOptions)
判断坐标是否在矩形上
(LngLatLike)
boolean
:
隐藏矩形
获取矩形的中心点
LngLat
:
显示矩形
获取用户自定义属性
Object
:
设置用户自定义属性,支持JavaScript API任意数据类型
(Object)
销毁内存-矩形
获取矩形的属性
RectangleOptions
:
获取面积,平米
number
:
鼠标左键单击事件
(MapsEvent)
鼠标左键双击事件
(MapsEvent)
鼠标右键单击事件
(MapsEvent)
鼠标按下
(MapsEvent)
鼠标抬起
(MapsEvent)
鼠标经过
(MapsEvent)
鼠标移出
(MapsEvent)
触摸开始时触发事件,仅适用移动设备
(MapsEvent)
触摸移动进行中时触发事件,仅适用移动设备
(MapsEvent)
触摸结束时触发事件,仅适用移动设备
(MapsEvent)
GeoJSON类,继承自OverLayGroup,可实现GeoJSON对象与OverlayGroup的相互转换
(GeoJSONOptions)
创建一个GeoJSON对象,ops为初始构造参数
Name | Description |
---|---|
opts.geoJSON Object
|
要加载的标准GeoJSON对象 |
opts.getMarker function (geojson, lnglat)
|
指定点要素的绘制方式,缺省时为Marker的默认样式。geojson为当前要素对应的GeoJSON对象,lnglats为对应的线的路径 |
opts.getPolyline function (geojson, lnglat)
|
指定线要素的绘制方式,缺省时为Marker的默认样式。geojson为当前要素对应的GeoJSON对象,lnglats为对应的线的路径 |
opts.getPolygon function (geojson, lnglat)
|
指定面要素的绘制方式,缺省时为Marker的默认样式。geojson为当前要素对应的GeoJSON对象,lnglats为对应的线的路径 |
加载新的GeoJSON对象,转化为覆盖物,旧的覆盖物将移除
(any)
将当前对象包含的覆盖物转换为GeoJSON对象
Object
:
GeoJSONObject
用于批量操作图层和覆盖物的群组类型,可以简化代码书写
LayerGroup类用来包装其它图层类的实例, 对实例集合做批量操作, 避免开发者对多个需要设置同样属性的图层实例做循环处理。 同时只要对LayerGroup执行过setMap方法后, 新添加到该LayerGroup中的图层会自动将其map属性修改到该group对应的map, 此外从group中移除该图层时,也会将该图层从group对应的map中移除。 如果对图层集合添加对某个事件的监听或解除监听, 图层集合会对集合中所有图层实例做集合处理, 只要该图层支持此事件, 该事件绑定/解除即对图层生效 相关示例
(Array<Layer>)
图层数组
添加到地图上面
(Map)
地图对象
any
:
判断传入的图层实例是否在集合中
(Layer)
对集合中的图层做迭代操作,其中iterator的函数定义是: function(layer, index, collections),相关含义如下: layer: 当前迭代到的图层 index: 该图层在集合中的序列号(从0开始) collections: 所有图层实例
(Function)
添加单个图层到集合中,不支持添加重复的图层
(Layer)
图层对象
添加图层数组到集合中,不支持添加重复的图层
(Array<Layer>)
图层数组
从集合中删除传入的图层实例
(Layer)
图层对象
从集合中删除传入的图层实例数组
(Array<Layer>)
图层数组
获取组里所有对象,包括图层和覆盖物
Array<Layers>
:
清空图层
设置图层隐藏
设置图层可见
重新加载图层资源,重新渲染
any
:
OverlayGroup 类用来包装其它覆盖物类的实例,对实例集合做整体操作,避免开发者对多个需要设置同样属性的覆盖物实例做循环处理。 此外从group中移除该覆盖物时,也会将该覆盖物从group对应的map中移除。 目前OverlayGroup支持Marker, Polygon, Polyline, Circle,CircleMarker, Rectangle, Ellipse 和 BezierCurve。
(Array<Overlay>)
添加单个覆盖物到集合中,不支持添加重复的覆盖物
(Overlay)
添加覆盖物数组到集合中,不支持添加重复的覆盖物
(Array<Overlay>)
返回当前集合中所有的覆盖物
Array
:
判断传入的覆盖物实例是否在集合中
(Overlay)
boolean
:
从集合中删除传入的覆盖物实例
(Overlay)
从集合中删除传入的覆盖物实例数组
(Array)
清空集合
对集合中的覆盖物做迭代操作,其中iterator的函数定义是: function(overlay, index, collections),相关含义如下: overlay: 当前迭代到的覆盖物 index: 该覆盖物在集合中的序列号(从0开始) collections: 所有覆盖物实例
(Function)
在地图上显示集合中覆盖物
在地图上隐藏集合中覆盖物
修改覆盖物属性(包括线样式、样色等等)
(Object)
集合中对应覆盖物支持的事件 如果对覆盖物集合添加对某个事件的监听或解除监听, 覆盖物集合会对集合中所有覆盖物实例做集合处理, 只要该覆盖物支持此事件, 该事件绑定/解除即对覆盖物生效
(any)
固定于地图最上层的用于控制地图某些状态的 DOM 组件类型
地图控件基类,可扩展做自定义地图控件。
显示时触发此事件
隐藏时触发此事件
比例尺插件。位于地图右下角,用户可控制其显示与隐藏。继承自 AMap.Control 相关示例
mapObj.plugin(["AMap.Scale"],function(){
var scale = new AMap.Scale();
mapObj.addControl(scale);
});
显示比例尺插件时触发的事件
隐藏比例尺插件时触发的事件
地图操作工具条插件。可支持方向导航、位置定位、视野级别缩放、视野级别选择等操作。继承自 AMap.Control 相关示例
mapObj.plugin(["AMap.ToolBar"],function(){
//加载工具条
var tool = new AMap.ToolBar();
mapObj.addControl(tool);
});
工具条显示时触发此事件
工具条隐藏时触发此事件
组合了旋转、倾斜、复位在内的地图控件。 相关示例
var mapObj = new AMap.Map("container",{
center: new AMap.LngLat(116.368904,39.913423),
zoom:16
});
mapObj.plugin(["AMap.ControlBar"],function() {
var controlBar = new AMap.ControlBar(Options)
map.addControl(controlBar)
});
//map.reoveControl(controlBar)
显示时触发此事件
隐藏时触发此事件
地图类型切换插件。用户通过该插件进行地图切换。
mapObj = new AMap.Map("container",{
center:new AMap.LngLat(116.368904,39.913423),
zoom: 16
});
mapObj.plugin(["AMap.MapType"],function(){
//地图类型切换
var type= new AMap.MapType({
defaultType: 0,
});
mapObj.addControl(type);
});
移除一个图层
(String)
图层 id
添加控件到地图上
(Map)
地图实例
从地图上移除控件
设置控件可见
设置控件隐藏
显示时触发此事件
隐藏时触发此事件
鹰眼控件,用于显示缩略地图,显示于地图右下角,可以随主图的视口变化而变化,也可以配置成固定位置实现类似于南海附图的效果。
(HawkEyeOptions)
初始化参数
Name | Description |
---|---|
options.autoMove boolean
|
是否随主图视口变化移动 |
options.showRectangle boolean
|
是否显示视口矩形 |
options.showButton boolean
|
是否显示打开关闭的按钮 |
options.isOpen boolean
|
默认是否展开 |
options.mapStyle string
|
缩略图要显示的地图自定义样式,如'amap://styles/dark' |
options.layers array
|
缩略图要显示的图层类型,默认为普通矢量地图 |
options.width string
|
缩略图的宽度,同CSS,如'200px' |
options.height string
|
缩略图的高度,同CSS,如'200px' |
options.offset [number, number]
|
缩略图距离地图右下角的像素距离,如 [2,2] |
options.borderStyle string
|
缩略图的边框样式,同CSS,如"double solid solid double" |
options.borderColor string
|
缩略图的高度,同CSS,如'silver' |
options.borderRadius string
|
缩略图的高度,同CSS,如'5px' |
options.borderWidth string
|
缩略图的高度,同CSS,如'2px' |
options.buttonSize string
|
箭头按钮的像素尺寸,同CSS,如'12px' |
恢复鹰眼控件的正常大小
最小化鹰眼控件
显示鹰眼控件
隐藏鹰眼控件
用于满足一定专门功能的工具类型
构造一个距离量测插件对象。参数map为地图实例。 opts属性参考RangingToolOptions列表中的说明
(Map)
要添加到的地图实例
(RangingToolOptions)
鼠标工具配置参数
Name | Description |
---|---|
opts.startMarkerOptions Object
|
设置量测起始点标记属性对象,包括点标记样式、大小等,参考 MarkerOptions |
opts.midMarkerOptions Object
|
设置量测中间点标记属性对象,包括点标记样式、大小等,参考 MarkerOptions |
opts.endMarkerOptions Object
|
设置量测结束点标记属性对象,包括点标记样式、大小等,参考 MarkerOptions |
opts.lineOptions Object
|
设置距离量测线的属性对象,包括线样式、颜色等,参考 PolylineOptions |
opts.tmpLineOptions Object
|
设置距离量测过程中临时量测线的属性对象,包括线样式、颜色,参考 PolylineOptions |
opts.startLabelText String
|
设置量测起始点标签的文字内容,默认为“起点” |
opts.midLabelText String
|
设置量测中间点处标签的文字内容,默认为当前量测结果值 |
opts.endLabelText String
|
设置量测结束点处标签的文字内容,默认为当前量测结果值 |
opts.startLabelOffset Pixel
|
设置量测起始点标签的偏移量。默认值:Pixel(-6, 6) |
opts.midLabelOffset Pixel
|
设置量测中间点标签的偏移量。默认值:Pixel(-6, 6) |
opts.endLabelOffset Pixel
|
设置量测结束点标签的偏移量。默认值:Pixel(-6, 6) |
map.plugin(["AMap.MouseTool"],function(){
var ruler = new AMap.RangingTool(map);
});
启动测距工具
关闭测距工具
(Boolean)
是否删除测距过程产生的覆盖物
鼠标工具插件。通过该插件,可进行鼠标画标记点、线、多边形、矩形、圆、距离量测、面积量测、拉框放大、拉框缩小等功能。
(Map)
鼠标工具添加到的地图实例
map.plugin(["AMap.MouseTool"],function(){
var mousetool = new AMap.MouseTool(map);
// 使用鼠标工具,在地图上画标记点
mousetool.marker();
});
开启鼠标画点标注模式。鼠标在地图上单击绘制点标注,标注样式参考MarkerOptions设置
(MarkerOptions)
参考MarkerOptions设置
开启鼠标画圆模式。鼠标在地图上拖动绘制相应的圆形。圆形样式参考CircleOptions设置
(CircleOptions)
参考CircleOptions设置
开启鼠标画矩形模式。鼠标在地图上拉框即可绘制相应的矩形。矩形样式参考PolygonOptions设置
(PolygonOptions)
矩形样式参考PolygonOptions设置
开启鼠标画折线模式。鼠标在地图上点击绘制折线,鼠标左键双击或右键单击结束绘制,折线样式参考PolylineOptions设置
(PolylineOptions)
参考PolylineOptions设置
开启鼠标画多边形模式。鼠标在地图上单击开始绘制多边形,鼠标左键双击或右键单击结束当前多边形的绘制,多边形样式参考PolygonOptions设置
(PolygonOptions)
参考PolygonOptions设置
开启面积量测模式。鼠标在地图上单击绘制量测区域,鼠标左键双击或右键单击结束当前量测操作,并显示本次量测结果。量测面样式参考PolygonOptions设置
(PolygonOptions)
参考PolygonOptions设置
开启距离量测模式。鼠标在地图上单击绘制量测节点,并计算显示两两节点之间的距离,鼠标左键双击或右键单击结束当前量测操作。量测线样式参考 PolylineOptions 设置 注:不能同时使用rule方法和RangTool插件进行距离量测
(PolylineOptions)
参考PolylineOptions设置
开启鼠标拉框放大模式。鼠标可在地图上拉框放大地图。矩形框样式参考PolygonOptions设置
(PolygonOptions)
参考PolygonOptions设置
开启鼠标拉框缩小模式。鼠标可在地图上拉框缩小地图。矩形框样式参考PolygonOptions设置
(PolygonOptions)
参考PolygonOptions设置
关闭当前鼠标操作。参数arg设为true时,鼠标操作关闭的同时清除地图上绘制的所有覆盖物对象;设为false时,保留所绘制的覆盖物对象。默认为false
(boolean)
是否清除地图上的覆盖物
Polygon 编辑器
(Map)
AMap.Map 的实例
(Polygon?)
编辑对象
(Object?)
设置参数
Name | Description |
---|---|
opts.createOptions Object?
|
新创建的对象样式 |
opts.editOptions Object?
|
编辑样式 |
opts.controlPoint Object?
|
顶点样式 CircleMarkerOptions |
opts.midControlPoint Object?
|
中间点样式 CircleMarkerOptions |
开始编辑对象
设置编辑对象
(any)
(Polygon)
清空所有的吸附多边形
停止编辑对象
折线编辑插件,用于编辑AMap.Polyline对象,支持通过鼠标调整折线的形状。
(Map)
AMap.Map 的实例
(Polygon?)
编辑对象
(Object?)
设置参数
Name | Description |
---|---|
opts.createOptions Object?
|
新创建的对象样式 |
opts.editOptions Object?
|
编辑样式 |
opts.controlPoint Object?
|
顶点样式 CircleMarkerOptions |
opts.midControlPoint Object?
|
中间点样式 CircleMarkerOptions |
圆编辑插件。用于编辑AMap.Circle对象,功能包括使用鼠标改变圆半径大小、拖拽圆心改变圆的位置。
(Map)
AMap.Map 实例
(Circle?)
可选参数, AMap.Circle 实例
(Object?)
设置参数
Name | Description |
---|---|
opts.createOptions Object?
|
新创建的对象样式 |
opts.editOptions Object?
|
编辑样式 |
opts.movePoint Object?
|
移动点样式 MarkerOptions |
opts.resizePoint Object?
|
reaize点样式 MarkerOptions |
贝塞尔曲线编辑器
(Map)
AMap.Map 实例
(BezierCurve?)
曲线示例
(Object?)
设置参数
Name | Description |
---|---|
opts.createOptions Object?
|
新创建的对象样式 |
opts.editOptions Object?
|
编辑样式 |
opts.controlPoint Object?
|
顶点样式 MarkerOptions |
opts.midControlPoint Object?
|
中间点样式 MarkerOptions |
opts.bezierControlPoint Object?
|
贝塞尔控制点样式 MarkerOptions |
opts.bezierControlLine Object?
|
贝塞尔控制线样式 PolylineOptions |
设置编辑对象
(BezierCurve?)
获取编辑对象
(BezierCurve | undefined)
:
[overlay]
当前编辑对象
开始编辑对象
结束编辑对象
增加一个节点时触发此事件
({target: BezierCurve, lnglat: Lnglat, pixel: Pixel})
调整折线上某个点时触发此事件
({target: BezierCurve, lnglat: Lnglat, pixel: Pixel})
删除一个节点时触发此事件
({target: BezierCurve, lnglat: Lnglat, pixel: Pixel})
创建一个折线之后触发该事件,target即为创建对象。当editor编辑对象为空时,调用open接口,再点击一次屏幕就会创建新的覆盖物对象
({target: BezierCurve})
调用close之后触发该事件,target即为编辑后的覆盖物对象
({target: BezierCurve})
椭圆编辑器
(Map)
AMap.Map 的实例
(Ellipse?)
AMap.Ellipse 的实例
(Object?)
设置参数
Name | Description |
---|---|
opts.createOptions Object?
|
新创建的对象样式 |
opts.editOptions Object?
|
编辑样式 |
opts.movePoint Object?
|
移动点样式 MarkerOptions |
opts.resizeXPoint Object?
|
reaizeX点样式 MarkerOptions |
opts.resizeYPoint Object?
|
reaizeY点样式 MarkerOptions |
矩形编辑器
(Map)
AMap.Map 的实例
(Rectangle?)
AMap.Rectangle 的实例
(Object?)
设置参数
Name | Description |
---|---|
opts.createOptions Object?
|
新创建的对象样式 |
opts.editOptions Object?
|
编辑样式 |
opts.southWestPoint Object?
|
西南点样式 MarkerOptions |
opts.northEastPoint Object?
|
东北点样式 MarkerOptions |
用于调用 Web 服务 API,直接透传查询条件和返回结果
用于调用 Web 服务 API,直接透传查询条件和返回结果,提供GET和POST两种请求方式,具体请求接口和返回结果,请参考 https://lbs.amap.com/api/webservice/summary/
以 GET 请求方式请求指定的 Web 服务 API 接口
(string)
Web服务API的接口路径
(object)
Web服务 API 的查询参数
(WebServiceCallback)
查询回调函数
(HttpOptions
= {}
)
HTTP 请求参数配置
AMap.WebService.get('https://restapi.amap.com/v3/place/text',
{
keywords : '首开广场',
types : '写字楼',
city : '010'
},function (error, result) {
console.log(error, result);
}
);
以 POST 请求方式请求指定的 Web 服务 API 接口, 目前只有轨迹纠偏接口需要使用 POST 方式
AMap.WebService.post('https://restapi.amap.com/v4/grasproad/driving',
[
{"x":116.478928,"y":39.997761,"sp":19,"ag":0, "tm":1478031031},
{"x":116.478907,"y":39.998422,"sp":10,"ag":0, "tm":2},
{"x":116.479384,"y":39.998546,"sp":10,"ag":110,"tm":3},
{"x":116.481053,"y":39.998204,"sp":10,"ag":120,"tm":4},
{"x":116.481793,"y":39.997868,"sp":10,"ag":120,"tm":5}
],function (error, result) {
console.log(error, result);
}
);
WebService 的回调函数类型
Type: Function
(string)
服务查询的状态结果,'complete' 或 'error'
(any)
Web服务API返回的数据
用于进行 POI 搜索联想与数据查询的相关类型
根据输入关键字提示匹配信息,可将Poi类型和城市作为输入提示的限制条件。用户可以通过自定义回调函数取回并显
(object)
输入提示参数
Name | Description |
---|---|
opts.type string
|
输入提示时限定POI类型,多个类型用“|”分隔,目前只支持Poi类型编码如“050000” 默认值:所有类别 |
opts.city string
|
输入提示时限定城市。可选值:城市名(中文或中文全拼)、citycode、adcode;默认值:“全国” |
opts.datatype string
|
返回的数据类型。可选值:all-返回所有数据类型、poi-返回POI数据类型、bus-返回公交站点数据类型、busline-返回公交线路数据类型目前暂时不支持多种类型 |
opts.citylimit boolean
|
是否强制限制在设置的城市内搜索,默认值为:false,true:强制限制设定城市,false:不强制限制设定城市 |
opts.input (string | HTMLDivElement)
|
可选参数,用来指定一个input输入框,设定之后,在input输入文字将自动生成下拉选择列表。支持传入输入框DOM对象的id值,或直接传入输入框的DOM对象。 |
opts.output (string | HTMLDivElement)
|
可选参数,指定一个现有的div的id或者元素,作为展示提示结果的容器,当指定了input的时候有效,缺省的时候将自动创建一个显示结果面板 |
opts.outPutDirAuto boolean
|
默认为true,表示是否在input位于页面较下方的时候自动将输入面板显示在input上方以避免被遮挡 |
opts.closeResultOnScroll boolean
|
页面滚动时关闭搜索结果列表,默认 true |
opts.lang string
|
设置检索语言类型,默认中文 'zh_cn' |
var auto;
//加载输入提示插件
map.plugin(['AMap. Autocomplete'], function() {
let autoOptions = {
city: '010' //城市,默认全国
};
auto = new AMap.Autocomplete(autoOptions);
}};
设置提示Poi类型,多个类型用“|”分隔,POI相关类型请在网站“相关下载”处下载,目前只支持Poi类型编码如“050000” 默认值:所有类别
(String)
提示Poi类型
设置城市
(String)
城市
设置是否强制限制城市
(boolean)
是否强制限制城市
根据输入关键字提示匹配信息,支持中文、拼音
(String)
关键字
(AutoCompleteSearchCallback)
搜索结果回调
搜索结果回调
Type: function
(string)
返回信息状态 可取值:'complete': result 为 AutocompleteResult; 'error': result为错误信息;'no_data': result 为 0
地点搜索服务插件,提供某一特定地区的位置查询服务。
mapObj.plugin(['AMap.PlaceSearch'], function() {
var PlaceSearchOptions = { //设置PlaceSearch属性
city: "北京", //城市
type: "", //数据类别
pageSize: 10, //每页结果数,默认10
pageIndex: 1, //请求页码,默认1
extensions: "base" //返回信息详略,默认为base(基本信息)
};
var MSearch = new AMap.PlaceSearch(PlaceSearchOptions); //构造PlaceSearch类
AMap.event.addListener(MSearch, "complete", keywordSearch_CallBack); //返回结果
MSearch.search('方恒国际中心'); //关键字查询
});
根据输入关键字提示匹配信息,支持中文、拼音
(string)
关键字
(searchCallback)
搜索结果回调
根据范围和关键词进行范围查询
根据PGUID 查询POI 详细信息
(string)
PGUID
设置查询类别,多个类别用“|”分割
(string)
类别
设置显示查询结果页码
(number)
结果页码
设置每页显示查询结果数量
(number)
页数
设置查询城市, 支持cityname(中文或中文全拼)、citycode、adcode
(string)
城市标识
设置是否强制限制城市
(boolean)
是否开启
唤起高德地图客户端marker页 Object 参数:{ id: "B000A7BD6C", POIID name:String, 必要参数 location:LngLat|position属性 必须参数 } 例如:{ id: "B000A7BD6C", location: LngLat, name: "清华大学", address: "地址" }
(any)
(object)
调起参数
唤起高德地图客户端POI详情页 Object 参数:{ id: "B000A7BD6C", POIID name:String, 必要参数 location:LngLat|position属性 必须参数 }
(any)
(object)
调起
使用map、panel属性后,选中的POI改变时触发
(object)
返回参数
Name | Description |
---|---|
event.type string
|
事件类别 |
event.id string
|
当前选中的POI的ID |
event.marker Marker
|
当前选中的POI对应的在地图中的Marker对象 |
event.listElement HTMLElement
|
当前选中的POI在结果面板中对应的列表项 |
event.data POI
|
当前选中的POI的信息 |
使用map、panel属性后,POI在地图中对应的Marker被点击时触发
(object)
返回参数
Name | Description |
---|---|
event.type string
|
事件类别 |
event.id string
|
当前选中的POI的ID |
event.marker Marker
|
当前选中的POI对应的在地图中的Marker对象 |
event.listElement HTMLElement
|
当前选中的POI在结果面板中对应的列表项 |
event.data POI
|
当前选中的POI的信息 |
使用map、panel属性后,结果面板中POI对应的列表项被点击时触发
(object)
返回参数
Name | Description |
---|---|
event.type string
|
事件类别 |
event.id string
|
当前选中的POI的ID |
event.marker Marker
|
当前选中的POI对应的在地图中的Marker对象 |
event.listElement HTMLElement
|
当前选中的POI在结果面板中对应的列表项 |
event.data POI
|
当前选中的POI的信息 |
搜索结果回调
Type: function
(string)
返回信息状态 可取值:'complete': result 为 AutocompleteResult; 'error': result为错误信息;'no_data': result 为 0
(SearchResult)
返回结果详细信息
Name | Description |
---|---|
result.info string
|
成功状态说明 |
result.keywordList Array<keyword>
|
发生事件且查无此关键字时,返回建议关键字列表,可根据建议关键字查询 |
result.cityList Array<cityInfo>
|
发生事件且查无此关键字且 city 为“全国”时,返回城市建议列表,该列表中每个城市包含一个或多个相关Poi点信息 |
result.cityList.name string
|
建议城市名称 |
result.cityList.citycode string
|
城市编码 |
result.cityList.adcode string
|
行政区编码 |
result.cityList.count string
|
该城市的建议结果数目 |
result.poiList object
|
发生事件时返回兴趣点列表 |
result.poiList.pageIndex number
|
页码 |
result.poiList.pageSize number
|
单页结果数 |
result.poiList.count number
|
查询结果总数 |
result.poiList.pois Array<POI>
|
Poi列表 |
result.poiList.pois.id string
|
兴趣点id |
result.poiList.pois.name string
|
名称 |
result.poiList.pois.type string
|
兴趣点类型 |
result.poiList.pois.location LngLat
|
兴趣点经纬度 |
result.poiList.pois.address string
|
地址 |
result.poiList.pois.distance number
|
离中心点距离,仅周边查询返回 |
result.poiList.pois.tel string
|
电话 |
result.poiList.pois.website string
|
网址 |
result.poiList.pois.pcode string
|
poi所在省份编码 |
result.poiList.pois.citycode string
|
poi所在城市编码 |
result.poiList.pois.adcode string
|
poi所在区域编码 |
result.poiList.pois.postcode string
|
邮编 |
result.poiList.pois.pname string
|
poi所在省份 |
result.poiList.pois.cityname string
|
poi所在城市名称 |
result.poiList.pois.adname string
|
poi所在行政区名称 |
result.poiList.pois.email string
|
电子邮箱 |
result.poiList.pois.entr_location LngLat
|
入口经纬度,POI点有出入口信息时返回,否则返回空字符串 |
result.poiList.pois.exit_location LngLat
|
出口经纬度,POI点有出入口信息时返回,否则返回空字符串 |
云数据检索服务类
(string)
(CloudDataSearchOptions)
Name | Description |
---|---|
opts.map Map
|
AMap.Map对象, 展现结果的地图实例。当指定此参数后,搜索结果的标注、线路等均会自动添加到此地图上。可选值 |
opts.keywords string
|
云检索关键字,仅支持对建立了文本索引的字段进行模糊检索(请在 云数据管理平台 中管理文本索引) |
opts.filter string
|
云检索的筛选条件,仅支持对建立了排序筛选索引的字段进行筛选(请在云数据管理平台中管理排序筛选索引);支持多个筛选条件,支持对文本字段的精确匹配和对数值字段的区间筛选。筛选条件之间使用“+”代表“与”关系,如:filter:"_name:酒店+star: [3,5] "(等同于SOL语句的:WHERE_name="酒店" AND star BETWEEN 3 AND 5) |
opts.orderBy string
|
返回数据的排序规则。1.支持系统预设排序规则:_distance:坐标与中心点距离升序排序(仅对周边检索有效;)_weight:权重降序排序。默认值:1)当设置了keywords时,默认按"_weight"权重排序;2)当未设置keywords时,默认按"_distance"距离排序。2.支持对建立了排序筛选索引的整数或小数字段进行排序(请在云数据管理平台中管理排序筛选索引)。升降序分别为"ASC"、"DESC",若仅填字段不填升降序则默认按升序排列,如:orderBy:"age:ASC" |
opts.pageSize number
|
单页显示结果数,取值范围 [0-100] ,超过取值范围取默认值,默认:20 |
opts.pageIndex number
|
当前页码,取值>=1,默认1 |
opts.panel (string | HTMLElement)
|
结果列表的HTML容器id或容器元素,提供此参数后,结果列表将在此容器中进行展示。可选值 |
opts.autoFitView boolean
|
用于控制在搜索结束后,是否自动调整地图视野使绘制的Marker点都处于视口的可见范围 |
AMap.plugin('AMap.CloudDataSearch', function(){
var map = new AMap.Map("map", {
resizeEnable: true,
zoom: 12 //地图显示的缩放级别
});
var search, center = new AMap.LngLat(116.39946, 39.910829);
var searchOptions = {
map: map,
panel: 'panel',
keywords: '',
pageSize: 5,
orderBy: '_id:ASC'
};
search = new AMap.CloudDataSearch('532b9b3ee4b08ebff7d535b4', searchOptions);
search.searchNearBy(center, 1000);
});
设置云数据检索属性
(CloudDataSearchOptions)
清除搜索结果
周边检索,根据指定的中心点和半径检索位置数据。
(LngLat)
搜索中心
(number)
取值范围
[0-50000]
,超过取值范围按3000,单位:米
(CloudDataSearchCallback)
搜索回调
根据数据id检索位置数据,id检索时不需要设置CloudDataSearchOptions
(string)
(CloudDataSearchCallback)
搜索回调
根据行政区划(包括全国/省/市/区县)名称,检索行政区划内位置数据.
(string)
district为“全国”,则对全表搜索当district非法或不正确时,按照district为“全国”返回
(CloudDataSearchCallback)
搜索回调
多边形检索,根据给定的多边形节点坐标数组,检索位置数据。如果数组只有两个坐标元素,则认为多边形为矩形,这两个点为矩形的左下、右上点。多边形坐标数组的起、终点必须保证多边形闭合(起、终点坐标相同)
(CloudDataSearchCallback)
搜索回调
搜索结果回调
Type: function
(string)
返回信息状态 可取值:'complete': result 为 AutocompleteResult; 'error': result为错误信息;'no_data': result 为 0
(object)
返回结果详细信息
Name | Description |
---|---|
result.info string
|
成功状态文字描述 |
result.count number
|
查询结果总数 |
result.datas Array<CloudData>
|
云数据数组,当根据数据id检索时,数据仅包含一个CloudData |
result._id string
|
数据id,id为数据唯一标识 |
result._name string
|
名称 |
result._location LngLat
|
坐标 |
result._address string
|
地址 |
result._updatetime string
|
数据更新时间 |
result._distance number
|
距离中心点距离(仅周边查询时返回) |
result.custom_field1 any
|
用户自定义字段1 |
result._image Array<Image>
|
图片信息 |
result._image._id string
|
图片的id标识 |
result._image._preurl string
|
经过压缩处理的图片地址,尺寸为400*400,若期望获取体积较小的图片文件,建议使用此地址 |
result._image._url string
|
最大限制获取1024*1024,若您的原始图片小于该尺寸,将返回原图。 |
用于经纬度与地址之间的相互查询
AMap.Geocoder 地理编码与逆地理编码类,用于地址描述与经纬度坐标之间的转换。用户可以通过回调函数获取查询结果。 相关示例
(GeocoderOptions)
Name | Description |
---|---|
opts.city string
|
城市,地理编码时,设置地址描述所在城市
可选值:城市名(中文或中文全拼)、citycode、adcode
默认值:“全国”
|
opts.radius number
|
逆地理编码时,以给定坐标为中心点,单位:米
取值范围:0 - 3000
默认值:1000
|
opts.lang string
|
设置语言类型
可选值:zh_cn(中文)、en(英文)
默认值:zh_cn(中文
|
opts.batch boolean
|
是否批量查询
batch 设置为 false 时,只返回第一条记录
|
opts.extensions string
|
逆地理编码时,返回信息的详略
默认值:base,返回基本地址信息
取值为:all,返回地址信息及附近poi、道路、道路交叉口等信息
|
var geocoder;
//加载地理编码插件
mapObj.plugin(["AMap.Geocoder"], function() { //加载地理编码插件
geocoder = new AMap.Geocoder({
radius: 1000, //以已知坐标为中心点,radius为半径,返回范围内兴趣点和道路信息
extensions: "all" //返回地址描述以及附近兴趣点和道路信息,默认“base”
});
//返回地理编码结果
geocoder.on("complete", geocoder_CallBack);
//逆地理编码
geocoder.getAddress(new AMap.LngLat(116.359119, 39.972121));
});
将地址信息转化为高德经纬度坐标信息
(String)
关键字
(GeocoderCallback)
回调函数
地理编码时,设置地址描述所在城市
(String)
所在城市
将高德经纬度坐标信息转化为结构化的地址信息
(ReGeocoderCallback)
回调函数
当编码执行成功时触发此事件
(GeocodeResult)
当编码执行失败时触发此事件
(ErrorStatus)
Geocoder getLocation 回调函数
Type: Function
Geocoder getAddress 回调函数
Type: Function
地球上同一个地理位置的经纬度,在不同的坐标系中,会有少于偏移,国内目前常见的坐标系主要分为三种: 1. 地球坐标系——WGS84:常见于 GPS 设备,Google 地图等国际标准的坐标体系。 2. 火星坐标系——GCJ-02:中国国内使用的被强制加密后的坐标体系,高德坐标就属于该种坐标体系。 3. 百度坐标系——BD-09:百度地图所使用的坐标体系,是在火星坐标系的基础上又进行了一次加密处理。 因此在使用不同坐标系前,我们需要使用 AMap.convertFrom() 方法将这些非高德坐标系进行转换。 相关示例
var gps = [116.3, 39.9];
AMap.convertFrom(gps, 'gps', function (status, result) {
if (result.info === 'ok') {
var lnglats = result.locations; // Array.<LngLat>
}
});
用于驾车、货车、骑行、步行、公交等的路线规划查询
驾车路线规划服务,提供起、终点坐标的驾车导航路线查询功能。AMap. Driving构造函数的参数为 DrivingOptions 对象。DrivingOptions 允许设置驾车策略和返回信息详略。用户可以通过自定义回调函数取回并显示查询结果。若服务请求失败,系统将返回错误信息
(DrivingOptions)
参数信息
Name | Description |
---|---|
opts.map Map
|
AMap.Map对象, 展现结果的地图实例。当指定此参数后,搜索结果的标注、线路等均会自动添加到此地图上。可选 |
opts.policy number?
|
驾车路线规划策略 |
opts.extensions string
(default 'base' )
|
默认值:base,返回基本地址信息\n当取值为:all,返回DriveStep基本信息+DriveStep详细信息 |
opts.ferry number
(default 0 )
|
默认为0,表示可以使用轮渡,为1的时候表示不可以使用轮渡 |
opts.panel (string | HTMLElement)?
|
结果列表的HTML容器id或容器元素,提供此参数后,结果列表将在此容器中进行展示。可选 |
opts.hideMarkers boolean
(default false )
|
设置隐藏路径规划的起始点图标 设置为true:隐藏图标;设置false:显示图标\n默认值为:false |
opts.showTraffic boolean?
|
设置是否显示实时路况信息,默认设置为true。 显示绿色代表畅通,黄色代表轻微拥堵,红色代表比较拥堵,灰色表示无路况信息。 |
opts.province string?
|
车牌省份的汉字缩写,用于判断是否限行,与number属性组合使用,可选。例如:京 |
opts.number string?
|
除省份之外车牌的字母和数字,用于判断限行相关,与province属性组合使用,可选。例如:NH1N11 |
opts.isOutline boolean?
|
使用map属性时,绘制的规划线路是否显示描边。缺省为true |
opts.outlineColor string?
|
使用map属性时,绘制的规划线路的描边颜色。缺省为'white' |
opts.autoFitView boolean?
|
用于控制在路径规划结束后,是否自动调整地图视野使绘制的路线处于视口的可见范围 |
var driving;
mapObj.plugin(["AMap.Driving"], function() { //加载驾车服务插件
var drivingOptions = {
//驾车策略,包括 LEAST_TIME,LEAST_FEE, LEAST_DISTANCE,REAL_TRAFFIC
policy: AMap.DrivingPolicy.LEAST_TIME
};
driving = new AMap.Driving(drivingOptions);
AMap.Event.addListener(driving, "complete", driving_CallBack); //返回导航查询结果
//根据起终点坐标规划驾车路线
MDrive.search(new AMap.LngLat(116.379018, 39.865026), new AMap.LngLat(116.42732, 39.903752));
});
根据起点、终点和途经点(可选)坐标或名称,实现驾车路线规划,途经点通过opts设定
(DrivingCallback)
status为complete时,result为DrivingResult;当status为error时,result为错误信息info;当status为no_data时,代表检索返回0结果。
清除搜索结果
清除避让区域
设置避让道路名称,只支持一条避让道路 注:避让道路和避让区域不能同时使用
(string)
清除避让道路
获取避让道路
string
:
设置驾车路线规划策略
(Object)
驾车路线规划策略
当查询成功时触发此事件
Type: DrivingResult
当查询失败时触发此事件
Type: DrivingResult
Driving.search 的回调函数
Type: Function
(string)
status为complete时,result为DrivingResult;当status为error时,result为错误信息info;当status为no_data时,代表检索返回0结果
((info | DrivingResult))
DrivingResult 对象
Type: Object
(string)
: 成功状态说明
(LngLat)
: 驾车规划起点坐标
(LngLat)
: 驾车规划终点坐标
(Poi)
: 驾车规划起点
(Poi)
: 驾车规划终点
(Poi)
: 驾车规划途经点
(number)
: 打车费用,仅extensions为“all”时返回. 单位: 元
(Array<DriveRoute>)
: 驾车规划路线列表
Name | Description |
---|---|
routes.route DriveRoute
|
驾车规划路线列表元素 |
routes.route.distance number
|
起点到终点的驾车距离,单位:米 |
routes.route.time number
|
时间预计,单位:秒 |
routes.route.policy string
|
驾车规划策略 |
routes.route.tolls number
|
此驾车路线收费金额,单位:元 |
routes.route.tolls_distance number
|
收费路段长度,单位:米 |
routes.route.restriction number
|
限行结果,0 代表限行已规避或未限行,即该路线没有限行路段,1 代表限行无法规避,即该线路有限行路段 |
(Array<(DriveStepBasic | DriveStepDetail)>)
: 子路段DriveStep集合
DriveStep 对象(基本信息)
Type: Object
(LngLat)
: 此路段起点
(LngLat)
: 此路段终点
(string)
: 此路段说明,如“沿北京南站路行驶565米右转”
(string)
: 本驾车子路段完成后动作
(string)
: 驾车子路段完成后辅助动作,一般为到达某个目的地时返回
(string)
: 驾车方向
(string)
: 驾车方向
(number)
: 此路段距离,单位:米
(number)
: 此段收费,单位:元
(number)
: 收费路段长度,单位:米
(string)
: 主要收费道路
(number)
: 此路段预计使用时间,单位:秒
DriveStep 对象(详细信息)
Type: Object
(Array<ViaCity>)
: 途径城市列表
Name | Description |
---|---|
cities.city ViaCity
|
途径城市列表元素 |
cities.city.name string
|
途径名称 |
cities.city.citycode string
|
城市编码 |
cities.city.adcode string
|
区域编码 |
cities.city.districts Array<District>
|
途径行政区列表 |
cities.city.districts.district District
|
途径行政区列表元素 |
cities.city.districts.district.name string
|
区域名称 |
cities.city.districts.district.adcode string
|
区域编码 |
驾车路线规划服务,提供起、终点坐标的驾车导航路线查询功能。AMap. Driving构造函数的参数为 DrivingOptions 对象。DrivingOptions 允许设置驾车策略和返回信息详略。用户可以通过自定义回调函数取回并显示查询结果。若服务请求失败,系统将返回错误信息
(TruckDrivingOptions)
参数信息
Name | Description |
---|---|
opts.map Map
|
AMap.Map对象, 展现结果的地图实例。当指定此参数后,搜索结果的标注、线路等均会自动添加到此地图上。可选 |
opts.policy number?
|
货车路线规划策略strategy |
opts.size number
|
车型大小,必填,1-4分别对应小型至大型 |
opts.width number
(default 2.5 )
|
宽度,缺省2.5米 |
opts.height number
(default 1.6 )
|
高度,缺省1.6米 |
opts.load number
(default 0.9 )
|
载重,缺省0.9t |
opts.weight number
(default 10 )
|
自重,缺省10t |
opts.axlesNum number
(default 2 )
|
轴数,缺省2轴 |
opts.extensions string
(default 'base' )
|
默认值:base,返回基本地址信息\n当取值为:all,返回DriveStep基本信息+DriveStep详细信息 |
opts.panel (string | HTMLElement)?
|
结果列表的HTML容器id或容器元素,提供此参数后,结果列表将在此容器中进行展示。可选 |
opts.hideMarkers boolean
(default false )
|
设置隐藏路径规划的起始点图标 设置为true:隐藏图标;设置false:显示图标\n默认值为:false |
opts.showTraffic boolean?
|
设置是否显示实时路况信息,默认设置为true。 显示绿色代表畅通,黄色代表轻微拥堵,红色代表比较拥堵,灰色表示无路况信息。 |
opts.province string?
|
车牌省份的汉字缩写,用于判断是否限行,与number属性组合使用,可选。例如:京 |
opts.number string?
|
除省份之外车牌的字母和数字,用于判断限行相关,与province属性组合使用,可选。例如:NH1N11 |
opts.isOutline boolean?
|
使用map属性时,绘制的规划线路是否显示描边。缺省为true |
opts.outlineColor string?
|
使用map属性时,绘制的规划线路的描边颜色。缺省为'white' |
opts.autoFitView boolean?
|
用于控制在路径规划结束后,是否自动调整地图视野使绘制的路线处于视口的可见范围 |
var driving;
mapObj.plugin(["AMap.TruckDriving"], function() { //加载驾车服务插件
var drivingOptions = {
//驾车策略,包括 LEAST_TIME,LEAST_FEE, LEAST_DISTANCE,REAL_TRAFFIC
policy: AMap.DrivingPolicy.LEAST_TIME
};
driving = new AMap.TruckDriving(drivingOptions);
AMap.Event.addListener(driving, "complete", driving_CallBack); //返回导航查询结果
//根据起终点坐标规划驾车路线
MDrive.search(new AMap.LngLat(116.379018, 39.865026), new AMap.LngLat(116.42732, 39.903752));
});
var TruckDriving;
mapObj.plugin(["AMap.TruckDriving"], function() { //加载驾车服务插件
var TruckDrivingOptions = {
//驾车策略,包括 LEAST_TIME,LEAST_FEE, LEAST_DISTANCE,REAL_TRAFFIC
policy: AMap.TruckDrivingPolicy.LEAST_TIME
};
TruckDriving = new AMap.TruckDriving(TruckDrivingOptions);
AMap.Event.addListener(TruckDriving, "complete", TruckDriving_CallBack); //返回导航查询结果
//根据起终点坐标规划驾车路线
MDrive.search(new AMap.LngLat(116.379018, 39.865026), new AMap.LngLat(116.42732, 39.903752));
});
清除搜索结果
根据起点、终点和途经点(可选)坐标或名称,实现驾车路线规划,途经点通过opts设定
(Array<Truck~Location>)
途经点列表
Name | Description |
---|---|
locations.location Truck~Location
|
某一个途经点 |
locations.location.lnglat [number, number]
|
经纬度 |
locations.location.pid string
|
POI ID,可缺省 |
locations.location.type string
|
POI类型,可缺省 |
(DrivingCallback)
status为complete时,result为TruckResult;当status为error时,result为错误信息info;当status为no_data时,代表检索返回0结果。
根据起点、终点和途经点(可选)坐标或名称,实现驾车路线规划,途经点通过opts设定
(Array<Truck~Path>)
途经点列表 例如 :
[{keyword:'北京站',city:'010'},//起点
{keyword:'北京西站',city:'010'},//途径
{keyword:'北京大学',city:'010'}//终点
]
Name | Description |
---|---|
points.point Truck~Path
|
某个途经点 |
points.point.keyworkd string
|
关键字 |
points.point.city string
|
城市code |
(DrivingCallback)
status为complete时,result为TruckResult;当status为error时,result为错误信息info;当status为no_data时,代表检索返回0结果。
设置驾车路线规划策略,参考opts.policy
当查询成功时触发此事件
(DrivingResult)
当查询失败时触发此事件
(ErrorStatus)
步行路线规划服务,提供起、终点坐标的驾车导航路线查询功能。AMap. Driving构造函数的参数为 DrivingOptions 对象。DrivingOptions 允许设置驾车策略和返回信息详略。用户可以通过自定义回调函数取回并显示查询结果。若服务请求失败,系统将返回错误信息
(WalkingOptions)
参数信息
Name | Description |
---|---|
opts.map Map
|
AMap.Map对象, 展现结果的地图实例。当指定此参数后,搜索结果的标注、线路等均会自动添加到此地图上。可选 |
opts.panel (string | HTMLElement)?
|
结果列表的HTML容器id或容器元素,提供此参数后,结果列表将在此容器中进行展示。可选 |
opts.hideMarkers boolean
(default false )
|
设置隐藏路径规划的起始点图标 设置为true:隐藏图标;设置false:显示图标\n默认值为:false 显示绿色代表畅通,黄色代表轻微拥堵,红色代表比较拥堵,灰色表示无路况信息。 |
opts.isOutline boolean?
|
使用map属性时,绘制的规划线路是否显示描边。缺省为true |
opts.outlineColor string?
|
使用map属性时,绘制的规划线路的描边颜色。缺省为'white' |
opts.autoFitView boolean?
|
用于控制在路径规划结束后,是否自动调整地图视野使绘制的路线处于视口的可见范围 |
var mwalk;
mapObj.plugin(["AMap.Walking"], function() { //加载步行导航插件
mwalk = new AMap.Walking (); //构造步行导航类
AMap.event.addListener(mwalk, "complete", walking_CallBack); //返回导航查询结果
//根据起、终点坐标规划步行路线
mwalk.search(new AMap.LngLat(116.379018, 39.865026), new AMap.LngLat(116.42732, 39.903752));
});
var mwalk;
mapObj.plugin(["AMap.Walking"], function() { //加载步行导航插件
mwalk = new AMap.Walking (); //构造步行导航类
AMap.Event.addListener(mwalk, "complete", walking_CallBack); //返回导航查询结果
//根据起、终点坐标规划步行路线
mwalk.search(new AMap.LngLat(116.379018, 39.865026), new AMap.LngLat(116.42732, 39.903752));
});
清除搜索的结果
根据起点、终点坐标,实现步行路线规划
(LngLat)
起点经纬度
(LngLat)
终点经纬度
(WalkingCallback)
status为complete时,result为 WalkingResult;当status为error时,result为错误信息info;当status为no_data时,代表检索返回0结果。
根据起点、终点名称,实现步行路线规划
(WalkingCallback)
status为complete时,result为 WalkingResult;当status为error时,result为错误信息info;当status为no_data时,代表检索返回0结果。
当查询成功时触发此事件
Type: WalkingResult
当查询失败时触发此事件, ErrorStatus
Type: ErrorStatus
Walking.search 的回调函数
Type: Function
(string)
status为complete时,result为 WalkingResult;当status为error时,result为错误信息info;当status为no_data时,代表检索返回0结果
((info | WalkingResult))
WalkingResult 对象
Type: Object
(string)
: 成功状态说明
(LngLat)
: 步行规划起点坐标
(LngLat)
: 步行规划终点坐标
(Poi)
: 步行规划起点
(Poi)
: 步行规划终点
(number)
: 步行导航路段数目
(Array<WalkRoute>)
: 步行规划路线列表
Name | Description |
---|---|
routes.distance number
|
起点到终点总步行距离,单位:米 |
routes.time number
|
步行时间预计,单位:秒 |
routes.steps Array<WalkStep>
|
路段列表,以道路名称作为分段依据,将整个步行导航方案分隔成若干路段 |
routes.steps.instruction string
|
步行子路段描述,规则:沿 road步行 distance 米 action,例:”沿北京站街步行351米” |
routes.steps.distance number
|
步行子路段距离,单位:米 |
routes.steps.time number
|
步行子路段预计使用时间,单位:秒 |
routes.steps.path Array<LngLat>
|
步行子路段坐标集合 |
routes.steps.road string
|
道路 |
routes.steps.action string
|
本步行子路段完成后动作 |
routes.steps.assist_action string
|
步行子路段完成后辅助动作,一般为到达某个公交站点或目的地时返回 |
公交换乘服务,提供起始点公交路线规划服务,目前公交换乘仅支持同一城市的公交路线规划,跨城市出行规划请参考驾车导航查询。公交换乘查询返回结果整合步行信息,若换乘路段(Segment)换乘类型为地铁 “SUBWAY”,则至少包含一条地铁口信息(SubwayEntrance)。用户可以通过自定义回调函数取回并显示查询结果。若服务请求失败,系统将返回错误信息。
(DrivingOptions)
参数信息
Name | Description |
---|---|
opts.map Map
|
AMap.Map对象, 展现结果的地图实例。当指定此参数后,搜索结果的标注、线路等均会自动添加到此地图上。可选 |
opts.city string
|
公交换乘的城市,支持城市名称、城市区号、电话区号,此项为必填 |
opts.policy number
|
公交换乘策略strategy |
opts.nightflag boolean
(default false )
|
是否计算夜班车,默认为不计算。true:计算,false:不计算 |
opts.extensions string
(default 'base' )
|
默认值:base,返回基本地址信息\n当取值为:all,返回DriveStep基本信息+DriveStep详细信息 |
opts.panel (string | HTMLElement)?
|
结果列表的HTML容器id或容器元素,提供此参数后,结果列表将在此容器中进行展示。可选 |
opts.hideMarkers boolean
(default false )
|
设置隐藏路径规划的起始点图标 设置为true:隐藏图标;设置false:显示图标\n默认值为:false |
opts.isOutline boolean?
|
使用map属性时,绘制的规划线路是否显示描边。缺省为true |
opts.outlineColor string?
|
使用map属性时,绘制的规划线路的描边颜色。缺省为'white' |
opts.autoFitView boolean?
|
用于控制在路径规划结束后,是否自动调整地图视野使绘制的路线处于视口的可见范围 |
var trans;
mapObj.plugin(["AMap.Transfer"], function() { //加载公交换乘插件
transOptions = {
city: '北京市', //公交城市
policy: AMap.TransferPolicy.LEAST_TRANSFER //乘车策略
};
trans = new AMap.Transfer (transOptions); //构造公交换乘类
AMap.Event.addListener(trans, "complete", trans_CallBack); //返回导航查询结果
AMap.Event.addListener(trans, "error", function(e){alert(e.info);}); //返回错误信息
//根据起、终点坐标查询公交换乘路线
trans.search(new AMap.LngLat(116.379018, 39.865026), new AMap.LngLat(116.42732, 39.903752));
});
根据起点和终点坐标,进行公交换乘查询
(LngLat)
起点经纬度
(LngLat)
终点经纬度
(TransferCallback)
status为complete时,result为DrivingResult;当status为error时,result为错误信息info;当status为no_data时,代表检索返回0结果。
根据起点和终点坐标,进行公交换乘查询
(TransferCallback)
status为complete时,result为DrivingResult;当status为error时,result为错误信息info;当status为no_data时,代表检索返回0结果。
清除结果显示
设置公交换乘策略
(TransferPolicy)
公交换乘策略
设置公交换乘查询的城市
(String)
城市
设置公交换乘查询的目的地城市
(String)
城市
当查询成功时触发此事件
Type: TransferResult
当查询失败时触发此事件
Type: TransferResult
Transfer.search 的回调函数 相关示例
Type: Function
(string)
当status为complete时,result为TransferResult;
当status为error时,result为错误信息info;
当status为no_data时,代表检索返回0结果
((info | TransferResult))
TransferResult 对象 详细文档,查阅rest接口 '返回结果参数说明'
Type: Object
骑行路线规划服务,提供起、终点坐标的驾车导航路线查询功能。AMap. Driving构造函数的参数为 DrivingOptions 对象。DrivingOptions 允许设置驾车策略和返回信息详略。用户可以通过自定义回调函数取回并显示查询结果。若服务请求失败,系统将返回错误信息
(RidingOptions)
参数信息
Name | Description |
---|---|
opts.map Map
|
AMap.Map对象, 展现结果的地图实例。当指定此参数后,搜索结果的标注、线路等均会自动添加到此地图上。可选 |
opts.policy number
(default 0 )
|
骑行路线规划策略;默认值:0可选值为: 0:推荐路线及最快路线综合 1:推荐路线 2:最快路线 |
opts.panel (string | HTMLElement)?
|
结果列表的HTML容器id或容器元素,提供此参数后,结果列表将在此容器中进行展示。可选 |
opts.hideMarkers boolean
(default false )
|
设置隐藏路径规划的起始点图标 设置为true:隐藏图标;设置false:显示图标\n默认值为:false 显示绿色代表畅通,黄色代表轻微拥堵,红色代表比较拥堵,灰色表示无路况信息。 |
opts.isOutline boolean?
|
使用map属性时,绘制的规划线路是否显示描边。缺省为true |
opts.outlineColor string?
|
使用map属性时,绘制的规划线路的描边颜色。缺省为'white' |
opts.autoFitView boolean?
|
用于控制在路径规划结束后,是否自动调整地图视野使绘制的路线处于视口的可见范围 |
var mwalk;
mapObj.plugin(["AMap.Riding"], function() { //加载步行导航插件
mwalk = new AMap.Riding (); //构造步行导航类
AMap.Event.addListener(mwalk, "complete", riding_CallBack); //返回导航查询结果
//根据起、终点坐标规划步行路线
mwalk.search(new AMap.LngLat(116.379018, 39.865026), new AMap.LngLat(116.42732, 39.903752));
});
清除搜索的结果
骑行路线规划策略
(number)
可选值为:
0:推荐路线及最快路线综合
1:推荐路线
2:最快路线
根据起点、终点坐标,实现骑行路线规划
(LngLat)
起点经纬度
(LngLat)
终点经纬度
(RidingCallback)
status为complete时,result为 RidingResult;当status为error时,result为错误信息info;当status为no_data时,代表检索返回0结果。
根据起点、终点名称,实现骑行路线规划
(RidingCallback)
status为complete时,result为 RidingResult;当status为error时,result为错误信息info;当status为no_data时,代表检索返回0结果。
当查询成功时触发此事件
Type: RidingResult
当查询失败时触发此事件, ErrorStatus
Type: ErrorStatus
Riding.search 的回调函数
Type: Function
(string)
status为complete时,result为 RidingResult;当status为error时,result为错误信息info;当status为no_data时,代表检索返回0结果
((info | RidingResult))
RidingResult 详细文档,查阅rest接口'返回结果参数说明'
Type: Object
(Map)
指定的地图对象
(DragRouteOptions)
配置项
Name | Description |
---|---|
opts.polyOption PolylineOptions?
|
设置拖拽路线插件的路线属性对象,包括线样式、宽度、颜色等,参考 PolylineOptions 列表 |
opts.startMarkerOptions MarkerOptions?
|
设置拖拽路线插件起点点标记属性对象,包括点标记样式、大小等,参考 MarkerOptions 列表 |
opts.midMarkerOptions MarkerOptions?
|
设置拖拽路线插件途经点点标记属性对象,包括点标记样式、大小等,参考 MarkerOptions 列表 |
opts.endMarkerOptions MarkerOptions?
|
设置拖拽路线插件终点点标记属性对象,包括点标记样式、大小等,参考 MarkerOptions 列表 |
opts.showTraffic boolean
(default true )
|
设置显示实时路况信息,true:路线中显示实时路况信息,false:关闭实时路况信息。 默认值:true |
var arr = new Array();//经纬度坐标数组
arr.push(new AMap.LngLat("116.403322","39.920255")); //初始的导航起点
arr.push(new AMap.LngLat("116.420703","39.897555")); //初始的导航途经点
arr.push(new AMap.LngLat("116.430703","39.897555")); //初始的导航途经点
arr.push(new AMap.LngLat("116.410703","39.897555")); //初始的导航终点
AMap.plugin(['AMap.DragRoute'],function(){
dragRoute = new AMap.DragRoute(mapObj, arr, AMap.DrivingPolicy.LEAST_FEE);
dragRoute.search(); //查询导航路径并开启拖拽导航
});
开始路径导航。支持鼠标拖拽导航路径节点,更改途经点时,系统实时重新计算并显示导航路径
销毁拖拽导航插件。
可拖拽货车路径规划
(Map)
指定的地图对象
(DragRouteTruckOptions)
配置项
Name | Description |
---|---|
opts.polyOption PolylineOptions?
|
设置拖拽路线插件的路线属性对象,包括线样式、宽度、颜色等,参考 PolylineOptions 列表 |
opts.startMarkerOptions MarkerOptions?
|
设置拖拽路线插件起点点标记属性对象,包括点标记样式、大小等,参考 MarkerOptions 列表 |
opts.midMarkerOptions MarkerOptions?
|
设置拖拽路线插件途经点点标记属性对象,包括点标记样式、大小等,参考 MarkerOptions 列表 |
opts.endMarkerOptions MarkerOptions?
|
设置拖拽路线插件终点点标记属性对象,包括点标记样式、大小等,参考 MarkerOptions 列表 |
opts.showTraffic boolean
(default true )
|
设置显示实时路况信息,true:路线中显示实时路况信息,false:关闭实时路况信息。 默认值:true |
opts.policy number?
|
驾车路线规划策略 1躲避拥堵 2不走高速 3避免收费 4躲避拥堵且不走高速 5避免收费且不走高速 6躲避拥堵且避免收费 7躲避拥堵且避免收费且不走高速 8高速优先 9躲避拥堵且高速优先 |
opts.size number
|
车型大小,必填,1-4分别对应小型至大型 |
opts.width number
(default 2.5 )
|
宽度,缺省2.5米 |
opts.height number
(default 1.6 )
|
高度,缺省1.6米 |
opts.load number
(default 0.9 )
|
载重,缺省0.9t |
opts.weight number
(default 10 )
|
自重,缺省10t |
opts.axlesNum number
(default 2 )
|
轴数,缺省2轴 |
opts.extensions string
(default 'base' )
|
默认值:base,返回基本地址信息\n当取值为:all,返回DriveStep基本信息+DriveStep详细信息 |
opts.panel (string | HTMLElement)?
|
结果列表的HTML容器id或容器元素,提供此参数后,结果列表将在此容器中进行展示。可选 |
opts.hideMarkers boolean
(default false )
|
设置隐藏路径规划的起始点图标 设置为true:隐藏图标;设置false:显示图标\n默认值为:false |
opts.showTraffic boolean?
|
设置是否显示实时路况信息,默认设置为true。 显示绿色代表畅通,黄色代表轻微拥堵,红色代表比较拥堵,灰色表示无路况信息。 |
opts.province string?
|
车牌省份的汉字缩写,用于判断是否限行,与number属性组合使用,可选。例如:京 |
opts.number string?
|
除省份之外车牌的字母和数字,用于判断限行相关,与province属性组合使用,可选。例如:NH1N11 |
opts.isOutline boolean?
|
使用map属性时,绘制的规划线路是否显示描边。缺省为true |
opts.outlineColor string?
|
使用map属性时,绘制的规划线路的描边颜色。缺省为'white' |
opts.autoFitView boolean?
|
用于控制在路径规划结束后,是否自动调整地图视野使绘制的路线处于视口的可见范围 |
opts.cartype number
(default 0 )
|
车辆类型 0:普通货车(默认值)1:纯电动货车 2:插电混动货车 |
opts.showpolyline number
(default 1 )
|
是否返回路线数据 当取值为1时,steps与tmcs下的polyline数据会正常返回;当取值为0时,steps与tmcs下的polyline数据为空。 |
opts.nosteps number
(default 1 )
|
是否返回steps字段内容 当取值为0时,steps字段内容正常返回;当取值为1时,steps字段内容为空。 |
opts.autoRefresh boolean
(default true )
|
是否拖拽后自动更新驾车轨迹 |
opts.refreshTime number
(default 300 )
|
拖拽后自动更新的延迟时间 |
opts.apiVersion number
(default 'v4' )
|
货车接口版本支持 'v4','v5' |
opts.showFields string?
|
仅 v5货车接口版本支持 1、具体可指定返回的字段类请见下方返回结果说明中的“show_fields”内字段类型; 2、多个字段间采用“,”进行分割; 3、show_fields未设置时,只返回基础信息类内字段; 4、目前取值支持以下四种:"toll_gate","cameras","general","incident"; "toll_gate":收费站信息 "cameras":电子眼信息 "general":交通设施信息 "incident":交通事件信息 |
var arr = new Array();//经纬度坐标数组
path.push({ lnglat: [116.303843, 39.983412] });//起点
path.push({ lnglat: [116.321354, 39.896436] });//途径
path.push({ lnglat: [116.407012, 39.992093] });//终点
AMap.plugin(['AMap.DragRouteTruck'],function(){
dragRoute = new AMap.DragRouteTruck(mapObj, opts);
dragRoute.search(path); //查询导航路径并开启拖拽导航
});
清除避让区域
开始路径导航。支持鼠标拖拽导航路径节点,更改途经点时,系统实时重新计算并显示导航路径
(any)
: Array<{lnglat:LngLatLike}>
手动更新路径。设置 autoRefresh 为 false 之后,通过调用这个方法来手动更新路径规划
销毁拖拽导航插件。
修改配置项
(Object)
Name | Description |
---|---|
opts.policy number?
|
驾车路线规划策略 1躲避拥堵 2不走高速 3避免收费 4躲避拥堵且不走高速 5避免收费且不走高速 6躲避拥堵且避免收费 7躲避拥堵且避免收费且不走高速 8高速优先 9躲避拥堵且高速优先 |
opts.size number
|
车型大小,必填,1-4分别对应小型至大型 |
opts.width number
(default 2.5 )
|
宽度,缺省2.5米 |
opts.height number
(default 1.6 )
|
高度,缺省1.6米 |
opts.load number
(default 0.9 )
|
载重,缺省0.9t |
opts.weight number
(default 10 )
|
自重,缺省10t |
opts.axlesNum number
(default 2 )
|
轴数,缺省2轴 |
opts.extensions string
(default 'base' )
|
默认值:base,返回基本地址信息\n当取值为:all,返回DriveStep基本信息+DriveStep详细信息 |
opts.panel (string | HTMLElement)?
|
结果列表的HTML容器id或容器元素,提供此参数后,结果列表将在此容器中进行展示。可选 |
opts.hideMarkers boolean
(default false )
|
设置隐藏路径规划的起始点图标 设置为true:隐藏图标;设置false:显示图标\n默认值为:false |
opts.showTraffic boolean?
|
设置是否显示实时路况信息,默认设置为true。 显示绿色代表畅通,黄色代表轻微拥堵,红色代表比较拥堵,灰色表示无路况信息。 |
opts.province string?
|
车牌省份的汉字缩写,用于判断是否限行,与number属性组合使用,可选。例如:京 |
opts.number string?
|
除省份之外车牌的字母和数字,用于判断限行相关,与province属性组合使用,可选。例如:NH1N11 |
opts.isOutline boolean?
|
使用map属性时,绘制的规划线路是否显示描边。缺省为true |
opts.outlineColor string?
|
使用map属性时,绘制的规划线路的描边颜色。缺省为'white' |
opts.autoFitView boolean?
|
用于控制在路径规划结束后,是否自动调整地图视野使绘制的路线处于视口的可见范围 |
opts.cartype number
(default 0 )
|
车辆类型 0:普通货车(默认值)1:纯电动货车 2:插电混动货车 |
opts.showpolyline number
(default 1 )
|
是否返回路线数据 当取值为1时,steps与tmcs下的polyline数据会正常返回;当取值为0时,steps与tmcs下的polyline数据为空。 |
opts.nosteps number
(default 1 )
|
是否返回steps字段内容 当取值为0时,steps字段内容正常返回;当取值为1时,steps字段内容为空。 |
轨迹纠偏服务插件。用于将一组带方向的、可能偏离道路的经纬度轨迹,纠正为准确沿着道路的一条经纬度路径。比如根据间隔采集的车辆位置和朝向信息生成行驶轨迹
用于驾车轨迹的纠偏。
Name | Description |
---|---|
OriginPath.x number
|
经度 |
OriginPath.y number
|
纬度 |
OriginPath.ag number
|
与正北方向的顺时针夹角, [ 0, 360 ] |
OriginPath.tm number
|
轨迹点采集的时间,以s为单位 OriginPath数组第一个元素的tm值为从1970年开始的unix的时间戳,精确到秒。 其余元素的tm值为当前采集点的时间减去第一个元素的采集时间的差值 |
OriginPath.sp number
|
轨迹点的速度,单位 km/h,小数、整数均可 |
(GraspRoadCallback)
回调函数
Type: Function
行政区查询、天气查询、公交站点和公交线路查询
行政区查询服务(AMap.DistrictSearch)提供行政区信息的查询, 使用该服务可以获取到行政区域的区号、城市编码、中心点、边界、下辖区域等详细信息,为基于行政区域的地图功能提供支持。
(DistrictSearchOptions)
默认参数
(string)
关键字对应的行政区级别或商圈,可选值:
country:国家
province:省/直辖市
city:市
district:区/县
biz_area:商圈
(boolean)
是否显示商圈,默认值true
可选为true/false,为了能够精准的定位到街道,特别是在快递、物流、送餐等场景下,强烈建议将此设置为false
(string)
是否返回行政区边界坐标点,默认值:base,不返回行政区边界坐标点,取值:all,返回完整行政区边界坐标点
(number)
显示下级行政区级数(行政区级别包括:国家、省/直辖市、市、区/县4个级别),商圈为区/县下一
级,可选值:0、1、2、3,默认值:1
0:不返回下级行政区
1:返回下一级行政区
2:返回下两级行政区
3:返回下三级行政区
AMap.plugin('AMap.DistrictSearch', function () {
var districtSearch = new AMap.DistrictSearch({
// 关键字对应的行政区级别,country表示国家
level: 'country',
// 显示下级行政区级数,1表示返回下一级行政区
subdistrict: 1
})
// 搜索所有省/直辖市信息
districtSearch.search('中国', function(status, result) {
// 查询成功时,result即为对应的行政区信息
})
})
// 除了获取所有省份/直辖市信息外,您可以通过修改level和subdistrict并配合search传入对应keyword查询对应信息。
设置关键字对应的行政区级别或商圈,可选值: country:国家 province:省/直辖市 city:市 district:区/县 biz_area:商圈
(string)
设置级别
设置下级行政区级数(行政区级别包括:国家、省/直辖市、市、区/县4个级别),商圈为区/县下一级,默认值:1 可选值:0、1、2、3 0:不返回下级行政区; 1:返回下一级行政区; 2:返回下两级行政区; 3:返回下三级行政区;
(string)
下级行政区级数
查询成功时触发此事件
DistrictSearchResult
:
当查询失败时触发此事件
ErrorStatus
:
天气查询服务,根据城市名称或区域编码返回城市天气预报信息,包括实时天气信息和四天天气预报。
map.plugin(['AMap.Weather'], function() {
//构造 Weather 类
var amapWeather = new AMap.Weather();
//查询实时天气信息,cityName 见 http://restapi.amap.com/v3/config/district?level=city&sublevel=0&extensions=all&output=xml&key=d9fba2f3196b6a4419358693a2b0d9a9
amapWeather.getLive('北京');
//查询四天预报天气,包括查询当天天气信息
amapWeather.getForecast('北京');
AMap.event.addListener(amapWeather, "complete", function callback(){
//当查询成功时触发 complete 事件
});
});
查询实时天气信息。
(String)
城市名称/区域编码(如:“杭州市”/“330100”)
(WeatherLiveResult)
回调函数
查询四天预报天气,包括查询当天天气信息
(String)
(WeatherForecastResult)
回调函数
当查询失败时触发此事件
当查询成功时触发此事件
Type: Function
(Object)
正确时为空
(Object)
返回数据
Name | Description |
---|---|
LiveData.info String
|
成功状态文字描述 |
LiveData.province String
|
省份名 |
LiveData.city String
|
城市名 |
LiveData.adcode String
|
区域编码 |
LiveData.weather String
|
天气现象,详见天气现象列表 |
LiveData.temperature String
|
实时气温,单位:摄氏度 |
LiveData.windDirection String
|
风向,风向编码对应描述 |
LiveData.windPower Number
|
风力,风力编码对应风力级别,单位:级 |
LiveData.humidity String
|
空气湿度(百分比) |
LiveData.reportTime String
|
数据发布的时间 |
Type: Function
(Object)
正确时为空
(Object)
返回数据
Name | Description |
---|---|
ForecastData.info String
|
成功状态文字描述 |
ForecastData.province String
|
省份名 |
ForecastData.city String
|
城市名 |
ForecastData.adcode String
|
区域编码 |
ForecastData.reportTime String
|
数据发布的时间 |
ForecastData.forecast Array
|
天气预报数组,包括当天至第三天的预报数据 |
ForecastData.forecast.date String
|
日期,格式为“年-月-日” |
ForecastData.forecast.week String
|
星期 |
ForecastData.forecast.dayWeather String
|
白天天气现象,详见天气现象列表 |
ForecastData.forecast.nightWeather String
|
夜间天气现象,详见天气现象列表 |
ForecastData.forecast.dayTemp Number
|
白天温度 |
ForecastData.forecast.nightTemp Number
|
白天温度 |
ForecastData.forecast.dayWindDir String
|
白天风向 |
ForecastData.forecast.dayWindPower String
|
白天风力 |
ForecastData.forecast.nightWindPower String
|
夜间风力 |
AMap.StationSearch 公交站点查询服务,根据输入关键字、ID查询公交站点信息。 用户可以通过自定义回调函数取回并显示查询结果。若服务请求失败,系统将返回错误信息。
//加载公交站点查询插件
mapObj.plugin(["AMap.StationSearch"], function() {
//实例化公交站点查询类
var station = new AMap.StationSearch({
pageIndex: 1, //页码
pageSize: 10, //单页显示结果条数
city:'010' //确定搜索城市
});
station.search('东直门'); //查询
AMap.event.addListener(station, 'complete', stationSearch_CallBack);
AMap.event.addListener(station, 'error', function(e) {alert(e.info);});
});
设置查询结果页码,默认值:1 取值范围:1-100,超过取值范围按默认
(Number)
结果页码
设置单页显示结果条数,默认值:20 取值范围:1-100,超过取值范围按默认
(Number)
单页显示结果条数
设置查询城市,默认值:“全国” 可选值:cityname(中文或中文全拼)、citycode、adcode
(String)
查询城市
根据给定的公交站点id进行公交站点详情检索,id是公交站点的唯一标识 当status为complete时,result为StationSearchResult; 当status为error时,result为错误信息info; 当status为no_data时,代表检索返回0结果
(String)
公交站点 id
AMap.LineSearch 公交路线查询类,通过extensions属性控制返回信息详略。 公交线路信息包括起、终点、途径站点,首、末班车时间等信息。用户可以通过自定义回调函数取回并显示查询结果。 若服务请求失败,系统将返回错误信息。
(LineSearchOptions)
参数信息
Name | Description |
---|---|
opts.pageIndex Number
|
页码(如pageIndex为2,pageSize为10,那么显示的应是第11-20条返回结果) 默认值:1,取值范围:1-100,超过取值范围按默认,超出实际页数按最大值返回 |
opts.pageSize Number
|
单页显示结果条数,默认值:20,取值范围:1-100,超过取值范围按默认 |
opts.city String
|
公交站点所在城市,默认值:“全国”,可选值:cityname(中文或中文全拼)、citycode、adcode |
(String)
此项仅公交路线查询时有效,默认值:base,返回公交路线基本信息,当取值为:all,返回公交路线基本信息+详细信息
//加载公交线路查询插件
mapObj.plugin(["AMap.LineSearch"], function() {
//实例化公交线路查询类
var linesearch = new AMap.LineSearch({
pageIndex:1,
pageSize:1,
extensions:'all'
});
//搜索“536”相关公交线路
linesearch.search('536');
AMap.event.addListener(linesearch, "complete", lineSearch_Callback);
AMap.event.addListener(citysearch, "error", function(e){alert(e.info);});
});
设置查询结果页码,默认值:1 取值范围:1-100,超过取值范围按默认
(Number)
结果页码
设置单页显示结果条数,默认值:20 取值范围:1-100,超过取值范围按默认
(Number)
单页显示结果条数
设置查询城市,默认值:“全国” 可选值:cityname(中文或中文全拼)、citycode、adcode
(String)
城市
设置查询城市,默认值:“全国” 可选值:cityname(中文或中文全拼)、citycode、adcode
(String)
查询城市
根据给定的公交站点id进行公交站点详情检索,id是公交站点的唯一标识 当status为complete时,result为LineSearchResult; 当status为error时,result为错误信息info; 当status为no_data时,代表检索返回0结果
(String)
公交站点 id
用于进行城市定位或者精确定位的插件类型
鹰眼控件,用于显示缩略地图,显示于地图右下角,可以随主图的视口变化而变化,也可以配置成固定位置实现类似于南海附图的效果。
(GeolocationOptions)
初始化参数
Name | Description |
---|---|
options.position string
|
悬停位置,默认为"RB",即右下角 |
options.offset [number, number]
|
缩略图距离悬停位置的像素距离,如 [2,2] |
options.borderColor string
|
缩略图的高度,同CSS,如'silver' |
options.borderRadius string
|
缩略图的高度,同CSS,如'5px' |
options.buttonSize string
|
箭头按钮的像素尺寸,同CSS,如'12px' |
options.convert boolean
|
是否将定位结果转换为高德坐标 |
options.enableHighAccuracy boolean
|
进行浏览器原生定位的时候是否尝试获取较高精度,可能影响定位效率,默认为false |
options.timeout number
|
定位的超时时间,毫秒 |
options.maximumAge number
|
浏览器原生定位的缓存时间,毫秒 |
options.showButton boolean
|
是否显示定位按钮,默认为true |
options.showCircle boolean
|
是否显示定位精度圆,默认为true |
options.showMarker boolean
|
是否显示定位点,默认为true |
options.markerOptions MarkerOptions
|
定位点的样式 |
options.circleOptions CircleOptions
|
定位圆的样式 |
options.panToLocation boolean
|
定位成功后是否自动移动到响应位置 |
options.zoomToAccuracy boolean
|
定位成功后是否自动调整级别 |
options.GeoLocationFirst boolean
|
优先使用H5定位,默认移动端为true,PC端为false |
options.noIpLocate number
|
是否禁用IP精确定位,默认为0,0:都用 1:手机上不用 2:PC上不用 3:都不用 |
options.noGeoLocation number
|
是否禁用浏览器原生定位,默认为0,0:都用 1:手机上不用 2:PC上不用 3:都不用 |
options.useNative boolean
|
是否与高德定位SDK能力结合,需要同时使用安卓版高德定位sdk,否则无效 |
options.getCityWhenFail boolean
|
定位失败之后是否返回基本城市定位信息 |
options.needAddress boolean
|
是否需要将定位结果进行逆地理编码操作 |
options.extensions string
|
是否需要详细的逆地理编码信息,默认为'base'只返回基本信息,可选'all' |
获取 用户的精确位置,有失败几率
(GeolocationCallBack)
定位回调函数,成功或者失败均会回调
根据用户 IP 获取 用户所在城市信息
(GeolocationCallBack)
Geolocation插件的定位回调函数
Type: Function
(string)
'complete' 或者 'error'
(GeolocationResult)
定位结果
浏览器定位的定位结果,定位的过程和失败信息可以从 message 字段中获取
Type: Object
(LngLat)
: 定位到的经纬度位置
(number)
: 定位精度,米
(number)
: 定位的类型,ip/h5/sdk/ipcity
(number)
: 定位过程的信息,用于排查定位失败原因
(number)
: 是否已经转换为高德坐标
(number)
: 'SUCCESS' 或者 'PERMISSION_DENIED' 或者 'TIME_OUT' 或者 'POSITION_UNAVAILABLE'
(number)
: needAddress的时候返回,结构化地址信息
(number)
: needAddress的时候返回,规范地址
(number)
: needAddress的时候返回,定位点附近的POI信息
(number)
: needAddress的时候返回,定位点附近的道路信息
(number)
: needAddress的时候返回,定位点附近的交叉口信息
AMap.CitySearch 根据IP返回对应城市信息,提供根据输入IP或自动获取IP获取对应城市信息功能。 用户可以通过自定义回调函数取回并显示查询结果。 若服务请求失败,系统将返回错误信息。
当查询成功时触发此事件
当查询失败时触发此事件
一些通用的函数库
GeometryUtil为一组空间数据计算的函数库,v1.4.2新增。支持点线面的空间关系计算、长度、面积计算等等,
计算两个经纬度点之间的实际距离。单位:米
(LngLatLike)
(LngLatLike)
number
:
计算两个经纬度点之间的实际距离。单位:米
(LngLatLike)
(LngLatLike)
number
:
判断两个线段是否相交
(LngLatLike)
(LngLatLike)
(LngLatLike)
(LngLatLike)
boolean
:
判断两个线段是否相交
(LngLatLike)
(LngLatLike)
(LngLatLike)
(LngLatLike)
boolean
:
判断线段和多个环是否相交
(LngLatLike)
(LngLatLike)
boolean
:
判断线段和多个环是否相交
(LngLatLike)
(LngLatLike)
boolean
:
计算P2P3上距离P1最近的点
(LngLatLike)
(LngLatLike)
(LngLatLike)
boolean
:
计算P2P3上距离P1最近的点
(LngLatLike)
(LngLatLike)
(LngLatLike)
boolean
:
计算P2P3到P1的距离。单位:米
(LngLatLike)
(LngLatLike)
(LngLatLike)
LngLat
:
计算P2P3到P1的距离。单位:米
(LngLatLike)
(LngLatLike)
(LngLatLike)
LngLat
:
平面的计算库
计算两个经纬度点之间的实际距离。单位:米
(LngLatLike)
(LngLatLike)
number
:
计算两个经纬度点之间的实际距离。单位:米
(LngLatLike)
(LngLatLike)
number
:
判断两个线段是否相交
(LngLatLike)
(LngLatLike)
(LngLatLike)
(LngLatLike)
boolean
:
判断两个线段是否相交
(LngLatLike)
(LngLatLike)
(LngLatLike)
(LngLatLike)
boolean
:
判断线段和多个环是否相交
(LngLatLike)
(LngLatLike)
boolean
:
判断线段和多个环是否相交
(LngLatLike)
(LngLatLike)
boolean
:
计算P2P3上距离P1最近的点
(LngLatLike)
(LngLatLike)
(LngLatLike)
boolean
:
计算P2P3上距离P1最近的点
(LngLatLike)
(LngLatLike)
(LngLatLike)
boolean
:
计算P2P3到P1的距离。单位:米
(LngLatLike)
(LngLatLike)
(LngLatLike)
LngLat
:
计算P2P3到P1的距离。单位:米
(LngLatLike)
(LngLatLike)
(LngLatLike)
LngLat
:
获取DOM元素的大小
(HTMLElement)
[number, number]
:
获取DOM元素距离窗口左上角的距离
(HTMLElement)
[number, number]
:
在parentNode内部创建一个className类名的tagName元素
HTMLElement
:
DOM元素是否包含className
(HTMLElement)
(string)
boolean
:
给DOM元素添加一个className
(HTMLElement)
(string)
给DOM元素设置为className样式
(HTMLElement)
(string)
给DOM元素删除一个className
(HTMLElement)
(string)
将DOM元素从父节点删除
(HTMLElement)
清空DOM元素
(HTMLElement)
给DOM元素旋转一个角度,以center为中心,center以元素左上角为坐标原点
给DOM元素删除一组样式,Object同样式表
((HTMLElement | Array<HTMLElement>))
(Object)
给DOM元素设定一个透明度
(HTMLElement)
(number)
(string)
: 当前浏览器userAgent
(boolean)
: 是否移动设备
(string)
: 平台类型,如:'windows'、'mac'、'ios'、'android'、'other'
(boolean)
: 是否windows设备
(boolean)
: 是否iOS设备
(boolean)
: 是否iPad
(boolean)
: 是否iPhone
(boolean)
: 是否安卓设备
(boolean)
: 是否安卓4以下系统
(boolean)
: 是否Chrome浏览器
(boolean)
: 是否火狐浏览器
(boolean)
: 是否Safari浏览器
(boolean)
: 是否微信
(boolean)
: 是否UC浏览器
(boolean)
: 是否QQ或者QQ浏览器
(boolean)
: 是否IE
(boolean)
: 是否IE6
(boolean)
: 是否IE7
(boolean)
: 是否IE8
(boolean)
: 是否IE9
(boolean)
: 是否IE10
(boolean)
: 是否IE11
(boolean)
: 是否IE9以下
(boolean)
: 是否Edge浏览器
(boolean)
: 是否支持LocaStorage
(boolean)
: 是否支持Geolocation
(boolean)
: 是否Webkit移动浏览器
(boolean)
: 是否支持Css3D的Webkit移动端浏览器
(boolean)
: 是否高清屏幕,devicePixelRatio>1
(boolean)
: 是否触屏
(boolean)
: 是否msPointer设备
(boolean)
: 是否pointer设备
(boolean)
: 是否webkit浏览器
(boolean)
: 是否支持Css3D的Webkit浏览器
(boolean)
: 是否支持Css3D的gecko浏览器
(boolean)
: 是否支持Css3D的ie浏览器
(boolean)
: 是否支持Css3D的浏览器
(boolean)
: 是否支持Css3D的opera浏览器
(boolean)
: 是否支持canvas
(boolean)
: 是否支持svg
(boolean)
: 是否支持vml
(boolean)
: 是否支持WebWorker
(boolean)
: 是否支持WebSocket
(boolean)
: 是否支持webgl
判断参数是否为DOM元素
(any)
boolean
:
判断一个对象是否为空
(any)
boolean
:
从数组删除元素
(any)
(any)
按索引删除数组元素
(any)
(number)
返回元素索引
(any)
(any)
number
:
判断是否数组
(any)
boolean
:
同原生 cancelIdleCallback
(number)
同原生 Util.cancelAnimFrame
(number)