Add SEO metadata and security headers
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,62 @@
|
||||
## 右键菜单
|
||||
|
||||
|
||||
|
||||
|
||||
## ContextMenu
|
||||
|
||||
**Extends OverlayDOM**
|
||||
|
||||
右键菜单 [亲手试一试][82]
|
||||
|
||||
### Parameters
|
||||
|
||||
- `opts` **OverlayOptions** 右键菜单参数
|
||||
- `opts.position` **(Vector2 | LngLat)** 右键菜单显示的位置
|
||||
- `opts.content` **(string \| HTMLElement)** 右键菜单内容（针对自定义菜单时，添加菜单内容及功能。可以是HTML要素字符串或者HTML DOM对象。）
|
||||
|
||||
### Examples
|
||||
|
||||
```javascript
|
||||
// 创建一个右键菜单实例
|
||||
var contextMenu = new AMap.ContextMenu();
|
||||
//右键放大
|
||||
contextMenu.addItem("放大一级", function () {
|
||||
var zoom = map.getZoom();
|
||||
map.setZoom(zoom++);
|
||||
}, 0);
|
||||
// 在地图上指定位置打开右键菜单
|
||||
contextMenu.open(map, [116.397389,39.909466]);
|
||||
```
|
||||
|
||||
### open
|
||||
|
||||
打开右键菜单
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `map` **Map**
|
||||
- `position` **Vector2**
|
||||
|
||||
### close
|
||||
|
||||
关闭右键菜单
|
||||
|
||||
### addItem
|
||||
|
||||
菜单添加一条内容
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `text` **string**
|
||||
- `fn` **EventListener**
|
||||
- `num` **number**
|
||||
|
||||
### removeItem
|
||||
|
||||
菜单移除一条内容
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `text` **string**
|
||||
- `fn` **EventListener**
|
||||
@@ -0,0 +1,408 @@
|
||||
## 地图控件
|
||||
|
||||
固定于地图最上层的用于控制地图某些状态的 DOM 组件类型
|
||||
|
||||
|
||||
## Control
|
||||
|
||||
**Extends \_Event.Event**
|
||||
|
||||
### Parameters
|
||||
|
||||
- `opts`
|
||||
|
||||
### addTo
|
||||
|
||||
添加控件到地图上
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `map` **Map** 地图实例
|
||||
|
||||
### remove
|
||||
|
||||
从地图上移除控件
|
||||
|
||||
### show
|
||||
|
||||
设置控件可见
|
||||
|
||||
### hide
|
||||
|
||||
设置控件隐藏
|
||||
|
||||
## Control
|
||||
|
||||
**Extends Event**
|
||||
|
||||
地图控件基类，可扩展做自定义地图控件。
|
||||
|
||||
### Parameters
|
||||
|
||||
- `opts` **ControlConfig** 默认参数
|
||||
- `opts.position` **(string \| object)** 控件停靠位置
|
||||
{ top: 5; left: 5; right: 5; bottom: 5 } 或者
|
||||
'LT': 左上角, 'RT': 右上角, 'LB': 左下角, 'RB': 右下角
|
||||
- `opts.offset` **\[number, number]** 相对于地图容器左上角的偏移量，正数代表向右下偏移。默认为AMap.Pixel(10,10)
|
||||
|
||||
### addTo
|
||||
|
||||
添加控件到地图上
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `map` **Map** 地图实例
|
||||
|
||||
### remove
|
||||
|
||||
从地图上移除控件
|
||||
|
||||
### show
|
||||
|
||||
设置控件可见
|
||||
|
||||
### hide
|
||||
|
||||
设置控件隐藏
|
||||
|
||||
## Scale
|
||||
|
||||
**Extends AMap.Control**
|
||||
|
||||
比例尺插件。位于地图右下角，用户可控制其显示与隐藏。继承自 AMap.Control </br>
|
||||
[相关示例][87]
|
||||
|
||||
### Parameters
|
||||
|
||||
- `opts` **ControlConfig** 默认参数
|
||||
- `opts.position` **(string \| object)** 控件停靠位置
|
||||
{ top: 5; left: 5; right: 5; bottom: 5 } 或者
|
||||
'LT': 左上角, 'RT': 右上角, 'LB': 左下角, 'RB': 右下角
|
||||
- `opts.offset` **\[number, number]** 相对于地图容器左上角的偏移量，正数代表向右下偏移。默认为AMap.Pixel(10,10)
|
||||
|
||||
### Examples
|
||||
|
||||
```javascript
|
||||
mapObj.plugin(["AMap.Scale"],function(){
|
||||
var scale = new AMap.Scale();
|
||||
mapObj.addControl(scale);
|
||||
});
|
||||
```
|
||||
|
||||
### addTo
|
||||
|
||||
添加控件到地图上
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `map` **Map** 地图实例
|
||||
|
||||
### removeFrom
|
||||
|
||||
从地图上移除控件
|
||||
|
||||
### show
|
||||
|
||||
设置控件可见
|
||||
|
||||
### hide
|
||||
|
||||
设置控件隐藏
|
||||
|
||||
## ToolBar
|
||||
|
||||
**Extends AMap.Control**
|
||||
|
||||
地图操作工具条插件。可支持方向导航、位置定位、视野级别缩放、视野级别选择等操作。继承自 AMap.Control </br>
|
||||
[相关示例][87]
|
||||
|
||||
### Parameters
|
||||
|
||||
- `opts` **ControlConfig** 默认参数
|
||||
- `opts.position` **(String \| Object)** 控件停靠位置
|
||||
{ top: 5; left: 5; right: 5; bottom: 5 } 或者
|
||||
'LT': 左上角, 'RT': 右上角, 'LB': 左下角, 'RB': 右下角
|
||||
- `opts.offset` **\[Number, Number]** 相对于地图容器左上角的偏移量，正数代表向右下偏移。默认为AMap.Pixel(10,10)
|
||||
|
||||
### Examples
|
||||
|
||||
```javascript
|
||||
mapObj.plugin(["AMap.ToolBar"],function(){
|
||||
//加载工具条
|
||||
var tool = new AMap.ToolBar();
|
||||
mapObj.addControl(tool);
|
||||
});
|
||||
```
|
||||
|
||||
### addTo
|
||||
|
||||
添加控件到地图上
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `map` **Map** 地图实例
|
||||
|
||||
### remove
|
||||
|
||||
从地图上移除控件
|
||||
|
||||
### show
|
||||
|
||||
设置控件可见
|
||||
|
||||
### hide
|
||||
|
||||
设置控件隐藏
|
||||
|
||||
## ControlBar
|
||||
|
||||
**Extends AMap.Control**
|
||||
|
||||
组合了旋转、倾斜、复位在内的地图控件。 </br>
|
||||
[相关示例][87]
|
||||
|
||||
### Parameters
|
||||
|
||||
- `opts` **ControlConfig** 默认参数
|
||||
- `opts.position` **(string \| object)** 控件停靠位置
|
||||
{ top: 5; left: 5; right: 5; bottom: 5 } 或者
|
||||
'LT': 左上角, 'RT': 右上角, 'LB': 左下角, 'RB': 右下角
|
||||
- `opts.offset` **\[number, number]** 相对于地图容器左上角的偏移量，正数代表向右下偏移。默认为AMap.Pixel(10,10)
|
||||
- `opts.showControlButton` **boolean** 是否显示倾斜、旋转按钮。默认为 true
|
||||
|
||||
### Examples
|
||||
|
||||
```javascript
|
||||
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)
|
||||
```
|
||||
|
||||
### addTo
|
||||
|
||||
添加控件到地图上
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `map` **Map** 地图实例
|
||||
|
||||
### remove
|
||||
|
||||
从地图上移除控件
|
||||
|
||||
### show
|
||||
|
||||
设置控件可见
|
||||
|
||||
### hide
|
||||
|
||||
设置控件隐藏
|
||||
|
||||
## MapType
|
||||
|
||||
**Extends AMap.Control**
|
||||
|
||||
### Parameters
|
||||
|
||||
- `opts`
|
||||
|
||||
### addLayer
|
||||
|
||||
添加一个图层
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `layerInfo` **LayerInfo** 图层信息，需要包含图层对象
|
||||
- `layerInfo.id` **String** 图层 id
|
||||
- `layerInfo.enable` **String** 图层是否可用
|
||||
- `layerInfo.name` **String** 图层暂时名称
|
||||
- `layerInfo.type` **(`"base"` \| `"overlay"`)** 图层类型，base 是属于底图图层，overlay 属于叠加图层。
|
||||
- `layerInfo.layer` **Layer** 图层对象
|
||||
- `layerInfo.show` **Boolean** 图层是否显示
|
||||
|
||||
### removeLayer
|
||||
|
||||
移除一个图层
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `id` **String** 图层 id
|
||||
|
||||
### addTo
|
||||
|
||||
添加控件到地图上
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `map` **Map** 地图实例
|
||||
|
||||
### remove
|
||||
|
||||
从地图上移除控件
|
||||
|
||||
### show
|
||||
|
||||
设置控件可见
|
||||
|
||||
### hide
|
||||
|
||||
设置控件隐藏
|
||||
|
||||
## MapType
|
||||
|
||||
**Extends AMap.Control**
|
||||
|
||||
### Parameters
|
||||
|
||||
- `opts`
|
||||
|
||||
### addLayer
|
||||
|
||||
添加一个图层
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `layerInfo` **LayerInfo** 图层信息，需要包含图层对象
|
||||
- `layerInfo.id` **String** 图层 id
|
||||
- `layerInfo.enable` **String** 图层是否可用
|
||||
- `layerInfo.name` **String** 图层暂时名称
|
||||
- `layerInfo.type` **(`"base"` \| `"overlay"`)** 图层类型，base 是属于底图图层，overlay 属于叠加图层。
|
||||
- `layerInfo.layer` **Layer** 图层对象
|
||||
- `layerInfo.show` **Boolean** 图层是否显示
|
||||
|
||||
### removeLayer
|
||||
|
||||
移除一个图层
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `id` **String** 图层 id
|
||||
|
||||
### addTo
|
||||
|
||||
添加控件到地图上
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `map` **Map** 地图实例
|
||||
|
||||
### remove
|
||||
|
||||
从地图上移除控件
|
||||
|
||||
### show
|
||||
|
||||
设置控件可见
|
||||
|
||||
### hide
|
||||
|
||||
设置控件隐藏
|
||||
|
||||
## MapType
|
||||
|
||||
**Extends AMap.Control**
|
||||
|
||||
地图类型切换插件。用户通过该插件进行地图切换。
|
||||
|
||||
### Parameters
|
||||
|
||||
- `opts` **MaptypeOptions** 控件默认参数
|
||||
- `opts.defaultType` **number** 初始化默认图层类型。 取值为0：默认底图 取值为1：卫星图 默认值：0 (optional, default `0`)
|
||||
- `opts.showTraffic` **boolean** 叠加实时交通图层 默认值：false (optional, default `false`)
|
||||
- `opts.showRoad` **boolean** 叠加路网图层 默认值：false (optional, default `false`)
|
||||
|
||||
### Examples
|
||||
|
||||
```javascript
|
||||
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);
|
||||
});
|
||||
```
|
||||
|
||||
### addLayer
|
||||
|
||||
添加一个图层
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `layerInfo` **LayerInfo** 图层信息，需要包含图层对象
|
||||
- `layerInfo.id` **String** 图层 id
|
||||
- `layerInfo.enable` **String** 图层是否可用
|
||||
- `layerInfo.name` **String** 图层暂时名称
|
||||
- `layerInfo.type` **(`"base"` \| `"overlay"`)** 图层类型，base 是属于底图图层，overlay 属于叠加图层。
|
||||
- `layerInfo.layer` **Layer** 图层对象
|
||||
- `layerInfo.show` **Boolean** 图层是否显示
|
||||
|
||||
### removeLayer
|
||||
|
||||
移除一个图层
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `id` **String** 图层 id
|
||||
|
||||
### addTo
|
||||
|
||||
添加控件到地图上
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `map` **Map** 地图实例
|
||||
|
||||
### remove
|
||||
|
||||
从地图上移除控件
|
||||
|
||||
### show
|
||||
|
||||
设置控件可见
|
||||
|
||||
### hide
|
||||
|
||||
设置控件隐藏
|
||||
|
||||
## HawkEye
|
||||
|
||||
**Extends AMap.Control**
|
||||
|
||||
鹰眼控件，用于显示缩略地图，显示于地图右下角，可以随主图的视口变化而变化，也可以配置成固定位置实现类似于南海附图的效果。
|
||||
|
||||
### Parameters
|
||||
|
||||
- `options` **HawkEyeOptions** 初始化参数
|
||||
- `options.autoMove` **boolean** 是否随主图视口变化移动
|
||||
- `options.showRectangle` **boolean** 是否显示视口矩形
|
||||
- `options.showButton` **boolean** 是否显示打开关闭的按钮
|
||||
- `options.opened` **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'
|
||||
|
||||
### show
|
||||
|
||||
恢复鹰眼控件的正常大小
|
||||
|
||||
### hide
|
||||
|
||||
最小化鹰眼控件
|
||||
@@ -0,0 +1,101 @@
|
||||
## 事件
|
||||
|
||||
地图 JSAPI 具有完备的事件体系，在 2.0 版本中所有类型的实例均使用 on/off 方法进行时间的绑定和移除
|
||||
|
||||
|
||||
## Event
|
||||
|
||||
JSAPI 的所有类型（地图、图层、覆盖物等）都实现了事件接口，用于给当前实例对象绑定、移除、清理事件回调
|
||||
|
||||
### Examples
|
||||
|
||||
```javascript
|
||||
// 声明点击事件的回调函数
|
||||
function onClick(e){
|
||||
console.log(e);
|
||||
}
|
||||
// 给地图实例绑定点击事件 onClick
|
||||
map.on('click', onClick);
|
||||
|
||||
// 移除地图实例的 onClick 事件绑定
|
||||
map.off('click', onClick);
|
||||
|
||||
// 清除地图实例上的所有 click 事件绑定
|
||||
map.clearEvents('click');
|
||||
|
||||
// 覆盖物绑定鼠标移动事件
|
||||
polygon.on('mousemove',console.log);
|
||||
|
||||
// 覆盖物绑定事件判断
|
||||
polygon.hasEvents('mousemove',console.log);
|
||||
```
|
||||
|
||||
### on
|
||||
|
||||
给实例绑定事件回调函数，同一个类型、同一个回调函数、同一个上下文只会绑定一次
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `type` **String** 事件类型
|
||||
- `function` **Function** 回调函数
|
||||
- `context` **Object** 事件上下文，缺省为实例本身
|
||||
- `once` **Boolean** 是否只执行一次
|
||||
|
||||
Returns **Object** 当前实例
|
||||
|
||||
### once
|
||||
|
||||
给实例绑定只执行一次的事件回调
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `type` **String** 事件类型
|
||||
- `fn` **Function** 回调函数
|
||||
- `context` **Object** 事件上下文，缺省为实例本身
|
||||
|
||||
Returns **Object** 当前实例
|
||||
|
||||
### off
|
||||
|
||||
移除当前实例的某一个事件回调
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `type` **String** 事件类型
|
||||
- `function` **Function** 事件回调函数
|
||||
- `context` **Object** 事件上下文，缺省为当前实例
|
||||
|
||||
Returns **Object** 当前实例
|
||||
|
||||
### hasEvents
|
||||
|
||||
判断当前实例是否已经绑定了某个事件回调
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `type` **String** 事件类型
|
||||
- `function` **Function** 事件回调
|
||||
- `context` **Object** 事件上下文
|
||||
|
||||
Returns **Boolean**
|
||||
|
||||
### clearEvents
|
||||
|
||||
清除当前实例某一类型的全部事件回调
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `type` **String** 事件类型，如果此参数为空，清除实例上的所有绑定的事件回调
|
||||
|
||||
Returns **Object** 当前实例
|
||||
|
||||
### emit
|
||||
|
||||
模拟触发当前实例的某个事件
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `type` **String** 事件类型
|
||||
- `data` **Object** 事件回调时返回的数据，模拟的事件体应该完整，否则可能导致报错
|
||||
|
||||
Returns **Object** 当前实例
|
||||
@@ -0,0 +1,361 @@
|
||||
## 基础类
|
||||
|
||||
经纬度、像素、边界、大小、这些是地图 JSAPI 开发必须了解的基本类型
|
||||
|
||||
|
||||
## LngLat
|
||||
|
||||
### Parameters
|
||||
|
||||
- `lng`
|
||||
- `lat`
|
||||
- `noWrap` (optional, default `false`)
|
||||
|
||||
### lat
|
||||
|
||||
纬度
|
||||
|
||||
Type: number
|
||||
|
||||
### lng
|
||||
|
||||
经度
|
||||
|
||||
Type: number
|
||||
|
||||
### setLng
|
||||
|
||||
设置经度值
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `lng` **number** 经度
|
||||
|
||||
### setLat
|
||||
|
||||
设置纬度值
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `lat` **number**
|
||||
|
||||
### getLng
|
||||
|
||||
获取经度值
|
||||
|
||||
Returns **number**
|
||||
|
||||
### getLat
|
||||
|
||||
获取纬度值
|
||||
|
||||
Returns **number**
|
||||
|
||||
### equals
|
||||
|
||||
判断经纬度坐标和另外一个经纬度坐标是否相等
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `another` **LngLat** 另外一个经纬度坐标
|
||||
|
||||
Returns **Boolean** 是否相等
|
||||
|
||||
### add
|
||||
|
||||
与另外一个经纬度相加
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `another` **LngLat** 另外一个经纬度坐标
|
||||
- `noWrap` **boolean** 是否将相加的结果经度值修正到 [-180,180] 区间内
|
||||
|
||||
Returns **LngLat** 两个经纬度相加的结果
|
||||
|
||||
### subtract
|
||||
|
||||
与另外一个经纬度相减
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `another` **LngLat** 另外一个经纬度坐标
|
||||
- `noWrap` **boolean** 是否将相减的结果经度值修正到 [-180,180] 区间内
|
||||
|
||||
Returns **LngLat** 两个经纬度相减的结果
|
||||
|
||||
### offset
|
||||
|
||||
获取从当前经纬度位置向东移动 E 米，向北移动 N 米的坐标位置
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `E` **Number** 经度方向移动，向东为正
|
||||
- `N` **Number** 维度方向移动，向北为正
|
||||
|
||||
Returns **LngLat** 移动后的新经纬度
|
||||
|
||||
### toString
|
||||
|
||||
LngLat对象以字符串的形式返回
|
||||
|
||||
Returns **string** 格式如'lng值,lat值'的字符串
|
||||
|
||||
### toArray
|
||||
|
||||
LngLat对象以字符串的形式返回
|
||||
|
||||
Returns **string** 格式如'lng值,lat值'的字符串
|
||||
|
||||
### distance
|
||||
|
||||
计算当前经纬度距离另一个经纬度或者经纬度数组组成的路径的距离
|
||||
[相关示例][5]
|
||||
|
||||
Returns **number** 距离值，单位为米
|
||||
|
||||
## LngLat
|
||||
|
||||
经纬度坐标，用来描述地图上的一个点位置,
|
||||
目前高德地图使用的是 GCJ-02 坐标，如果你采集的是 WGS84 坐标，请先进行坐标转换
|
||||
|
||||
### Parameters
|
||||
|
||||
- `lng` **number** 经度值
|
||||
- `lat` **number** 纬度值
|
||||
- `noWrap` **boolean** 是否自动将经度值修正到 [-180,180] 区间内，缺省为false;
|
||||
noWrap 为false时传入[190,30]，会被自动修正为[-170,30],
|
||||
noWrap 为true时不会自动修正，可以用来进行跨日期限的覆盖物绘制
|
||||
|
||||
### Examples
|
||||
|
||||
```javascript
|
||||
var lnglat = new AMap.LngLat(116, 39);
|
||||
```
|
||||
|
||||
### lat
|
||||
|
||||
纬度
|
||||
|
||||
Type: number
|
||||
|
||||
### lng
|
||||
|
||||
经度
|
||||
|
||||
Type: number
|
||||
|
||||
### setLng
|
||||
|
||||
设置经度值
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `lng` **number** 经度
|
||||
|
||||
### setLat
|
||||
|
||||
设置纬度值
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `lat` **number**
|
||||
|
||||
### getLng
|
||||
|
||||
获取经度值
|
||||
|
||||
Returns **number**
|
||||
|
||||
### getLat
|
||||
|
||||
获取纬度值
|
||||
|
||||
Returns **number**
|
||||
|
||||
### equals
|
||||
|
||||
判断经纬度坐标和另外一个经纬度坐标是否相等
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `another` **LngLat** 另外一个经纬度坐标
|
||||
|
||||
Returns **Boolean** 是否相等
|
||||
|
||||
### add
|
||||
|
||||
与另外一个经纬度相加
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `another` **LngLat** 另外一个经纬度坐标
|
||||
- `noWrap` **boolean** 是否将相加的结果经度值修正到 [-180,180] 区间内
|
||||
|
||||
Returns **LngLat** 两个经纬度相加的结果
|
||||
|
||||
### subtract
|
||||
|
||||
与另外一个经纬度相减
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `another` **LngLat** 另外一个经纬度坐标
|
||||
- `noWrap` **boolean** 是否将相减的结果经度值修正到 [-180,180] 区间内
|
||||
|
||||
Returns **LngLat** 两个经纬度相减的结果
|
||||
|
||||
### offset
|
||||
|
||||
获取从当前经纬度位置向东移动 E 米，向北移动 N 米的坐标位置
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `E` **Number** 经度方向移动，向东为正
|
||||
- `N` **Number** 维度方向移动，向北为正
|
||||
|
||||
Returns **LngLat** 移动后的新经纬度
|
||||
|
||||
### toString
|
||||
|
||||
LngLat对象以字符串的形式返回
|
||||
|
||||
Returns **string** 格式如'lng值,lat值'的字符串
|
||||
|
||||
### toArray
|
||||
|
||||
LngLat对象以字符串的形式返回
|
||||
|
||||
Returns **string** 格式如'lng值,lat值'的字符串
|
||||
|
||||
### distance
|
||||
|
||||
计算当前经纬度距离另一个经纬度或者经纬度数组组成的路径的距离
|
||||
[相关示例][5]
|
||||
|
||||
Returns **number** 距离值，单位为米
|
||||
|
||||
## Bounds
|
||||
|
||||
地物对象的经纬度矩形范围。
|
||||
|
||||
### Parameters
|
||||
|
||||
- `southWest` **LngLat** 西南角经纬度
|
||||
- `northEast` **LngLat** 东北角经纬度值
|
||||
|
||||
### getSouthWest
|
||||
|
||||
获取西南角坐标。
|
||||
|
||||
Returns **LngLat**
|
||||
|
||||
### getNorthEast
|
||||
|
||||
获取东北角坐标
|
||||
|
||||
Returns **LngLat**
|
||||
|
||||
### getNorthEast
|
||||
|
||||
获取西北角坐标
|
||||
|
||||
Returns **LngLat**
|
||||
|
||||
### getNorthEast
|
||||
|
||||
获取东南角坐标
|
||||
|
||||
Returns **LngLat**
|
||||
|
||||
### contains
|
||||
|
||||
指定点坐标是否在矩形范围内
|
||||
[相关示例][6]
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `obj` **LngLat**
|
||||
|
||||
#### Examples
|
||||
|
||||
```javascript
|
||||
bounds.contains(new AMap.LngLat(116,39));
|
||||
```
|
||||
|
||||
Returns **Boolean**
|
||||
|
||||
### getCenter
|
||||
|
||||
获取当前Bounds的中心点经纬度坐标。
|
||||
|
||||
Returns **LngLat**
|
||||
|
||||
### toString
|
||||
|
||||
以字符串形式返回地图对象的矩形范围
|
||||
|
||||
Returns **String**
|
||||
|
||||
## Pixel
|
||||
|
||||
像素坐标，确定地图上的一个像素点。
|
||||
|
||||
### Parameters
|
||||
|
||||
- `x` **number**
|
||||
- `y` **number**
|
||||
|
||||
### getX
|
||||
|
||||
获取像素横坐标
|
||||
|
||||
Returns **Number**
|
||||
|
||||
### getY
|
||||
|
||||
获取像素纵坐标
|
||||
|
||||
Returns **Number**
|
||||
|
||||
### toString
|
||||
|
||||
以字符串形式返回像素坐标对象
|
||||
|
||||
Returns **string**
|
||||
|
||||
### equals
|
||||
|
||||
当前像素坐标与传入像素坐标是否相等
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `point` **Pixel**
|
||||
|
||||
Returns **boolean**
|
||||
|
||||
## Size
|
||||
|
||||
地物对象的像素尺寸
|
||||
|
||||
### Parameters
|
||||
|
||||
- `width` **number** 宽度
|
||||
- `height` **number** 高度
|
||||
|
||||
### getWidth
|
||||
|
||||
获取像素横坐标
|
||||
|
||||
Returns **Number**
|
||||
|
||||
### getHeight
|
||||
|
||||
获取像素纵坐标
|
||||
|
||||
Returns **Number**
|
||||
|
||||
### toString
|
||||
|
||||
以字符串形式返回尺寸大小对象
|
||||
|
||||
Returns **string**
|
||||
@@ -0,0 +1,122 @@
|
||||
## 地理编码
|
||||
|
||||
用于经纬度与地址之间的相互查询
|
||||
|
||||
|
||||
## Geocoder
|
||||
|
||||
**Extends AMap.Event**
|
||||
|
||||
AMap.Geocoder 地理编码与逆地理编码类，用于地址描述与经纬度坐标之间的转换。用户可以通过回调函数获取查询结果。
|
||||
[相关示例][103]
|
||||
|
||||
### Parameters
|
||||
|
||||
- `opts` **GeocoderOptions**
|
||||
- `opts.city` **string** <div>
|
||||
<div>城市，地理编码时，设置地址描述所在城市</div>
|
||||
<div>可选值：城市名（中文或中文全拼）、citycode、adcode</div>
|
||||
<div>默认值：“全国”</div>
|
||||
</div>
|
||||
- `opts.radius` **number** <div>
|
||||
<div>逆地理编码时，以给定坐标为中心点，单位：米</div>
|
||||
<div>取值范围：0 - 3000</div>
|
||||
<div>默认值：1000</div>
|
||||
</div>
|
||||
- `opts.lang` **string** <div>设置语言类型</div>
|
||||
<div>可选值：zh_cn（中文）、en(英文)</div>
|
||||
<div>默认值：zh_cn（中文</div>
|
||||
- `opts.batch` **boolean** 是否批量查询<div>batch 设置为 false 时，只返回第一条记录</div>
|
||||
- `opts.extensions` **string** 逆地理编码时，返回信息的详略<div>默认值：base，返回基本地址信息 </div>
|
||||
<div>取值为：all，返回地址信息及附近poi、道路、道路交叉口等信息 </div>
|
||||
|
||||
### Examples
|
||||
|
||||
```javascript
|
||||
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));
|
||||
});
|
||||
```
|
||||
|
||||
### getLocation
|
||||
|
||||
将地址信息转化为高德经纬度坐标信息
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `keyword` **String** 关键字
|
||||
- `cbk` **GeocoderCallback** 回调函数
|
||||
|
||||
### setCity
|
||||
|
||||
地理编码时，设置地址描述所在城市
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `city` **String** 所在城市
|
||||
|
||||
### getAddress
|
||||
|
||||
将高德经纬度坐标信息转化为结构化的地址信息
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `location` **(LngLat \| Array<LngLat>)** 给定坐标
|
||||
- `cbk` **ReGeocoderCallback** 回调函数
|
||||
|
||||
## GeocoderCallback
|
||||
|
||||
Geocoder getLocation 回调函数
|
||||
|
||||
Type: Function
|
||||
|
||||
### Parameters
|
||||
|
||||
- `status` **string** 当status为complete时，result为GeocodeResult；当status为error时，result为错误信息info；当status为no_data时，代表检索返回0结果
|
||||
- `result` **(info | GeocodeResult)** 地理编码 [详查rest文档][106]
|
||||
|
||||
## ReGeocoderCallback
|
||||
|
||||
Geocoder getAddress 回调函数
|
||||
|
||||
Type: Function
|
||||
|
||||
### Parameters
|
||||
|
||||
- `status` **string** 当status为complete时，result为GeocodeResult；当status为error时，result为错误信息info；当status为no_data时，代表检索返回0结果
|
||||
- `result` **(info | ReGeocodeResult)** 逆地理编码 [详查rest文档][107]
|
||||
|
||||
## convertFrom
|
||||
|
||||
地球上同一个地理位置的经纬度，在不同的坐标系中，会有少于偏移，国内目前常见的坐标系主要分为三种： </br>
|
||||
1\. 地球坐标系——WGS84：常见于 GPS 设备，Google 地图等国际标准的坐标体系。 </br>
|
||||
2\. 火星坐标系——GCJ-02：中国国内使用的被强制加密后的坐标体系，高德坐标就属于该种坐标体系。 </br>
|
||||
3\. 百度坐标系——BD-09：百度地图所使用的坐标体系，是在火星坐标系的基础上又进行了一次加密处理。 </br>
|
||||
因此在使用不同坐标系前，我们需要使用 AMap.convertFrom() 方法将这些非高德坐标系进行转换。 </br>
|
||||
[相关示例][108]
|
||||
|
||||
### Parameters
|
||||
|
||||
- `lnglat` **LngLat** 需要转换的坐标或者坐标组
|
||||
- `type` **String** 坐标类型 (optional, default `'gps'`)
|
||||
- `cbk` **Function?** 转换成功后的回调函数
|
||||
|
||||
### Examples
|
||||
|
||||
```javascript
|
||||
var gps = [116.3, 39.9];
|
||||
AMap.convertFrom(gps, 'gps', function (status, result) {
|
||||
if (result.info === 'ok') {
|
||||
var lnglats = result.locations; // Array.<LngLat>
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,113 @@
|
||||
## 定位
|
||||
|
||||
用于进行城市定位或者精确定位的插件类型
|
||||
|
||||
|
||||
## Geolocation
|
||||
|
||||
**Extends AMap.Control**
|
||||
|
||||
AMap.Geolocation 定位服务插件。融合了浏览器定位、高精度IP定位、安卓定位sdk辅助定位等多种手段，提供了获取当前准确位置、获取当前城市信息、持续定位(浏览器定位)等功能。用户可以通过两种当时获得定位的成败和结果，一种是在 getCurrentPosition的时候传入回调函数来处理定位结果，一种是通过事件监听来取得定位结果。
|
||||
|
||||
### Parameters
|
||||
|
||||
- `options` **GeolocationOptions** 初始化参数
|
||||
- `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'
|
||||
|
||||
### getCurrentPosition
|
||||
|
||||
获取 用户的精确位置，有失败几率
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `callback` **GeolocationCallBack** 定位回调函数，成功或者失败均会回调
|
||||
|
||||
### getCityInfo
|
||||
|
||||
根据用户 IP 获取 用户所在城市信息
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `callback` **GeolocationCallBack**
|
||||
|
||||
## GeolocationCallBack
|
||||
|
||||
Geolocation插件的定位回调函数
|
||||
|
||||
Type: Function
|
||||
|
||||
### Parameters
|
||||
|
||||
- `status` **string** 'complete' 或者 'error'
|
||||
- `result` **GeolocationResult** 定位结果
|
||||
|
||||
## GeolocationResult
|
||||
|
||||
浏览器定位的定位结果，定位的过程和失败信息可以从 message 字段中获取
|
||||
|
||||
Type: Object
|
||||
|
||||
### Properties
|
||||
|
||||
- `position` **LngLat** 定位到的经纬度位置
|
||||
- `accuracy` **number** 定位精度，米
|
||||
- `location_type` **number** 定位的类型，ip/h5/sdk/ipcity
|
||||
- `message` **number** 定位过程的信息，用于排查定位失败原因
|
||||
- `isConverted` **number** 是否已经转换为高德坐标
|
||||
- `info` **number** 'SUCCESS' 或者 'PERMISSION_DENIED' 或者 'TIME_OUT' 或者 'POSITION_UNAVAILABLE'
|
||||
- `addressComponent` **number** needAddress的时候返回，结构化地址信息
|
||||
- `formattedAddress` **number** needAddress的时候返回，规范地址
|
||||
- `pois` **number** needAddress的时候返回，定位点附近的POI信息
|
||||
- `roads` **number** needAddress的时候返回，定位点附近的道路信息
|
||||
- `crosses` **number** needAddress的时候返回，定位点附近的交叉口信息
|
||||
|
||||
## CitySearch
|
||||
|
||||
**Extends AMap.Event**
|
||||
|
||||
AMap.CitySearch 根据IP返回对应城市信息，提供根据输入IP或自动获取IP获取对应城市信息功能。
|
||||
用户可以通过自定义回调函数取回并显示[查询结果][139]。
|
||||
若服务请求失败，系统将返回[错误信息][140]。
|
||||
|
||||
### getLocalCity
|
||||
|
||||
自动获取用户IP，回调返回当前用户所在城市
|
||||
当status为complete时，result为CitySearchResult；
|
||||
当status为error时，result为错误信息info；
|
||||
当status为no_data时，代表检索返回0结果
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `CitySearchCallback` **function** 查询的回调函数
|
||||
- `cbk` **function (status: String, result: info)** 回调函数
|
||||
|
||||
### getCityByIp
|
||||
|
||||
根据输入IP地址返回对应城市信息，status同上
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `ip` **String** IP地址
|
||||
- `CitySearchCallback` **function (status: String, result: info)** 回调函数
|
||||
@@ -0,0 +1,88 @@
|
||||
## 信息窗体
|
||||
|
||||
用于在地图上展示复杂的说明性信息的类型
|
||||
|
||||
|
||||
## InfoWindow
|
||||
|
||||
**Extends OverlayDOM**
|
||||
|
||||
信息窗体，地图仅可同时展示一个信息窗体，推荐为信息窗体通过样式显示设置尺寸。 \* // [亲手试一试][79]
|
||||
|
||||
### Parameters
|
||||
|
||||
- `opts` **InfoOptions** 信息窗体参数
|
||||
- `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对象, [自定义窗体示例][81]
|
||||
- `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)** 信息窗体显示基点位置
|
||||
|
||||
### Examples
|
||||
|
||||
```javascript
|
||||
var infoWindow = new AMap.InfoWindow({
|
||||
content: '信息窗体',
|
||||
anchor: 'bottom-center',
|
||||
});
|
||||
// 在地图上打开信息窗体
|
||||
infoWindow.open(map, [116.397389,39.909466]);
|
||||
```
|
||||
|
||||
### open
|
||||
|
||||
打开信息窗体
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `map` **Map**
|
||||
- `position` **Vector2**
|
||||
- `height` **number**
|
||||
|
||||
### getIsOpen
|
||||
|
||||
获取信息窗体是否打开
|
||||
|
||||
Returns **boolean**
|
||||
|
||||
### setSize
|
||||
|
||||
设置信息窗体大小（isCustom为false时有效）
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `size` **(Size | Vector2)**
|
||||
|
||||
### setContent
|
||||
|
||||
获取信息窗体大小
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `content` **(HTMLElement \| string)**
|
||||
|
||||
### setAnchor
|
||||
|
||||
设置信息窗体锚点 默认值：'bottom-center'。可选值：'top-left'|'top-center'|'top-right'|'middle-left'|'center'|'middle-right'|'bottom-left'|'bottom-center'|'bottom-right'
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `anchor` **string**
|
||||
|
||||
### getExtData
|
||||
|
||||
获取用户自定义属性
|
||||
|
||||
Returns **(any | undefined)**
|
||||
|
||||
### setExtData
|
||||
|
||||
设置用户自定义属性
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `extData`
|
||||
@@ -0,0 +1,988 @@
|
||||
## 自有数据图层
|
||||
|
||||
用于加载展示开发者自己拥有的数据或者图像的图层类型
|
||||
|
||||
|
||||
## HeatMap
|
||||
|
||||
热力图，基于第三方heatmap.js实现，以特殊高亮的形式显示数据密集程度。根据密集程度的不同，图上会呈现不同的颜色，以直观的形式展现数据密度。API引用了heatmap.js最新版本v2.0，v2.0基于新的渲染模型，具有更高的渲染效率和更强的性能。支持chrome、firefox、safari、ie9及以上浏览器。
|
||||
|
||||
### Parameters
|
||||
|
||||
- `map` **Map** 要叠加热力图的地图对象
|
||||
- `opts` **HeatMapOptions** 热力图属性配置
|
||||
- `opts.radius` **number** 热力图中单个点的半径，默认：30，单位：pixel
|
||||
- `opts.gradient` **object** 热力图的渐变区间，热力图按照设置的颜色及间隔显示热力图，例{0.4:'rgb(0, 255, 255)',0.85:'rgb(100, 0, 255)',},其中 key 表示间隔位置，取值范围： [0,1]，value 为颜色值。默认：heatmap.js标准配色方案
|
||||
- `opts.opacity` **array** 热力图透明度区间数组，取值范围[0,1]，0表示完全透明，1表示不透明，默认：[0,1]
|
||||
- `opts.zooms` **array** 支持的缩放级别范围，取值范围[3-20]，默认：[3,20]
|
||||
- `opts.visible` **boolean** 是否可见
|
||||
- `opts.zIndex` **number** 热力图层在地图上的叠加顺序，默认 130
|
||||
- `opts.3d` **HeatMap3DOptions** 3D热力图属性
|
||||
- `opts.3d.heightScale` **number** 高度缩放因子，表示在单位高度上的缩放比例， 默认为 1
|
||||
- `opts.3d.heightBezier` **array** 影响高度平滑度的贝塞尔曲线因子，默认 [0.5, 0, 1, 0.5],
|
||||
- `opts.3d.gridSize` **number** 取样精度，越小越平滑，越大性能越高
|
||||
|
||||
### Examples
|
||||
|
||||
```javascript
|
||||
var heatmap;
|
||||
var points = [
|
||||
{"lng":116.191031,"lat":39.988585,"count":10},
|
||||
{"lng":116.389275,"lat":39.925818,"count":11},
|
||||
{"lng":116.287444,"lat":39.810742,"count":12},
|
||||
{"lng":116.481707,"lat":39.940089,"count":13},
|
||||
{"lng":116.410588,"lat":39.880172,"count":14},
|
||||
{"lng":116.394816,"lat":39.91181,"count":15},
|
||||
{"lng":116.416002,"lat":39.952917,"count":16},
|
||||
];
|
||||
// 加载热力图插件
|
||||
map.plugin(["AMap.HeatMap"],function(){
|
||||
// 在地图对象叠加热力图
|
||||
heatmap = new AMap.Heatmap({map:map});
|
||||
// 设置热力图数据集
|
||||
heatmap.setDataSet({data:points,max:100});
|
||||
});
|
||||
```
|
||||
|
||||
### getMap
|
||||
|
||||
获取热力图叠加地图对象
|
||||
|
||||
Returns **Map**
|
||||
|
||||
### setMap
|
||||
|
||||
设置热力图要叠加的地图实例，也可以在Map中的layers属性中设置为默认显示的图层
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `map` **Map** 地图实例
|
||||
|
||||
### getOptions
|
||||
|
||||
获取热力图的属性信息
|
||||
|
||||
Returns **HeatMapOptions**
|
||||
|
||||
### setOptions
|
||||
|
||||
设置热力图属性，请参考 HeatMapOptions 列表中的说明
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `options` **HeatMapOptions** 热力图配置
|
||||
|
||||
### getDataSet
|
||||
|
||||
输出热力图的数据集，数据结构同setDataSet中的数据集
|
||||
|
||||
Returns **object**
|
||||
|
||||
### setDataSet
|
||||
|
||||
设置热力图展现的数据集，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'][61],
|
||||
dataParser:function(data){
|
||||
return doSomthing(data);//返回的对象结果应该与上面例子的data字段结构相同
|
||||
}
|
||||
}
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `dataset` **object** 数据集
|
||||
|
||||
### addDataPoint
|
||||
|
||||
向热力图数据集中添加坐标点，count不填写时默认：1
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `longitude` **string** 经度
|
||||
- `latitude` **string** 纬度
|
||||
- `count` **number** 权重
|
||||
|
||||
### getzIndex
|
||||
|
||||
获得热力图层叠加层级
|
||||
|
||||
Returns **number**
|
||||
|
||||
### setzIndex
|
||||
|
||||
设置热力图层叠加层级
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `zIndex` **number** 热力图层叠加层级
|
||||
|
||||
### show
|
||||
|
||||
显示热力图
|
||||
|
||||
### hide
|
||||
|
||||
隐藏热力图
|
||||
|
||||
## VectorLayer
|
||||
|
||||
**Extends \_Layer.CoreVectorLayer**
|
||||
|
||||
### add
|
||||
|
||||
添加矢量覆盖物到集合中，不支持添加重复的覆盖物
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `vectors` **(VectorOverlay | Array<VectorOverlay>)** 矢量覆盖物或矢量覆盖物数组
|
||||
|
||||
### remove
|
||||
|
||||
删除矢量覆盖物
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `vectors` **(VectorOverlay | Array<VectorOverlay>)** 矢量覆盖物或矢量覆盖物数组
|
||||
|
||||
### show
|
||||
|
||||
显示图层
|
||||
|
||||
### hide
|
||||
|
||||
隐藏图层
|
||||
|
||||
### has
|
||||
|
||||
判断传入的矢量覆盖物实例是否在VectorLayer这中
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `vector` **VectorOverlay**
|
||||
|
||||
Returns **boolean**
|
||||
|
||||
### clear
|
||||
|
||||
清空 VectorLayer
|
||||
|
||||
### setOptions
|
||||
|
||||
批量修改矢量覆盖物属性(包括线样式、样色等等)
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `opt` **Object**
|
||||
|
||||
### query
|
||||
|
||||
根据经纬度查询矢量覆盖物信息
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `geometry` **LngLatLike**
|
||||
|
||||
Returns **(VectorOverlay | undefined)** vector 矢量覆盖物
|
||||
|
||||
### getBounds
|
||||
|
||||
获取 VectorOverlay 所有覆盖物显示的范围
|
||||
|
||||
Returns **(Bounds \| undefined)** 经纬度范围值
|
||||
|
||||
## VectorLayer
|
||||
|
||||
**Extends \_Layer.CoreVectorLayer**
|
||||
|
||||
### Parameters
|
||||
|
||||
- `opts` **Object**
|
||||
- `opts.visible` **boolean** 是否显示 (optional, default `true`)
|
||||
- `opts.zIndex` **number** 是否显示 (optional, default `110`)
|
||||
|
||||
### Examples
|
||||
|
||||
```javascript
|
||||
var layer = new AMap.VectorLayer();
|
||||
map.add(layer);
|
||||
var circle = new AMap.circle({center: [116.4, 39.9], radius:1000});
|
||||
layer.add(circle);
|
||||
```
|
||||
|
||||
### add
|
||||
|
||||
添加矢量覆盖物到集合中，不支持添加重复的覆盖物
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `vectors` **(VectorOverlay | Array<VectorOverlay>)** 矢量覆盖物或矢量覆盖物数组
|
||||
|
||||
### remove
|
||||
|
||||
删除矢量覆盖物
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `vectors` **(VectorOverlay | Array<VectorOverlay>)** 矢量覆盖物或矢量覆盖物数组
|
||||
|
||||
### show
|
||||
|
||||
显示图层
|
||||
|
||||
### hide
|
||||
|
||||
隐藏图层
|
||||
|
||||
### has
|
||||
|
||||
判断传入的矢量覆盖物实例是否在VectorLayer这中
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `vector` **VectorOverlay**
|
||||
|
||||
Returns **boolean**
|
||||
|
||||
### clear
|
||||
|
||||
清空 VectorLayer
|
||||
|
||||
### setOptions
|
||||
|
||||
批量修改矢量覆盖物属性(包括线样式、样色等等)
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `opt` **Object**
|
||||
|
||||
### query
|
||||
|
||||
根据经纬度查询矢量覆盖物信息
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `geometry` **LngLatLike**
|
||||
|
||||
Returns **(VectorOverlay | undefined)** vector 矢量覆盖物
|
||||
|
||||
### getBounds
|
||||
|
||||
获取 VectorOverlay 所有覆盖物显示的范围
|
||||
|
||||
Returns **(Bounds \| undefined)** 经纬度范围值
|
||||
|
||||
## LabelsLayer
|
||||
|
||||
标注层
|
||||
|
||||
### Parameters
|
||||
|
||||
- `opts` **LabelsLayerOptions** 标注层参数
|
||||
- `opts.visible` **boolean** 标注层是否可见，默认值:true
|
||||
- `opts.zIndex` **number** 标注层与其它图层的叠加顺序，默认值：120
|
||||
- `opts.opacity` **number** 标注层透明度
|
||||
- `opts.collision` **boolean** 标注层内的标注是否避让
|
||||
- `opts.allowCollision` **boolean** 标注层内的标注是否允许其它标注层对它避让
|
||||
- `opts.zooms` **\[number, number]** 标注层展示层级范围
|
||||
|
||||
### Examples
|
||||
|
||||
```javascript
|
||||
// 创建一个标注层实例
|
||||
var labelsLayer = new AMap.LabelsLayer({
|
||||
collision: true,
|
||||
opacity: 1,
|
||||
zIndex: 120,
|
||||
allowCollision: true,
|
||||
});
|
||||
// 将标注层添加到地图上
|
||||
map.add(labelsLayer);
|
||||
```
|
||||
|
||||
### getCollision
|
||||
|
||||
获取标注层是否支持内部标注避让
|
||||
|
||||
Returns **any**
|
||||
|
||||
### setCollision
|
||||
|
||||
设置标注层是否支持内部标注避让
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `collision` **boolean** 默认值: true
|
||||
|
||||
### getAllowCollision
|
||||
|
||||
获取标注层是否允许其它层标注避让
|
||||
|
||||
Returns **boolean**
|
||||
|
||||
### setAllowCollision
|
||||
|
||||
设置标注层是否允许其它层标注避让，开启该功能可实现地图标注对 LabelMarker 的避让，[相关示例][63]
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `allowCollision` **boolean**
|
||||
|
||||
### getOpacity
|
||||
|
||||
获取标注层透明度
|
||||
|
||||
Returns **number**
|
||||
|
||||
### setOpacity
|
||||
|
||||
设置标注层透明度
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `opacity` **number**
|
||||
|
||||
### getZooms
|
||||
|
||||
获取标注层显示层级范围
|
||||
|
||||
Returns **any**
|
||||
|
||||
### setZooms
|
||||
|
||||
设置标注层显示层级范围
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `zooms` **\[number]**
|
||||
|
||||
### getzIndex
|
||||
|
||||
获取标注层叠加顺序
|
||||
|
||||
Returns **number**
|
||||
|
||||
### setzIndex
|
||||
|
||||
设置标注层叠加顺序
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `zIndex` **number**
|
||||
|
||||
### add
|
||||
|
||||
将 labelMarker 添加到标注层上
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `labelMarkers` **Array<LabelMarker>** 可添加单个标注或标注数组
|
||||
|
||||
### remove
|
||||
|
||||
将 labelMarker 从标注层上移除
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `labelMarkers` **(LabelMarker \| Array<LabelMarker>)** 可移除单个标注或标注数组
|
||||
|
||||
### clear
|
||||
|
||||
清空标注层上的标注
|
||||
|
||||
### show
|
||||
|
||||
显示标注层
|
||||
|
||||
### hide
|
||||
|
||||
隐藏标注层
|
||||
|
||||
### getAllOverlays
|
||||
|
||||
获取标注层内的所有标注对象
|
||||
|
||||
Returns **Array<any>**
|
||||
|
||||
## CustomLayer
|
||||
|
||||
**Extends \_Layer.CoreCustomLayer**
|
||||
|
||||
### Parameters
|
||||
|
||||
- `canvas`
|
||||
- `opts`
|
||||
|
||||
### getOptions
|
||||
|
||||
获取图层参数信息
|
||||
|
||||
Returns **Object** 图层参数信息
|
||||
|
||||
### getzIndex
|
||||
|
||||
获取图层层级
|
||||
|
||||
Returns **Number** zIndex 图层层级
|
||||
|
||||
### setzIndex
|
||||
|
||||
设置图层层级，数字越大图层层级越高
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `zIndex` **Number** 图层层级值
|
||||
|
||||
### setzIndex
|
||||
|
||||
设置图层层级
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `zIndex` **number** 图层层级
|
||||
|
||||
### getOpacity
|
||||
|
||||
获取图层透明度
|
||||
|
||||
Returns **Number** opacity 图层透明度
|
||||
|
||||
### setOpacity
|
||||
|
||||
设置图层透明度，范围 [0 ~ 1]
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `opacity` **Number** 图层透明度
|
||||
|
||||
### getZooms
|
||||
|
||||
获取该图层可显示的级别范围，默认取值范围为[2-20]
|
||||
|
||||
Returns **\[Number, Number]** 缩放范围
|
||||
|
||||
### setZooms
|
||||
|
||||
获取该图层可显示的级别范围
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `zooms` **\[Number, Number]** 缩放范围
|
||||
|
||||
### show
|
||||
|
||||
设置图层可见
|
||||
|
||||
### hide
|
||||
|
||||
设置图层隐藏
|
||||
|
||||
### setMap
|
||||
|
||||
添加到地图上
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `地图实例对象` **Map**
|
||||
|
||||
## CustomLayer
|
||||
|
||||
**Extends Layer**
|
||||
|
||||
自定义图层是一种完全由开发者来指定绘制方法的图层 </br>
|
||||
[相关示例][65]
|
||||
|
||||
### Parameters
|
||||
|
||||
- `canvas` **HTMLCanvasElement** canvas 对象
|
||||
- `opts` **CustomLayerOption** 默认图层参数
|
||||
- `opts.render` **Function** 绘制函数，初始化完成时候，开发者需要给该图层设定render方法， </br>
|
||||
该方法需要实现图层的绘制，API会在合适的时机自动调用该方法
|
||||
- `opts.zooms` **\[Number, Number]** 图层缩放等级范围，默认 [2, 20] (optional, default `[2,20]`)
|
||||
- `opts.opacity` **Number** 图层透明度，默认为 1 (optional, default `1`)
|
||||
- `opts.visible` **Boolean** 图层是否可见，默认为 true (optional, default `true`)
|
||||
- `opts.zIndex` **Number** 图层的层级，默认为 120 (optional, default `120`)
|
||||
- `opts.alwaysRender` **Boolean** 是否主动 (optional, default `false`)
|
||||
|
||||
### Examples
|
||||
|
||||
```javascript
|
||||
var cLayer = new AMap.CustomLayer(canvas, {
|
||||
zooms: [2, 18],
|
||||
zIndex: 120,
|
||||
render() {
|
||||
// 对 canvas 进行绘制
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### getOptions
|
||||
|
||||
获取图层参数信息
|
||||
|
||||
Returns **Object** 图层参数信息
|
||||
|
||||
### getzIndex
|
||||
|
||||
获取图层层级
|
||||
|
||||
Returns **Number** zIndex 图层层级
|
||||
|
||||
### setzIndex
|
||||
|
||||
设置图层层级，数字越大图层层级越高
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `zIndex` **Number** 图层层级值
|
||||
|
||||
### setzIndex
|
||||
|
||||
设置图层层级
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `zIndex` **number** 图层层级
|
||||
|
||||
### getOpacity
|
||||
|
||||
获取图层透明度
|
||||
|
||||
Returns **Number** opacity 图层透明度
|
||||
|
||||
### setOpacity
|
||||
|
||||
设置图层透明度，范围 [0 ~ 1]
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `opacity` **Number** 图层透明度
|
||||
|
||||
### getZooms
|
||||
|
||||
获取该图层可显示的级别范围，默认取值范围为[2-20]
|
||||
|
||||
Returns **\[Number, Number]** 缩放范围
|
||||
|
||||
### setZooms
|
||||
|
||||
获取该图层可显示的级别范围
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `zooms` **\[Number, Number]** 缩放范围
|
||||
|
||||
### show
|
||||
|
||||
设置图层可见
|
||||
|
||||
### hide
|
||||
|
||||
设置图层隐藏
|
||||
|
||||
### setMap
|
||||
|
||||
添加到地图上
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `地图实例对象` **Map**
|
||||
|
||||
## Flexible
|
||||
|
||||
**Extends TileLayer**
|
||||
|
||||
灵活切片图层，继承自AMap.TileLayer，开发者可通过构造时传入给其传入createTile字段来指定每一个切片的内容 </br>
|
||||
[相关示例][67]
|
||||
|
||||
### Parameters
|
||||
|
||||
- `opts` **FlexibleLayerOptions**
|
||||
- `opts.cacheSize` **Number** 缓存瓦片数量
|
||||
- `opts.createTile` **function (x, y, z, success, fail)** 由开发者实现，由API自动调用，xyz分别为切片横向纵向编号和层级，切片大小
|
||||
256。假设每次创建的贴片为A(支持img或者canvas)，当创建或者获取成功时请回调success(A)，不需要显示或者失败时请回调fail()
|
||||
- `opts.zooms` **\[Number, Number]** 支持的缩放级别范围，默认范围 [2-30] (optional, default `[2,30]`)
|
||||
- `opts.opacity` **Number** 透明度，默认 1 (optional, default `1`)
|
||||
- `opts.visible` **Boolean** 是否显示，默认 true (optional, default `true`)
|
||||
- `opts.zIndex` **Number** 图层叠加的顺序值，1 表示最底层。默认 zIndex：4 (optional, default `4`)
|
||||
- `opts.tileSize` **Number** 切片大小，取值： </br>
|
||||
256，表示切片大小为256_256， </br>
|
||||
128，表示切片大小为128_128， </br>
|
||||
64，表示切片大小为64\*64。默认值为256 (optional, default `256`)
|
||||
|
||||
### getOptions
|
||||
|
||||
获取图层参数信息
|
||||
|
||||
Returns **Object** 图层参数信息
|
||||
|
||||
### getzIndex
|
||||
|
||||
获取图层层级
|
||||
|
||||
Returns **Number** zIndex 图层层级
|
||||
|
||||
### setzIndex
|
||||
|
||||
设置图层层级，数字越大图层层级越高
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `zIndex` **Number** 图层层级值
|
||||
|
||||
### getOpacity
|
||||
|
||||
获取图层透明度
|
||||
|
||||
Returns **Number** opacity 图层透明度
|
||||
|
||||
### setOpacity
|
||||
|
||||
设置图层透明度，范围 [0 ~ 1]
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `opacity` **Number** 图层透明度
|
||||
|
||||
### getZooms
|
||||
|
||||
获取该图层可显示的级别范围，默认取值范围为[2-30]
|
||||
|
||||
Returns **\[Number, Number]** 缩放范围
|
||||
|
||||
### setZooms
|
||||
|
||||
获取该图层可显示的级别范围
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `zooms` **\[Number, Number]** 缩放范围
|
||||
|
||||
### show
|
||||
|
||||
设置图层可见
|
||||
|
||||
### hide
|
||||
|
||||
设置图层隐藏
|
||||
|
||||
### destroy
|
||||
|
||||
销毁图层
|
||||
|
||||
## ImageLayer
|
||||
|
||||
**Extends Layer**
|
||||
|
||||
图片图层类，用户可以将一张静态图片作为图层添加在地图上，图片图层会随缩放级别而自适应缩放。 </br>
|
||||
[相关示例][68]
|
||||
|
||||
### Parameters
|
||||
|
||||
- `opts` **ImageLayerOptions** 传入默认参数列表
|
||||
- `opts.url` **String** 图片地址链接
|
||||
- `opts.zooms` **\[Number, Number]** 图层缩放等级范围，默认 [2, 30] (optional, default `[2,30]`)
|
||||
- `opts.bounds` **(\[Number, Number, Number, Number] | Bounds)** 图片的范围大小经纬度，如果传递数字数组类型: [minlng,minlat,maxlng,maxlat]
|
||||
- `opts.opacity` **Number** 图层透明度，默认为 1 (optional, default `1`)
|
||||
- `opts.visible` **Boolean** 图层是否可见，默认为 true (optional, default `true`)
|
||||
- `opts.zIndex` **Number** 图层的层级，默认为 6 (optional, default `6`)
|
||||
|
||||
### Examples
|
||||
|
||||
```javascript
|
||||
var imageLayer = new AMap.ImageLayer({
|
||||
url: 'https://amappc.cn-hangzhou.oss-pub.aliyun-inc.com/lbs/static/img/dongwuyuan.jpg',
|
||||
bounds: new AMap.Bounds(
|
||||
[116.327911, 39.939229],
|
||||
[116.342659, 39.946275]
|
||||
),
|
||||
zooms: [10, 18]
|
||||
});
|
||||
```
|
||||
|
||||
### getImageUrl
|
||||
|
||||
获取图片的地址
|
||||
|
||||
### setImageUrl
|
||||
|
||||
设置图片的地址
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `url` **String** 图片地址
|
||||
|
||||
### getBounds
|
||||
|
||||
获取 ImageLayer显示的范围
|
||||
|
||||
Returns **Bounds** 经纬度范围值
|
||||
|
||||
### setBounds
|
||||
|
||||
设置 ImageLayer显示的范围
|
||||
|
||||
### getOptions
|
||||
|
||||
获取图层参数信息
|
||||
|
||||
Returns **object** 图层参数信息
|
||||
|
||||
### getzIndex
|
||||
|
||||
获取图层层级
|
||||
|
||||
Returns **Number** zIndex 图层层级
|
||||
|
||||
### setzIndex
|
||||
|
||||
设置图层层级，数字越大图层层级越高
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `zIndex` **Number** 图层层级值
|
||||
|
||||
### getOpacity
|
||||
|
||||
获取图层透明度
|
||||
|
||||
Returns **Number** opacity 图层透明度
|
||||
|
||||
### setOpacity
|
||||
|
||||
设置图层透明度，范围 [0 ~ 1]
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `opacity` **Number** 图层透明度
|
||||
|
||||
### getZooms
|
||||
|
||||
获取该图层可显示的级别范围，默认取值范围为[2-20]
|
||||
|
||||
Returns **\[number, number]** 缩放范围
|
||||
|
||||
### setZooms
|
||||
|
||||
获取该图层可显示的级别范围
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `zooms` **\[number, number]** 缩放范围
|
||||
|
||||
### show
|
||||
|
||||
设置图层可见
|
||||
|
||||
### hide
|
||||
|
||||
设置图层隐藏
|
||||
|
||||
## CanvasLayer
|
||||
|
||||
**Extends ImageLayer**
|
||||
|
||||
Canvas图层类，用户可以将一个 Canvas 作为图层添加在地图上，Canvas图层会随缩放级别而自适应缩放。 </br>
|
||||
[相关示例][69]
|
||||
|
||||
### Parameters
|
||||
|
||||
- `opts` **ImageLayerOptions** 传入默认参数列表
|
||||
- `opts.canvas` **HTMLCanvasElement** Canvas DOM 对象
|
||||
- `opts.zooms` **\[Number, Number]** 图层缩放等级范围，默认 [2, 30] (optional, default `[2,30]`)
|
||||
- `opts.bounds` **(\[Number, Number, Number, Number] | Bounds)** canvas 的范围大小经纬度, 如果传递数字数组类型: [minlng,minlat,maxlng,maxlat]
|
||||
- `opts.opacity` **Number** 图层透明度，默认为 1 (optional, default `1`)
|
||||
- `opts.visible` **Boolean** 图层是否可见，默认为 true (optional, default `true`)
|
||||
- `opts.zIndex` **Number** 图层的层级，默认为 6 (optional, default `6`)
|
||||
|
||||
### setCanvas
|
||||
|
||||
修改显示的Canvas
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `canvas` **HTMLCanvasElement**
|
||||
|
||||
### getElement
|
||||
|
||||
返回 Canvas 对象
|
||||
|
||||
Returns **HTMLCanvasElement** canvas 对象
|
||||
|
||||
### getBounds
|
||||
|
||||
返回 canvas 范围的经纬度
|
||||
|
||||
Returns **Bounds** 范围经纬度
|
||||
|
||||
### getBounds
|
||||
|
||||
当canvas的内容发生改变是用于刷新图层，3D视图下调用，2D视图不需要调用
|
||||
|
||||
### setBounds
|
||||
|
||||
设置 CanvasLayer 显示的范围
|
||||
|
||||
### getOptions
|
||||
|
||||
获取图层参数信息
|
||||
|
||||
Returns **object** 图层参数信息
|
||||
|
||||
### getzIndex
|
||||
|
||||
获取图层层级
|
||||
|
||||
Returns **number** zIndex 图层层级
|
||||
|
||||
### setzIndex
|
||||
|
||||
设置图层层级，数字越大图层层级越高
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `zIndex` **number** 图层层级值
|
||||
|
||||
### getOpacity
|
||||
|
||||
获取图层透明度
|
||||
|
||||
Returns **number** opacity 图层透明度
|
||||
|
||||
### setOpacity
|
||||
|
||||
设置图层透明度，范围 [0 ~ 1]
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `opacity` **number** 图层透明度
|
||||
|
||||
### getZooms
|
||||
|
||||
获取该图层可显示的级别范围，默认取值范围为[2-20]
|
||||
|
||||
Returns **\[number, number]** 缩放范围
|
||||
|
||||
### setZooms
|
||||
|
||||
获取该图层可显示的级别范围
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `zooms` **\[number, number]** 缩放范围
|
||||
|
||||
### show
|
||||
|
||||
设置图层可见
|
||||
|
||||
### hide
|
||||
|
||||
设置图层隐藏
|
||||
|
||||
## GLCustomLayer
|
||||
|
||||
3d 自定义图层
|
||||
|
||||
### Parameters
|
||||
|
||||
- `opts` **GlCustomLayerOptions**
|
||||
- `opts.init` **Function** 初始化的时候，开发者可以在这个函数参数里面获取 gl 上下文，进行一些初始化的操作。
|
||||
- `opts.render` **Function** 绘制函数，初始化完成时候，开发者需要给该图层设定render方法， </br>
|
||||
该方法需要实现图层的绘制，API会在合适的时机自动调用该方法
|
||||
- `opts.zooms` **\[Number, Number]** 图层缩放等级范围，默认 [2, 20] (optional, default `[2,20]`)
|
||||
- `opts.opacity` **Number** 图层透明度，默认为 1 (optional, default `1`)
|
||||
- `opts.visible` **Boolean** 图层是否可见，默认为 true (optional, default `true`)
|
||||
- `opts.zIndex` **Number** 图层的层级，默认为 120 (optional, default `10`)
|
||||
|
||||
### Examples
|
||||
|
||||
```javascript
|
||||
var glCustomLayer = new GLCustomLayer({
|
||||
init: function(gl){
|
||||
// init shader or sth...
|
||||
},
|
||||
render: function(gl, state){
|
||||
// render every frame
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
### getMap
|
||||
|
||||
获取GLCustomLayer所属地图实例
|
||||
|
||||
Returns **(Map | null)**
|
||||
|
||||
### getzIndex
|
||||
|
||||
获取GLCustomLayer叠加顺序
|
||||
|
||||
Returns **number**
|
||||
|
||||
### setzIndex
|
||||
|
||||
设置GLCustomLayer叠加顺序
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `zIndex` **number** 叠加值
|
||||
|
||||
Returns **void**
|
||||
|
||||
### getOpacity
|
||||
|
||||
获取GLCustomLayer透明度
|
||||
|
||||
Returns **number**
|
||||
|
||||
### setOpacity
|
||||
|
||||
设置GLCustomLayer透明度
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `opacity` **number** 透明度
|
||||
|
||||
Returns **void**
|
||||
|
||||
### getZooms
|
||||
|
||||
获取GLCustomLayer显示层级范围
|
||||
|
||||
Returns **number**
|
||||
|
||||
### setZooms
|
||||
|
||||
设置GLCustomLayer显示层级范围
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `zooms` **Vector** 显示层级范围，默认[3, 20]
|
||||
|
||||
Returns **number**
|
||||
|
||||
### show
|
||||
|
||||
显示GLCustomLayer
|
||||
|
||||
Returns **void**
|
||||
|
||||
### hide
|
||||
|
||||
隐藏GLCustomLayer
|
||||
|
||||
Returns **void**
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,420 @@
|
||||
## 行业标准图层
|
||||
|
||||
符合 OGC 标准或者行业通行规范的的图层类型
|
||||
|
||||
|
||||
## WMS
|
||||
|
||||
**Extends TileLayer**
|
||||
|
||||
用于加载OGC标准的WMS地图服务的一种图层类，仅支持EPSG3857坐标系统的WMS图层。 </br>
|
||||
[查看 WMS的OGC标准][53]。
|
||||
|
||||
### Parameters
|
||||
|
||||
- `opts` **WMSLayerOptions** 默认图层参数
|
||||
- `opts.url` **String** wmts服务的url地址，如：'[https://services.arcgisonline.com/arcgis/rest/services/'+][54]
|
||||
'Demographics/USA_Population_Density/MapServer/WMTS/'
|
||||
- `opts.blend` **Boolean** 地图级别切换时，不同级别的图片是否进行混合，如图层的图像内容为部分透明请设置为false
|
||||
- `opts.param` **Object** OGC标准的WMS地图服务的GetMap接口的参数，包括VERSION、LAYERS、STYLES、FORMAT、TRANSPARENT等， </br>
|
||||
CRS、BBOX、REQUEST、WIDTH、HEIGHT等参数请勿添加，例如： </br>
|
||||
{ </br>
|
||||
LAYERS: 'topp:states', </br>
|
||||
VERSION:'1.3.0', </br>
|
||||
FORMAT:'image/png' </br>
|
||||
}
|
||||
- `opts.zooms` **\[Number, Number]** 支持的缩放级别范围，默认范围 [2-30] (optional, default `[2,30]`)
|
||||
- `opts.opacity` **Number** 透明度，默认 1 (optional, default `1`)
|
||||
- `opts.visible` **Boolean** 是否显示，默认 true (optional, default `true`)
|
||||
- `opts.zIndex` **Number** 图层叠加的顺序值，1 表示最底层。默认 zIndex：4 (optional, default `4`)
|
||||
|
||||
### setParams
|
||||
|
||||
设置OGC标准的WMS getMap接口的参数，包括VERSION、LAYERS、STYLES、FORMAT、TRANSPARENT等
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `params` **Object** 参数集合，{VERSION: '1.0', ...}
|
||||
|
||||
### getParams
|
||||
|
||||
获取 OGC 标准的 WMS getMap 接口的参数
|
||||
|
||||
### setUrl
|
||||
|
||||
设置 WMS 服务地址
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `url` **String** 服务地址
|
||||
|
||||
### setUrl
|
||||
|
||||
设置 WMS 服务地址
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `url` **String** 服务地址
|
||||
|
||||
### getOptions
|
||||
|
||||
获取图层参数信息
|
||||
|
||||
Returns **Object** 图层参数信息
|
||||
|
||||
### getzIndex
|
||||
|
||||
获取图层层级
|
||||
|
||||
Returns **Number** zIndex 图层层级
|
||||
|
||||
### setzIndex
|
||||
|
||||
设置图层层级，数字越大图层层级越高
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `zIndex` **Number** 图层层级值
|
||||
|
||||
### getOpacity
|
||||
|
||||
获取图层透明度
|
||||
|
||||
Returns **Number** opacity 图层透明度
|
||||
|
||||
### setOpacity
|
||||
|
||||
设置图层透明度，范围 [0 ~ 1]
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `opacity` **Number** 图层透明度
|
||||
|
||||
### getZooms
|
||||
|
||||
获取该图层可显示的级别范围，默认取值范围为[2-30]
|
||||
|
||||
Returns **\[Number, Number]** 缩放范围
|
||||
|
||||
### setZooms
|
||||
|
||||
获取该图层可显示的级别范围
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `zooms` **\[Number, Number]** 缩放范围
|
||||
|
||||
### show
|
||||
|
||||
设置图层可见
|
||||
|
||||
### hide
|
||||
|
||||
设置图层隐藏
|
||||
|
||||
## WMTS
|
||||
|
||||
**Extends TileLayer**
|
||||
|
||||
用于加载 OGC 标准的 WMTS 地图服务的一种图层类，仅支持 EPSG3857 坐标系统的 WMTS 图层 </br>
|
||||
[查看 WMTS 标准][55] </br>
|
||||
[相关示例][56]
|
||||
|
||||
### Parameters
|
||||
|
||||
- `opts` **WMTSLayerOptions** 默认图层参数
|
||||
- `opts.url` **String** wms服务的url地址，如'[https://ahocevar.com/geoserver/wms][57]'
|
||||
- `opts.blend` **Boolean** 地图级别切换时，不同级别的图片是否进行混合，如图层的图像内容为部分透明请设置为false
|
||||
- `opts.param` **Object** OGC标准的WMTS地图服务的GetTile接口的参数，包括Version、Layer、
|
||||
Style、Format、Service等，TileMatrixSet、TileRow、TileCol、Request等参数请勿添加，例如： </br>
|
||||
{ </br>
|
||||
Layer: '0', </br>
|
||||
Version:'1.0.0', </br>
|
||||
Format: 'image/png' </br>
|
||||
}
|
||||
- `opts.zooms` **\[Number, Number]** 支持的缩放级别范围，默认范围 [2-30] (optional, default `[2,30]`)
|
||||
- `opts.opacity` **Number** 透明度，默认 1 (optional, default `1`)
|
||||
- `opts.visible` **Boolean** 是否显示，默认 true (optional, default `true`)
|
||||
- `opts.zIndex` **Number** 图层叠加的顺序值，1 表示最底层。默认 zIndex：4 (optional, default `4`)
|
||||
|
||||
### setParams
|
||||
|
||||
设置 OGC 标准的 WMTS getTile接口的参数，包括Version、Layer、Style、Format、Service等
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `params` **Object** 参数集合，{VERSION: '1.0', ...}
|
||||
|
||||
### getParams
|
||||
|
||||
获取 OGC 标准的 WMTS getMap 接口的参数
|
||||
|
||||
### getUrl
|
||||
|
||||
获取 WMTS 服务地址
|
||||
|
||||
Returns **String** 地址
|
||||
|
||||
### setUrl
|
||||
|
||||
设置 WMTS 服务地址
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `url` **String** 服务地址
|
||||
|
||||
### getOptions
|
||||
|
||||
获取图层参数信息
|
||||
|
||||
Returns **Object** 图层参数信息
|
||||
|
||||
### getzIndex
|
||||
|
||||
获取图层层级
|
||||
|
||||
Returns **Number** zIndex 图层层级
|
||||
|
||||
### setzIndex
|
||||
|
||||
设置图层层级，数字越大图层层级越高
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `zIndex` **Number** 图层层级值
|
||||
|
||||
### getOpacity
|
||||
|
||||
获取图层透明度
|
||||
|
||||
Returns **Number** opacity 图层透明度
|
||||
|
||||
### setOpacity
|
||||
|
||||
设置图层透明度，范围 [0 ~ 1]
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `opacity` **Number** 图层透明度
|
||||
|
||||
### getZooms
|
||||
|
||||
获取该图层可显示的级别范围，默认取值范围为[2-30]
|
||||
|
||||
Returns **\[Number, Number]** 缩放范围
|
||||
|
||||
### setZooms
|
||||
|
||||
获取该图层可显示的级别范围
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `zooms` **\[Number, Number]** 缩放范围
|
||||
|
||||
### show
|
||||
|
||||
设置图层可见
|
||||
|
||||
### hide
|
||||
|
||||
设置图层隐藏
|
||||
|
||||
## MapboxVectorTileLayer
|
||||
|
||||
**Extends Layer**
|
||||
|
||||
为了满足基于矢量瓦片块的数据可视化、矢量瓦片边界展示等开发需求，通过 AMap.MapboxVectorTileLayer 插件提供了简易矢量瓦片图层</br>
|
||||
此图层可以使用标准的 MVT 瓦片服务作为数据源。</br>
|
||||
可以配合[GeoHub-数据中心][58]发布的矢量瓦片服务。
|
||||
注意：使用高德数据平台发布服务，由于服务 URL 地址是明文，建议自行做服务代理转发，防止服务 ID 和 Key 明文传输导致数据泄露。</br>
|
||||
[相关示例][59]
|
||||
|
||||
### Parameters
|
||||
|
||||
- `opts` **MapboxVTLayerOptions** 图层初始化参数
|
||||
- `opts.zIndex` **Number** 图层的层级 (optional, default `80`)
|
||||
- `opts.opacity` **Number** 图层透明度 (optional, default `1`)
|
||||
- `opts.url` **String?** MVT 数据的链接地址
|
||||
- `opts.visible` **Boolean** 图层是否可见 (optional, default `true`)
|
||||
- `opts.zooms` **\[number, number]** 图层缩放等级范围 (optional, default `[2,22]`)
|
||||
- `opts.dataZooms` **\[number, number]** 瓦片数据等级范围，超过范围会使用最大/最小等级的数据 (optional, default `[2,18]`)
|
||||
- `opts.styles` **MapboxVTLayerStyle**
|
||||
- `opts.styles.polygon` **PolygonStyle?** 面类型的样式
|
||||
- `opts.styles.polygon.sourceLayer` **String** 使用数据中的哪个图层，默认使用 default 图层 (optional, default `'default'`)
|
||||
- `opts.styles.polygon.color` **(String \| Function)?** 面填充颜色
|
||||
- `opts.styles.polygon.borderWidth` **(Number \| Function)?** 描边宽度
|
||||
- `opts.styles.polygon.dash` **(Array<Number> | Function)?** 描边线的虚线配置，例如：[10,5,8,5]
|
||||
- `opts.styles.polygon.borderColor` **(String \| Function)?** 描边颜色
|
||||
- `opts.styles.polygon.injection` **Array<Any>?** 其他属性值中对于函数形式的值，假如需要获取外部变量，要使用数组的形式传入，便于在函数内部访问外部变量。请看下面的示例。
|
||||
- `opts.styles.polygon.visible` **(Boolean \| Function)?** 是否显示
|
||||
- `opts.styles.line` **LineStyle?** 线类型数据的样式
|
||||
- `opts.styles.line.sourceLayer` **String** 使用数据中的哪个图层，默认使用 default 图层 (optional, default `'default'`)
|
||||
- `opts.styles.line.color` **(String \| Function)?** 线填充颜色
|
||||
- `opts.styles.line.lineWidth` **(Number \| Function)?** 宽度
|
||||
- `opts.styles.line.dash` **(String \| Function)?** 虚线配置，例如：[10,5,8,5]
|
||||
- `opts.styles.line.injection` **Array<Any>?** 其他属性值中对于函数形式的值，假如需要获取外部变量，要使用数组的形式传入，便于在函数内部访问外部变量。请看下面的示例。
|
||||
- `opts.styles.line.visible` **(Boolean \| Function)?** 是否显示
|
||||
- `opts.styles.point` **PointStyle?** 点类型数据的样式
|
||||
- `opts.styles.point.sourceLayer` **String** 使用数据中的哪个图层，默认使用 default 图层 (optional, default `'default'`)
|
||||
- `opts.styles.point.radius` **(String \| Function)?** 圆点的半径，单位像素
|
||||
- `opts.styles.point.color` **(Number \| Function)?** 圆的填充颜色
|
||||
- `opts.styles.point.borderWidth` **(String \| Function)?** 描边的宽度
|
||||
- `opts.styles.point.borderColor` **(String \| Function)?** 描边的颜色
|
||||
- `opts.styles.point.injection` **Array<Any>?** 其他属性值中对于函数形式的值，假如需要获取外部变量，要使用数组的形式传入，便于在函数内部访问外部变量。请看下面的示例。
|
||||
- `opts.styles.point.visible` **(Boolean \| Function)?** 是否显示
|
||||
- `opts.styles.polyhedron` **PolyhedronStyle?** 多面体类型的样式
|
||||
- `opts.styles.polyhedron.sourceLayer` **String** 使用数据中的哪个图层，默认使用 default 图层 (optional, default `'default'`)
|
||||
- `opts.styles.polyhedron.topColor` **(String \| Function)?** 顶面颜色
|
||||
- `opts.styles.polyhedron.sideColor` **(String \| Function)?** 侧面颜色
|
||||
- `opts.styles.polyhedron.texture` **(String \| Function)?** 侧面纹理，优先级高于侧面颜色
|
||||
- `opts.styles.polyhedron.injection` **Array<Any>?** 其他属性值中对于函数形式的值，假如需要获取外部变量，要使用数组的形式传入，便于在函数内部访问外部变量。请看下面的示例。
|
||||
- `opts.styles.polyhedron.visible` **(Boolean \| Function)?** 是否显示
|
||||
|
||||
### Examples
|
||||
|
||||
```javascript
|
||||
var globalVar = ['这是', '一个', '外部', '变量'];
|
||||
var mvtl = new AMap.MapboxVectorTileLayer({
|
||||
zIndex: 150,
|
||||
opacity: 1,
|
||||
// URL可以使用数据服务平台的服务，也可以使用自己发布的 MVT 数据服务
|
||||
url: 'https://restapi.amap.com/rest/lbs/geohub/tiles/mvt?z=[z]&x=[x]&y=[y]&size=512&key=您申请的key值&id=数据服务ID',
|
||||
dataZooms: [2, 18],
|
||||
zooms: [2, 20],
|
||||
tileSize: 256,
|
||||
styles: {
|
||||
point: {
|
||||
sourceLayer: 'default',
|
||||
visible: function (f, inject) {
|
||||
// 这里的 inject 参数就是一个数组，他的值就是 injection 字段的数组值：[visis]。
|
||||
return inject[0].indexOf('这是') > -1;
|
||||
},
|
||||
injection: [globalVar],
|
||||
radius: function (props) {
|
||||
return Math.random() * 20 + 5;
|
||||
},
|
||||
color: 'red',
|
||||
borderWidth: 20 || function (props) {
|
||||
return Math.random() * 5 + 2;
|
||||
},
|
||||
borderColor: 'rgba(255,255,255,1)',
|
||||
},
|
||||
polygon: {
|
||||
sourceLayer: 'default',
|
||||
color: function (props) {
|
||||
return 'rgba(0,0,0,1)';
|
||||
},
|
||||
dash: [10, 0, 10, 0],
|
||||
borderColor: 'rgba(30,112,255,1)',
|
||||
borderWidth: 5,
|
||||
},
|
||||
line: {
|
||||
sourceLayer: 'default',
|
||||
color: 'rgba(20,140,40,1)',
|
||||
lineWidth: 5,
|
||||
dash: [10, 0, 10, 0],
|
||||
},
|
||||
polyhedron: {
|
||||
sourceLayer: 'default',
|
||||
topColor: 'rgba(230,230,230,0.9)',
|
||||
sideColor: 'rgba(240,240,240,0.9)',
|
||||
},
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### setStyles
|
||||
|
||||
设置样式信息
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `styles` **MapboxVTLayerStyle** 样式信息
|
||||
|
||||
### filterByRect
|
||||
|
||||
获取矩形范围的要素
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `rect` **Polygon** 多边型，例如：\[[lng,lat],[lng,lat],[lng,lat],[lng,lat],[lng,lat]]
|
||||
- `type` **String** 想要获取的要素类型，默认选择所有：all。可选值：all、point、polygon、line (optional, default `"all"`)
|
||||
|
||||
Returns **Array<Feature>**
|
||||
|
||||
### getStyles
|
||||
|
||||
获取样式信息
|
||||
|
||||
Returns **MapboxVTLayerStyle** 样式
|
||||
|
||||
### on
|
||||
|
||||
图层级别监听鼠标事件
|
||||
获取当前图层中鼠标位置的要素
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `type` **String** 监听事件类型，目前支持 click、mousemove
|
||||
- `fn` **Function** 监听的回调函数，参数中的 features 是获取的鼠标位置的要素
|
||||
- `option` **Object** 拾取参数，featType：代表需要拾取的要素类型，参考 filterByRect() 函数中的 type；buffer：5, 代表以鼠标为中心点，范围为 5 的方形区域为鼠标拾取范围。值越大，拾取的范围越大，建议使用默认值。
|
||||
|
||||
### hide
|
||||
|
||||
设置图层隐藏
|
||||
|
||||
### hide
|
||||
|
||||
设置图层隐藏
|
||||
|
||||
### getOptions
|
||||
|
||||
获取图层参数信息
|
||||
|
||||
Returns **object** 图层参数信息
|
||||
|
||||
### getzIndex
|
||||
|
||||
获取图层层级
|
||||
|
||||
Returns **Number** zIndex 图层层级
|
||||
|
||||
### setzIndex
|
||||
|
||||
设置图层层级，数字越大图层层级越高
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `zIndex` **Number** 图层层级值
|
||||
|
||||
### getOpacity
|
||||
|
||||
获取图层透明度
|
||||
|
||||
Returns **Number** opacity 图层透明度
|
||||
|
||||
### setOpacity
|
||||
|
||||
设置图层透明度，范围 [0 ~ 1]
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `opacity` **Number** 图层透明度
|
||||
|
||||
### getZooms
|
||||
|
||||
获取该图层可显示的级别范围，默认取值范围为[2-20]
|
||||
|
||||
Returns **\[number, number]** 缩放范围
|
||||
|
||||
### setZooms
|
||||
|
||||
获取该图层可显示的级别范围
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `zooms` **\[number, number]** 缩放范围
|
||||
|
||||
### show
|
||||
|
||||
设置图层可见
|
||||
@@ -0,0 +1,634 @@
|
||||
## 地图
|
||||
|
||||
|
||||
|
||||
|
||||
## Map
|
||||
|
||||
地图对象类，封装了地图的属性设置、图层变更、事件交互等接口的类。</br>
|
||||
[相关示例][10]
|
||||
|
||||
### Parameters
|
||||
|
||||
- `div` **(String \| HTMLDivElement)** 构造一个地图对象，参数container中传入地图容器DIV的ID值或者DIV对象，
|
||||
opts地图初始化参数对象，参数详情参看MapOptions列表。注意：地图容器在创建之前必须拥有实际大小，否则可能出现底图无法渲染的问题。
|
||||
- `opts` **MapOptions** 地图初始化参数
|
||||
- `opts.center` **(\[Number, Number] | LngLat)** 初始中心经纬度
|
||||
- `opts.zoom` **Number** 地图显示的缩放级别，可以设置为浮点数；若center与level未赋值，地图初始化默认显示用户所在城市范围。
|
||||
- `opts.rotation` **Number** 地图顺时针旋转角度，取值范围 [0-360]，默认值：0 (optional, default `0`)
|
||||
- `opts.pitch` **Number** 俯仰角度，默认 0，最大值根据地图当前 zoom 级别不断增大，2D地图下无效 。 (optional, default `0`)
|
||||
- `opts.viewMode` **String** 地图视图模式, 默认为‘2D’，可选’3D’，选择‘3D’会显示 3D 地图效果。 (optional, default `'2D'`)
|
||||
- `opts.features` **Array<String>** 设置地图上显示的元素种类, 支持'bg'（地图背景）、'point'（POI点）、'road'（道路）、'building'（建筑物） (optional, default `['bg','point','road','building']`)
|
||||
- `opts.layers` **Array<Layer>** 地图图层数组，数组可以是图层 中的一个或多个，默认为普通二维地图。
|
||||
当叠加多个[图层][15]时，普通二维地图需通过实例化一个TileLayer类实现。
|
||||
如果你希望创建一个默认底图图层，使用 AMap.createDefaultLayer()
|
||||
- `opts.zooms` **\[Number, Number]** 地图显示的缩放级别范围, 默认为[2, 20]，取值范围[2 ~ 30] (optional, default `[2,20]`)
|
||||
- `opts.dragEnable` **Boolean** 地图是否可通过鼠标拖拽平移, 默认为 true。此属性可被 setStatus/getStatus 方法控制 (optional, default `true`)
|
||||
- `opts.zoomEnable` **Boolean** 地图是否可缩放，默认值为 true。此属性可被 setStatus/getStatus 方法控制 (optional, default `true`)
|
||||
- `opts.jogEnable` **Boolean** 地图是否使用缓动效果，默认值为true。此属性可被setStatus/getStatus 方法控制 (optional, default `true`)
|
||||
- `opts.pitchEnable` **Boolean** 是否允许设置俯仰角度, 3D 视图下为 true, 2D 视图下无效。 (optional, default `true`)
|
||||
- `opts.rotateEnable` **Boolean** 地图是否可旋转, 图默认为true (optional, default `true`)
|
||||
- `opts.animateEnable` **Boolean** 地图平移过程中是否使用动画（如调用panBy、panTo、setCenter、setZoomAndCenter等函数,
|
||||
将对地图产生平移操作, 是否使用动画平移的效果）, 默认为true, 即使用动画 (optional, default `true`)
|
||||
- `opts.keyboardEnable` **Boolean** 地图是否可通过键盘控制, 默认为true, 方向键控制地图平移，"+"和"-"可以控制地图的缩放,
|
||||
Ctrl+“→”顺时针旋转，Ctrl+“←”逆时针旋转。此属性可被setStatus/getStatus 方法控制 (optional, default `true`)
|
||||
- `opts.doubleClickZoom` **Boolean** 地图是否可通过双击鼠标放大地图, 默认为true。此属性可被setStatus/getStatus 方法控制 (optional, default `true`)
|
||||
- `opts.scrollWheel` **Boolean** 地图是否可通过鼠标滚轮缩放浏览，默认为true。此属性可被setStatus/getStatus 方法控制 (optional, default `true`)
|
||||
- `opts.touchZoom` **Boolean** 地图在移动终端上是否可通过多点触控缩放浏览地图，默认为true。关闭手势缩放地图，请设置为false。 (optional, default `true`)
|
||||
- `opts.touchZoomCenter` **Boolean** 可缺省，当touchZoomCenter=1的时候，手机端双指缩放的以地图中心为中心，否则默认以双指中间点为中心。 (optional, default `1`)
|
||||
- `opts.showLabel` **Boolean** 是否展示地图文字和 POI 信息。 (optional, default `true`)
|
||||
- `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** 是否展示地图 3D 楼块，默认 true (optional, default `true`)
|
||||
- `opts.showIndoorMap` **Boolean** 是否自动展示室内地图，默认是 false (optional, default `false`)
|
||||
- `opts.skyColor` **(String \| Array<Number>)** 天空颜色，3D 模式下带有俯仰角时会显示
|
||||
- `opts.labelRejectMask` **Boolean** 文字是否拒绝掩模图层进行掩模 (optional, default `false`)
|
||||
- `opts.mask` **Array<Number>** 为 Map 实例指定掩模的路径，各图层将只显示路径范围内图像，3D视图下有效。
|
||||
格式为一个经纬度的一维、二维或三维数组。 </br> [相关示例][16] </br>
|
||||
一维数组时代表一个普通多边形路径，如: </br>
|
||||
[lng1,lat1], [lng2,lat2], [lng3,lat3]]
|
||||
二维数组时代表一个带洞的多边形路径，如: </br>
|
||||
\[[lng4,lat4], [lng5,lat5], [lng6,lat6]],
|
||||
\[[lng7,lat7], [lng8,lat8], [lng9,lat9]]
|
||||
]
|
||||
三维数组时代表多个多边形路径，如: </br>
|
||||
\[
|
||||
\[[lng1,lat1], [lng2,lat2], [lng3,lat3]], // 一个普通多边形
|
||||
\[ //一个带洞多边形
|
||||
\[[lng4,lat4], [lng5,lat5], [lng6,lat6]],
|
||||
\[[lng7,lat7], [lng8,lat8], [lng9,lat9]]
|
||||
]
|
||||
]
|
||||
- `opts.WebGLParams` **any** 额外配置的WebGL参数 eg: preserveDrawingBuffer (optional, default `{}`)
|
||||
|
||||
### Examples
|
||||
|
||||
```javascript
|
||||
var map = new AMap.Map('map', {
|
||||
viewMode: '3D',
|
||||
center: [116.397083, 39.874531],
|
||||
layers: [AMap.createDefaultLayer()], // layers 字段为空或者不赋值将会自动创建默认底图。
|
||||
zoom: 12,
|
||||
})
|
||||
```
|
||||
|
||||
### resize
|
||||
|
||||
重新计算容器大小
|
||||
|
||||
### setCenter
|
||||
|
||||
设置中心点 </br>
|
||||
[相关示例][17]
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `center` **(\[number, number] | LngLat)** 中心点经纬度
|
||||
- `immediately` **Boolean** 是否立即过渡到目标位置 (optional, default `false`)
|
||||
- `duration` **Number?** 如果使用动画过度，动画过度的时长控制，单位 ms，默认值是内部自动计算的一个动态值。
|
||||
|
||||
### setZoomAndCenter
|
||||
|
||||
地图缩放至指定级别并以指定点为地图显示中心点 </br>
|
||||
[相关示例][18]
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `zoom` **Number** 缩放等级
|
||||
- `center` **(LngLat | \[number, number])** 地图中心点位置
|
||||
- `immediately` **Boolean** 是否立即过渡到目位置 (optional, default `false`)
|
||||
- `duration` **Number?** 如果使用动画过度，动画过度的时长控制，单位 ms，默认值是内部自动计算的一个动态值。
|
||||
|
||||
### getBounds
|
||||
|
||||
获取当前地图视图范围/可视区域。 </br>
|
||||
[相关示例][19]
|
||||
|
||||
Returns **Bounds** 边界经纬度
|
||||
|
||||
### getCenter
|
||||
|
||||
获取地图中心点经纬度坐标值。 </br>
|
||||
[相关示例][21]
|
||||
|
||||
Returns **LngLat** 地图中心点经纬度
|
||||
|
||||
### setZoom
|
||||
|
||||
设置地图显示的缩放级别，参数 zoom 可设范围：[2, 30]
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `zoom` **Number** 地图缩放等级
|
||||
- `immediately` **Boolean** 是否立即过渡到目标位置 (optional, default `false`)
|
||||
- `duration` **Number?** 如果使用动画过度，动画过度的时长控制，单位 ms，默认值是内部自动计算的一个动态值。
|
||||
|
||||
### getZoom
|
||||
|
||||
获取当前地图缩放级别, 默认取值范围为[2, 20]
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `digits` **Number** zoom级别的小数位精度，缺省为2
|
||||
|
||||
Returns **Number** 地图缩放等级
|
||||
|
||||
### zoomIn
|
||||
|
||||
地图放大一级显示
|
||||
|
||||
### zoomOut
|
||||
|
||||
地图缩小一级显示
|
||||
|
||||
### getPitch
|
||||
|
||||
获取地图当前俯仰角
|
||||
|
||||
Returns **Number** 角度
|
||||
|
||||
### setPitch
|
||||
|
||||
设置地图俯仰角
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `Pitch` **Number** 角度
|
||||
- `immediately` **Boolean** 是否立即过渡到目标位置 (optional, default `false`)
|
||||
- `duration` **Number?** 如果使用动画过度，动画过度的时长控制，单位 ms，默认值是内部自动计算的一个动态值。
|
||||
|
||||
### getRotation
|
||||
|
||||
获取地图顺时针旋转角度, 范围: [0 ~ 360]
|
||||
|
||||
Returns **Number** 旋转角度值
|
||||
|
||||
### setRotation
|
||||
|
||||
设置地图顺时针旋转角度, 旋转原点为地图容器中心点, 取值范围: 任意数字
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `rotation` **Number** 旋转角度
|
||||
- `immediately` **Boolean** 是否立即过渡到目标位置 (optional, default `false`)
|
||||
- `duration` **Number?** 动画过度的时长控制，单位 ms，默认值是内部自动计算的一个动态值。
|
||||
|
||||
### setBounds
|
||||
|
||||
指定当前地图显示范围，参数 bounds 为指定的范围
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `bounds` **(Array<number> | Bounds)** 经纬度范围
|
||||
- `immediately` **boolean** 立即缩放到指定位置 (optional, default `false`)
|
||||
- `avoid` **Array<number>** 距离边框的内边距，顺序：上、下、左、右 (optional, default `[0,0,0,0]`)
|
||||
|
||||
### panTo
|
||||
|
||||
地图中心点平移至指定点位置
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `lnglat` **(\[number, number] | LngLat)**
|
||||
- `duration` **Number?** 动画过度的时长控制，单位 ms，默认值是内部自动计算的一个动态值。
|
||||
|
||||
### getContainer
|
||||
|
||||
返回地图对象的容器
|
||||
|
||||
Returns **HTMLElement** 地图 DOM 容器
|
||||
|
||||
### getSize
|
||||
|
||||
获取地图容器尺寸，单位：像素
|
||||
|
||||
Returns **Size** 地图容器尺寸
|
||||
|
||||
### panBy
|
||||
|
||||
以像素为单位, 沿 x 方向和 y 方向移动地图, x 向右为正, y 向下为正
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `x` **Number** 横轴方向
|
||||
- `y` **Number** 纵轴方向
|
||||
- `duration` **Number?** 如果使用动画过度，动画过度的时长控制，单位 ms，默认值是内部自动计算的一个动态值。
|
||||
|
||||
### addLayer
|
||||
|
||||
添加图层到地图上
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `layer` **Layer** 地图图层对象
|
||||
|
||||
### removeLayer
|
||||
|
||||
从地图上移除图层
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `layer` **Layer** 地图图层
|
||||
|
||||
### setLayers
|
||||
|
||||
将多个图层一次替代地图上原有图层，会移除地图原有图层
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `layers` **Array<Layer>** 地图图层数组
|
||||
|
||||
### getLayers
|
||||
|
||||
获取地图图层数组，数组为一个或多个图层
|
||||
|
||||
Returns **Array<Layer>** 地图图层数组
|
||||
|
||||
### add
|
||||
|
||||
添加覆盖物/图层。参数为单个覆盖物/图层，或覆盖物/图层的数组。
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `features` **(VectorOverlay | Array<any>)** 覆盖物对象或者数组
|
||||
|
||||
### getStatus
|
||||
|
||||
获取当前地图状态信息，包括是否可鼠标拖拽移动地图、地图是否可缩放、地图是否可旋转（rotateEnable）、
|
||||
是否可双击放大地图、是否可以通过键盘控制地图旋转（keyboardEnable）等
|
||||
|
||||
Returns **object** 地图状态信息映射集合
|
||||
|
||||
### remove
|
||||
|
||||
删除覆盖物/图层。参数为单个覆盖物/图层，或覆盖物/图层的数组。
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `features` **(Overlay | Layer \| Array<(Overlay | Layer)>)** 覆盖物对象或者数组
|
||||
|
||||
### setStatus
|
||||
|
||||
设置当前地图显示状态，包括是否可鼠标拖拽移动地图、地图是否可缩放、地图是否可旋转（rotateEnable）、
|
||||
是否可双击放大地图、是否可以通过键盘控制地图旋转（keyboardEnable）等，
|
||||
[相关示例][24]
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `status` **object** 地图状态值映射集合
|
||||
|
||||
### lngLatToCoords
|
||||
|
||||
经纬度转莫卡托坐标（单位：米）
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `lnglat` **(\[number, number] | LngLat)** 经纬度
|
||||
|
||||
Returns **any** 莫卡托坐标（单位：米）
|
||||
|
||||
### coordsToLngLat
|
||||
|
||||
莫卡托坐标（单位：米）转经纬度
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `coords` **(\[number, number])** 莫卡托坐标（单位：米）
|
||||
|
||||
Returns **any** 经纬度
|
||||
|
||||
### lngLatToContainer
|
||||
|
||||
地图经纬度坐标转为地图容器像素坐标 </br>
|
||||
[相关示例][25]
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `lnglat` **(Array<number> | LngLat)** 经纬度
|
||||
|
||||
Returns **Pixel** 容器像素坐标
|
||||
|
||||
### getDefaultCursor
|
||||
|
||||
获取地图默认鼠标指针样式
|
||||
|
||||
Returns **string** 地图鼠标指针样式
|
||||
|
||||
### setDefaultCursor
|
||||
|
||||
设置地图默认鼠标指针样式
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `cursor` **string** 设置鼠标指针默认样式，参数cursor应符合CSS的cursor属性规范。可为CSS标注中的光标样式，
|
||||
如：setCursor(“pointer”)等；或者自定义的光标样式，
|
||||
如：setCursor("url('[https://lbs.amap.com/webapi/static/Images//0.png'][26]),pointer")
|
||||
|
||||
### containerToLngLat
|
||||
|
||||
地图容器坐标转换成经纬度 </br>
|
||||
[相关示例][25]
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `pixel` **(Array<number> | Pixel)** 容器像素坐标
|
||||
|
||||
Returns **LngLat** 转换成功的经纬度
|
||||
|
||||
### coordToContainer
|
||||
|
||||
莫卡托（单位：米）转成地图容器坐标
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `coord` **Array<Number>** 莫卡托坐标（单位：米）
|
||||
|
||||
Returns **Array<Number>** 容器像素坐标
|
||||
|
||||
### destroy
|
||||
|
||||
注销地图对象，并清空地图容器
|
||||
|
||||
### containerToCoord
|
||||
|
||||
地图容器坐标转成莫卡托（单位：米）
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `pixel` **(Array<Number> | Pixel)** 容器像素坐标
|
||||
|
||||
Returns **Array<Number>** 莫卡托坐标（单位：米）
|
||||
|
||||
### pixelToLngLat
|
||||
|
||||
平面地图像素坐标转换为地图经纬度坐标
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `pixel` **(Array<number> | Pixel)** 像素坐标
|
||||
- `zoom` **Number?** 某个地图级别
|
||||
|
||||
Returns **LngLat**
|
||||
|
||||
### getLimitBounds
|
||||
|
||||
获取Map的限制区域
|
||||
|
||||
### lngLatToPixel
|
||||
|
||||
经纬度坐标转换成平面地图像素坐标
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `lnglat` **(Array<number> | LngLat)** 经纬度
|
||||
- `zoom` **Number?** 某个地图级别，默认是地图当前级别
|
||||
|
||||
Returns **Pixel** 转换后的平面像素坐标
|
||||
|
||||
### setLimitBounds
|
||||
|
||||
设置 Map 的限制区域，设定区域限制后，传入参数为限制的 Bounds。地图仅在区域内可拖拽
|
||||
[相关示例][27]
|
||||
|
||||
### clearLimitBounds
|
||||
|
||||
清除 Map 的限制区域
|
||||
|
||||
### getZooms
|
||||
|
||||
获取地图缩放等级范围
|
||||
|
||||
Returns **\[number, number]** zooms
|
||||
|
||||
### setZooms
|
||||
|
||||
设置地图缩放等级范围
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `zooms` **\[number, number]**
|
||||
|
||||
### getResolution
|
||||
|
||||
获取指定位置的地图分辨率，单位：米/像素。
|
||||
参数point有指定值时，返回指定点地图分辨率，point缺省时，默认返回当前地图中心点位置的分辨率
|
||||
|
||||
Returns **Number** 分辨率
|
||||
|
||||
### getScale
|
||||
|
||||
获取当前地图比例尺。表示当前屏幕距离一米代表实际距离多少米
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `dpi` **Number**
|
||||
|
||||
Returns **Number** 比例尺的值
|
||||
|
||||
### getCity
|
||||
|
||||
获取地图中心点所在区域，回调函数返回对象属性分别对应为{省，市，区/县} </br>
|
||||
[相关示例][28]
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `getCityCallBack` **Function** 查询成功的回调函数
|
||||
- `lnglat` **Array<Number>** 查询的经纬度
|
||||
|
||||
### setCity
|
||||
|
||||
按照行政区名称或adcode来设置地图显示的中心点。 </br>
|
||||
行政区名称支持中国、省、市、区/县名称，如遇重名的情况，会按城市编码表顺序返回第一个。adcode请在城市编码表中查询。 </br>
|
||||
建议不要同时使用center/setCenter()和setCity()，如一起使用程序将以setCity()作为最后结果。 </br>
|
||||
[相关示例][29]
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `cityName` **String** 城市名称
|
||||
|
||||
### setFitView
|
||||
|
||||
根据地图上添加的覆盖物分布情况，自动缩放地图到合适的视野级别，参数均可缺省。</br>
|
||||
overlayList为覆盖物数组，缺省时为当前地图上添加的所有覆盖物图层，</br>
|
||||
immediately代表是否需要动画过程，avoid代表上下左右的像素避让宽度，maxZoom代表fitView之后的最大级 </br>
|
||||
[相关示例][30]
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `overlays` **Array<Overlay>** 覆盖物
|
||||
- `immediately` **Boolean** 是否立即过渡 (optional, default `false`)
|
||||
- `avoid` **Array<Number>** 四周边距，上、下、左、右 (optional, default `[60,60,60,60]`)
|
||||
- `maxZoom` **Number** 最大 zoom 级别 (optional, default `zooms[1]`)
|
||||
|
||||
#### Examples
|
||||
|
||||
```javascript
|
||||
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 级别
|
||||
);
|
||||
```
|
||||
|
||||
Returns **Bounds** bounds 新的地图视口范围
|
||||
|
||||
### getFitZoomAndCenterByOverlays
|
||||
|
||||
根据 overlays 计算出合适的中心点和 zoom 级别
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `overlays` **Array<Overlay>** 覆盖物
|
||||
- `avoid` **Array<Number>** 四周边距，上、下、左、右 (optional, default `[0,0,0,0]`)
|
||||
- `maxZoom` **Number** 最大 zoom 级别 (optional, default `CoreMap.defaultZooms[1]`)
|
||||
|
||||
Returns **\[number, LngLat]** zoom 级别和中心点经纬度
|
||||
|
||||
### getFitZoomAndCenterByBounds
|
||||
|
||||
根据 bounds 计算出合适的中心点和 zoom 级别
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `bounds` **(Array<number> | Bounds)** 需要计算的范围
|
||||
- `avoid` **Array<Number>** 四周边距，上、下、左、右 (optional, default `[0,0,0,0]`)
|
||||
- `maxZoom` **Number** 最大 zoom 级别 (optional, default `20`)
|
||||
|
||||
Returns **\[number, LngLat]** zoom 级别和中心点经纬度
|
||||
|
||||
### addControl
|
||||
|
||||
添加控件。参数可以是插件列表中的任何插件对象，如：ToolBar、OverView、Scale等 </br>
|
||||
[相关示例][31]
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `control` **Control** 控件对象
|
||||
|
||||
### removeControl
|
||||
|
||||
移除地图上的指定控件 </br>
|
||||
[相关示例][31]
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `control` **Control** 控件对象
|
||||
|
||||
### setMapStyle
|
||||
|
||||
设置地图的显示样式，目前支持两种地图样式： </br>
|
||||
第一种：自定义地图样式，如 "amap://styles/d6bf8c1d69cea9f5c696185ad4ac4c86" </br>
|
||||
可前往地图自定义平台定制自己的个性地图样式； </br>
|
||||
第二种：官方样式模版,如 "amap://styles/grey"。 </br>
|
||||
其他模版样式及自定义地图的使用说明见 [开发指南][33] </br>
|
||||
[相关示例][34] </br>
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `value` **String**
|
||||
|
||||
### getMapStyle
|
||||
|
||||
获取地图显示样式
|
||||
|
||||
### getAllOverlays
|
||||
|
||||
返回添加的覆盖物对象，可选类型包括marker、circle、polyline、polygon； </br>
|
||||
Type可缺省，缺省时返回所有覆盖物（marker、circle、polyline、polygon）。 </br>
|
||||
返回结果不包含官方覆盖物等，比如定位marker，周边搜索圆等 </br>
|
||||
[相关示例][35]
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `type` **String?** 可选，覆盖物类型
|
||||
|
||||
Returns **Array<Overlay>** 覆盖物数组
|
||||
|
||||
### clearMap
|
||||
|
||||
删除地图上所有的覆盖物
|
||||
|
||||
### clearInfoWindow
|
||||
|
||||
清除地图上的信息窗体。
|
||||
|
||||
### getFeatures
|
||||
|
||||
获取地图显示元素种类
|
||||
|
||||
Returns **Array<String>** 返回 features 的集合，可能有 bg（地图背景）、point（兴趣点）、
|
||||
road（道路）、building（建筑物）
|
||||
|
||||
### setFeatures
|
||||
|
||||
设置地图上显示的元素种类，支持bg（地图背景）、point（兴趣点）、 </br>
|
||||
road（道路）、building（建筑物） </br>
|
||||
[相关示例][36]
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `features` **Array<string>** 类型数组
|
||||
|
||||
#### Examples
|
||||
|
||||
```javascript
|
||||
map.setFeatures(['bg', 'road']);
|
||||
```
|
||||
|
||||
### setMask
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `maskPath` **Array<Array<number>>** 掩模范围
|
||||
- `maskPath` **Array<Number>** 掩模范围
|
||||
|
||||
### setLabelRejectMask
|
||||
|
||||
设置文字是否拒绝掩模，true：不进行掩模，false：掩模
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `reject` **boolean** 是否拒绝掩模
|
||||
|
||||
### customCoords
|
||||
|
||||
### mapStyle
|
||||
|
||||
获取审图号
|
||||
|
||||
## MapsEvent
|
||||
|
||||
此对象用于表示地图、覆盖物、叠加层上的各种鼠标事件返回，包含以下字段：
|
||||
|
||||
Type: Object
|
||||
|
||||
### Properties
|
||||
|
||||
- `lnglat` **LngLat** 发生事件时光标所在处的经纬度坐标。
|
||||
- `pixel` **Pixel** 发生事件时光标所在处的像素坐标。
|
||||
- `type` **string** 事件类型。
|
||||
- `target` **Object** 发生事件的目标对象，不同类型返回target不同。例如，事件对象是Marker，则target表示目标对象为Marker，事件对象是其他，则随之改变。
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,220 @@
|
||||
## 群组
|
||||
|
||||
用于批量操作图层和覆盖物的群组类型，可以简化代码书写
|
||||
|
||||
|
||||
## LayerGroup
|
||||
|
||||
LayerGroup类用来包装其它图层类的实例， 对实例集合做批量操作， 避免开发者对多个需要设置同样属性的图层实例做循环处理。</br>
|
||||
同时只要对LayerGroup执行过setMap方法后， 新添加到该LayerGroup中的图层会自动将其map属性修改到该group对应的map，</br>
|
||||
此外从group中移除该图层时，也会将该图层从group对应的map中移除。</br>
|
||||
如果对图层集合添加对某个事件的监听或解除监听， 图层集合会对集合中所有图层实例做集合处理， </br>
|
||||
只要该图层支持此事件， 该事件绑定/解除即对图层生效
|
||||
[相关示例][86]
|
||||
|
||||
### Parameters
|
||||
|
||||
- `layers` **Array<Layer>** 图层数组
|
||||
|
||||
### setMap
|
||||
|
||||
添加到地图上面
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `map` **Map** 地图对象
|
||||
|
||||
Returns **any**
|
||||
|
||||
### hasLayer
|
||||
|
||||
判断传入的图层实例是否在集合中
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `layer` **Layer**
|
||||
|
||||
### setOptions
|
||||
|
||||
修改图层属性(包括线样式、样色等等)
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `opts` **LayerOptions** 参数
|
||||
- `opts.visible` **Boolean** 是否可见
|
||||
- `opts.opacity` **Number** 透明度
|
||||
- `opts.zIndex` **Number** 层级
|
||||
- `opts.zooms` **Array<Number>** 集合可见范围
|
||||
|
||||
Returns **any**
|
||||
|
||||
### eachLayer
|
||||
|
||||
对集合中的图层做迭代操作，其中iterator的函数定义是：</br>
|
||||
function(layer, index, collections)，相关含义如下：</br>
|
||||
layer: 当前迭代到的图层 </br>
|
||||
index: 该图层在集合中的序列号(从0开始) </br>
|
||||
collections: 所有图层实例 </br>
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `iterator` **Function**
|
||||
|
||||
### addLayer
|
||||
|
||||
添加单个图层到集合中，不支持添加重复的图层
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `layer` **Layer** 图层对象
|
||||
|
||||
### addLayers
|
||||
|
||||
添加图层数组到集合中，不支持添加重复的图层
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `layers` **Array<Layer>** 图层数组
|
||||
|
||||
### removeLayer
|
||||
|
||||
从集合中删除传入的图层实例
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `layer` **Layer** 图层对象
|
||||
|
||||
### removeLayers
|
||||
|
||||
从集合中删除传入的图层实例数组
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `layers` **Array<Layer>** 图层数组
|
||||
|
||||
### getLayers
|
||||
|
||||
获取组里所有对象，包括图层和覆盖物
|
||||
|
||||
Returns **Array<Layers>**
|
||||
|
||||
### clearLayers
|
||||
|
||||
清空图层
|
||||
|
||||
### hide
|
||||
|
||||
设置图层隐藏
|
||||
|
||||
### show
|
||||
|
||||
设置图层可见
|
||||
|
||||
### on
|
||||
|
||||
事件批量绑定
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `type` **String** 事件名称, 比如: click、mouseover
|
||||
- `事件回调函数` **Function**
|
||||
|
||||
### reload
|
||||
|
||||
重新加载图层资源，重新渲染
|
||||
|
||||
Returns **any**
|
||||
|
||||
## OverlayGroup
|
||||
|
||||
OverlayGroup 类用来包装其它覆盖物类的实例，对实例集合做整体操作，避免开发者对多个需要设置同样属性的覆盖物实例做循环处理。
|
||||
此外从group中移除该覆盖物时，也会将该覆盖物从group对应的map中移除。
|
||||
目前OverlayGroup支持Marker, Polygon, Polyline, Circle,CircleMarker, Rectangle, Ellipse 和 BezierCurve。
|
||||
|
||||
### Parameters
|
||||
|
||||
- `overlays` **Array<Overlay>**
|
||||
|
||||
### addOverlay
|
||||
|
||||
添加单个覆盖物到集合中，不支持添加重复的覆盖物
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `overlay` **Overlay**
|
||||
|
||||
### type
|
||||
|
||||
### className
|
||||
|
||||
### addOverlays
|
||||
|
||||
添加覆盖物数组到集合中，不支持添加重复的覆盖物
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `overlays` **Array<Overlay>**
|
||||
|
||||
### getOverlays
|
||||
|
||||
返回当前集合中所有的覆盖物
|
||||
|
||||
Returns **Array**
|
||||
|
||||
### hasOverlay
|
||||
|
||||
判断传入的覆盖物实例是否在集合中
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `overlay` **Overlay**
|
||||
|
||||
Returns **boolean**
|
||||
|
||||
### removeOverlay
|
||||
|
||||
从集合中删除传入的覆盖物实例
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `overlay` **Overlay**
|
||||
|
||||
### removeOverlays
|
||||
|
||||
从集合中删除传入的覆盖物实例数组
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `overlays` **Array**
|
||||
|
||||
### clearOverlays
|
||||
|
||||
清空集合
|
||||
|
||||
### eachOverlay
|
||||
|
||||
对集合中的覆盖物做迭代操作，其中iterator的函数定义是：
|
||||
function(overlay, index, collections)，相关含义如下：
|
||||
overlay: 当前迭代到的覆盖物
|
||||
index: 该覆盖物在集合中的序列号(从0开始)
|
||||
collections: 所有覆盖物实例
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `iterator` **Function**
|
||||
|
||||
### show
|
||||
|
||||
在地图上显示集合中覆盖物
|
||||
|
||||
### hide
|
||||
|
||||
在地图上隐藏集合中覆盖物
|
||||
|
||||
### setOptions
|
||||
|
||||
修改覆盖物属性(包括线样式、样色等等)
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `opt` **Object**
|
||||
@@ -0,0 +1,844 @@
|
||||
## 路线规划
|
||||
|
||||
用于驾车、货车、骑行、步行、公交等的路线规划查询
|
||||
|
||||
|
||||
## Driving
|
||||
|
||||
驾车路线规划服务，提供起、终点坐标的驾车导航路线[查询功能][109]。AMap. Driving构造函数的参数为 DrivingOptions 对象。DrivingOptions 允许设置驾车策略和返回信息详略。用户可以通过自定义回调函数取回并显示查询结果。若服务请求失败，系统将返回错误信息
|
||||
|
||||
### Parameters
|
||||
|
||||
- `opts` **DrivingOptions** 参数信息
|
||||
- `opts.map` **Map** AMap.Map对象, 展现结果的地图实例。当指定此参数后，搜索结果的标注、线路等均会自动添加到此地图上。可选
|
||||
- `opts.policy` **number?** [驾车路线规划策略][110]
|
||||
- `opts.extensions` **string** 默认值：base，返回基本地址信息\\n当取值为：all，返回DriveStep基本信息+DriveStep详细信息 (optional, default `'base'`)
|
||||
- `opts.ferry` **number** 默认为0，表示可以使用轮渡，为1的时候表示不可以使用轮渡 (optional, default `0`)
|
||||
- `opts.panel` **(string \| HTMLElement)?** 结果列表的HTML容器id或容器元素，提供此参数后，结果列表将在此容器中进行展示。可选
|
||||
- `opts.hideMarkers` **boolean** 设置隐藏路径规划的起始点图标
|
||||
设置为true：隐藏图标；设置false：显示图标\\n默认值为：false (optional, default `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?** 用于控制在路径规划结束后，是否自动调整地图视野使绘制的路线处于视口的可见范围
|
||||
|
||||
### Examples
|
||||
|
||||
```javascript
|
||||
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));
|
||||
});
|
||||
```
|
||||
|
||||
### search
|
||||
|
||||
根据起点、终点和途经点（可选）坐标或名称，实现驾车路线规划，途经点通过opts设定
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `origin` **LngLat** 起点经纬度
|
||||
- `destination` **LngLat** 终点经纬度
|
||||
- `opts` **Object**
|
||||
- `opts.waypoints` **Array<LngLat>** 途径点,最多支持16个
|
||||
- `callback` **DrivingCallback** status为complete时，result为DrivingResult；当status为error时，result为错误信息info；当status为no_data时，代表检索返回0结果。
|
||||
|
||||
### search
|
||||
|
||||
根据起点、终点和途经点（可选）坐标或名称，实现驾车路线规划，途经点通过opts设定
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `points` **Array<Object>** 终点经纬度points为起点、终点和途经点（可选）名称及对应城市的数组，例如：
|
||||
[{keyword:‘北京南站’,city:‘北京市’},{keyword:‘广东大厦’,city:’北京市’},{ keyword:‘北京西站’,city:‘北京市’}]
|
||||
系统取数组第一个元素和最后一个元素作为起点和终点，中间元素为途经点；
|
||||
- `callback` **DrivingCallback** status为complete时，result为DrivingResult；当status为error时，result为错误信息info；当status为no_data时，代表检索返回0结果。
|
||||
|
||||
### clear
|
||||
|
||||
清除搜索结果
|
||||
|
||||
### setAvoidPolygons
|
||||
|
||||
设置避让区域，最大支持三个避让区域，参数为LngLat的二维数组
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `areas` **Array<Array<LngLatLike>>**
|
||||
|
||||
### clearAvoidPolygons
|
||||
|
||||
清除避让区域
|
||||
|
||||
### getAvoidPolygons
|
||||
|
||||
获取避让区域，返回LngLat的二维数组
|
||||
|
||||
Returns **Array<Array<LngLat>>** 避让区域
|
||||
|
||||
### setAvoidRoad
|
||||
|
||||
设置避让道路名称，只支持一条避让道路
|
||||
注：避让道路和避让区域不能同时使用
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `value` **string**
|
||||
|
||||
### clearAvoidRoad
|
||||
|
||||
清除避让道路
|
||||
|
||||
### getAvoidRoad
|
||||
|
||||
获取避让道路
|
||||
|
||||
Returns **string**
|
||||
|
||||
### setProvinceAndNumber
|
||||
|
||||
设置车牌的汉字首字符和首字后的号码，设置后路线规划的结果将考虑该车牌在当前时间的限行路段
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `province` **string**
|
||||
- `number` **string**
|
||||
|
||||
### setPolicy
|
||||
|
||||
设置驾车路线规划策略
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `policy` **Object** 驾车路线规划策略
|
||||
|
||||
## DrivingCallback
|
||||
|
||||
Driving.search 的回调函数
|
||||
|
||||
Type: Function
|
||||
|
||||
### Parameters
|
||||
|
||||
- `status` **string** status为complete时，result为DrivingResult；当status为error时，result为错误信息info；当status为no_data时，代表检索返回0结果
|
||||
- `result` **(info | DrivingResult)**
|
||||
|
||||
## DrivingResult
|
||||
|
||||
DrivingResult 对象
|
||||
|
||||
Type: Object
|
||||
|
||||
### Properties
|
||||
|
||||
- `info` **string** 成功状态说明
|
||||
- `origin` **LngLat** 驾车规划起点坐标
|
||||
- `destination` **LngLat** 驾车规划终点坐标
|
||||
- `start` **Poi** 驾车规划起点
|
||||
- `end` **Poi** 驾车规划终点
|
||||
- `waypoints` **Poi** 驾车规划途经点
|
||||
- `taxi_cost` **number** 打车费用，仅extensions为“all”时返回. 单位: 元
|
||||
- `routes` **Array<DriveRoute>** 驾车规划路线列表
|
||||
- `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 代表限行无法规避，即该线路有限行路段
|
||||
- `steps` **Array<(DriveStepBasic \| DriveStepDetail)>** 子路段DriveStep集合
|
||||
|
||||
## DriveStepBasic
|
||||
|
||||
DriveStep 对象(基本信息)
|
||||
|
||||
Type: Object
|
||||
|
||||
### Properties
|
||||
|
||||
- `start_location` **LngLat** 此路段起点
|
||||
- `end_location` **LngLat** 此路段终点
|
||||
- `instruction` **string** 此路段说明，如“沿北京南站路行驶565米右转”
|
||||
- `action` **string** 本驾车子路段完成后动作
|
||||
- `assist_action` **string** 驾车子路段完成后辅助动作，一般为到达某个目的地时返回
|
||||
- `orientation` **string** 驾车方向
|
||||
- `road` **string** 驾车方向
|
||||
- `distance` **number** 此路段距离，单位：米
|
||||
- `tolls` **number** 此段收费，单位：元
|
||||
- `tolls_distance` **number** 收费路段长度，单位：米
|
||||
- `toll_road` **string** 主要收费道路
|
||||
- `time` **number** 此路段预计使用时间，单位：秒
|
||||
- `path` **Array<LngLat>** 此路段坐标集合
|
||||
|
||||
## DriveStepDetail
|
||||
|
||||
DriveStep 对象(详细信息)
|
||||
|
||||
Type: Object
|
||||
|
||||
### Properties
|
||||
|
||||
- `cities` **Array<ViaCity>** 途径城市列表
|
||||
- `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** 区域编码
|
||||
- `tmcs` **Array<TMC>** 实时交通信息列表
|
||||
- `tmcs.tmc` **TMC** 实时交通信息列表元素
|
||||
- `tmcs.tmc.lcode` **string** 路况信息对应的编码
|
||||
如果direction是正向 lcode返回值大于0；否则lcode，返回值小于0；
|
||||
如果返回0则说明此路段无lcode
|
||||
- `tmcs.tmc.distance` **number** 此lcode对应的路段长度，单位: 米
|
||||
- `tmcs.tmc.status` **string** 路况状态，可能的值有：未知，畅通，缓行，拥堵
|
||||
|
||||
## TruckDriving
|
||||
|
||||
驾车路线规划服务，提供起、终点坐标的驾车导航路线[查询功能][115]。AMap. Driving构造函数的参数为 DrivingOptions 对象。DrivingOptions 允许设置驾车策略和返回信息详略。用户可以通过自定义回调函数取回并显示查询结果。若服务请求失败，系统将返回[错误信息][116]
|
||||
|
||||
### Parameters
|
||||
|
||||
- `opts` **TruckDrivingOptions** 参数信息
|
||||
- `opts.map` **Map** AMap.Map对象, 展现结果的地图实例。当指定此参数后，搜索结果的标注、线路等均会自动添加到此地图上。可选
|
||||
- `opts.policy` **number?** [货车路线规划策略strategy][117]
|
||||
- `opts.size` **number** 车型大小，必填，1-4分别对应小型至大型
|
||||
- `opts.width` **number** 宽度，缺省2.5米 (optional, default `2.5`)
|
||||
- `opts.height` **number** 高度,缺省1.6米 (optional, default `1.6`)
|
||||
- `opts.load` **number** 载重,缺省0.9t (optional, default `0.9`)
|
||||
- `opts.weight` **number** 自重，缺省10t (optional, default `10`)
|
||||
- `opts.axlesNum` **number** 轴数，缺省2轴 (optional, default `2`)
|
||||
- `opts.extensions` **string** 默认值：base，返回基本地址信息\\n当取值为：all，返回DriveStep基本信息+DriveStep详细信息 (optional, default `'base'`)
|
||||
- `opts.panel` **(string \| HTMLElement)?** 结果列表的HTML容器id或容器元素，提供此参数后，结果列表将在此容器中进行展示。可选
|
||||
- `opts.hideMarkers` **boolean** 设置隐藏路径规划的起始点图标
|
||||
设置为true：隐藏图标；设置false：显示图标\\n默认值为：false (optional, default `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?** 用于控制在路径规划结束后，是否自动调整地图视野使绘制的路线处于视口的可见范围
|
||||
|
||||
### Examples
|
||||
|
||||
```javascript
|
||||
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));
|
||||
});
|
||||
```
|
||||
|
||||
```javascript
|
||||
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));
|
||||
});
|
||||
```
|
||||
|
||||
### clear
|
||||
|
||||
清除搜索结果
|
||||
|
||||
### search
|
||||
|
||||
根据起点、终点和途经点（可选）坐标或名称，实现驾车路线规划，途经点通过opts设定
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `locations` **Array<Truck~Location>** 途经点列表
|
||||
- `locations.location` **Truck~Location** 某一个途经点
|
||||
- `locations.location.lnglat` **\[number, number]** 经纬度
|
||||
- `locations.location.pid` **string** POI ID,可缺省
|
||||
- `locations.location.type` **string** POI类型，可缺省
|
||||
- `callback` **DrivingCallback** status为complete时，result为TruckResult；当status为error时，result为错误信息info；当status为no_data时，代表检索返回0结果。
|
||||
|
||||
### search
|
||||
|
||||
根据起点、终点和途经点（可选）坐标或名称，实现驾车路线规划，途经点通过opts设定
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `points` **Array<Truck~Path>** 途经点列表 例如 : [{keyword:'北京站',city:'010'},//起点
|
||||
{keyword:'北京西站',city:'010'},//途径
|
||||
{keyword:'北京大学',city:'010'}//终点
|
||||
]
|
||||
- `points.point` **Truck~Path** 某个途经点
|
||||
- `points.point.keyworkd` **string** 关键字
|
||||
- `points.point.city` **string** 城市code
|
||||
- `callback` **DrivingCallback** status为complete时，result为TruckResult；当status为error时，result为错误信息info；当status为no_data时，代表检索返回0结果。
|
||||
|
||||
### setProvinceAndNumber
|
||||
|
||||
修改车牌号
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `province` **string**
|
||||
- `number` **number**
|
||||
|
||||
### setPolicy
|
||||
|
||||
设置驾车路线规划策略,参考opts.policy
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `policy` **Object** 驾车路线规划策略，参考opts.policy
|
||||
|
||||
## Walking
|
||||
|
||||
步行路线规划服务，提供起、终点坐标的驾车导航路线[查询功能][119]。AMap. Driving构造函数的参数为 DrivingOptions 对象。DrivingOptions 允许设置驾车策略和返回信息详略。用户可以通过自定义回调函数取回并显示查询结果。若服务请求失败，系统将返回[错误信息][116]
|
||||
|
||||
### Parameters
|
||||
|
||||
- `opts` **WalkingOptions** 参数信息
|
||||
- `opts.map` **Map** AMap.Map对象, 展现结果的地图实例。当指定此参数后，搜索结果的标注、线路等均会自动添加到此地图上。可选
|
||||
- `opts.panel` **(string \| HTMLElement)?** 结果列表的HTML容器id或容器元素，提供此参数后，结果列表将在此容器中进行展示。可选
|
||||
- `opts.hideMarkers` **boolean** 设置隐藏路径规划的起始点图标
|
||||
设置为true：隐藏图标；设置false：显示图标\\n默认值为：false
|
||||
显示绿色代表畅通，黄色代表轻微拥堵，红色代表比较拥堵，灰色表示无路况信息。 (optional, default `false`)
|
||||
- `opts.isOutline` **boolean?** 使用map属性时，绘制的规划线路是否显示描边。缺省为true
|
||||
- `opts.outlineColor` **string?** 使用map属性时，绘制的规划线路的描边颜色。缺省为'white'
|
||||
- `opts.autoFitView` **boolean?** 用于控制在路径规划结束后，是否自动调整地图视野使绘制的路线处于视口的可见范围
|
||||
|
||||
### Examples
|
||||
|
||||
```javascript
|
||||
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));
|
||||
});
|
||||
```
|
||||
|
||||
```javascript
|
||||
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));
|
||||
});
|
||||
```
|
||||
|
||||
### clear
|
||||
|
||||
清除搜索的结果
|
||||
|
||||
### search
|
||||
|
||||
根据起点、终点坐标，实现步行路线规划
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `origin` **LngLat** 起点经纬度
|
||||
- `destination` **LngLat** 终点经纬度
|
||||
- `callback` **WalkingCallback** status为complete时，result为 WalkingResult；当status为error时，result为错误信息info；当status为no_data时，代表检索返回0结果。
|
||||
|
||||
### search
|
||||
|
||||
根据起点、终点名称，实现步行路线规划
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `points` **Array<Object>** 终点经纬度points为起点、终点和途经点（可选）名称及对应城市的数组，例如：
|
||||
[{keyword:‘方恒国际中心A座’},{keyword:‘望京站’}]
|
||||
系统取数组第一个元素和最后一个元素作为起点和终点，中间元素为途经点；
|
||||
- `callback` **WalkingCallback** status为complete时，result为 WalkingResult；当status为error时，result为错误信息info；当status为no_data时，代表检索返回0结果。
|
||||
|
||||
## WalkingCallback
|
||||
|
||||
Walking.search 的回调函数
|
||||
|
||||
Type: Function
|
||||
|
||||
### Parameters
|
||||
|
||||
- `status` **string** status为complete时，result为 WalkingResult；当status为error时，result为错误信息info；当status为no_data时，代表检索返回0结果
|
||||
- `result` **(info | WalkingResult)**
|
||||
|
||||
## WalkingResult
|
||||
|
||||
WalkingResult 对象
|
||||
|
||||
Type: Object
|
||||
|
||||
### Properties
|
||||
|
||||
- `info` **string** 成功状态说明
|
||||
- `origin` **LngLat** 步行规划起点坐标
|
||||
- `destination` **LngLat** 步行规划终点坐标
|
||||
- `start` **Poi** 步行规划起点
|
||||
- `end` **Poi** 步行规划终点
|
||||
- `count` **number** 步行导航路段数目
|
||||
- `routes` **Array<WalkRoute>** 步行规划路线列表
|
||||
- `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** 步行子路段完成后辅助动作，一般为到达某个公交站点或目的地时返回
|
||||
|
||||
## Transfer
|
||||
|
||||
公交换乘服务，提供起始点公交路线规划服务，目前公交换乘仅支持同一城市的公交路线规划，跨城市出行规划请参考驾车导航查询。公交换乘查询返回结果整合步行信息，若换乘路段（Segment）换乘类型为地铁 “SUBWAY”，则至少包含一条地铁口信息（SubwayEntrance）。用户可以通过自定义回调函数取回并显示查询结果。若服务请求失败，系统将返回错误信息。
|
||||
|
||||
### Parameters
|
||||
|
||||
- `opts` **DrivingOptions** 参数信息
|
||||
- `opts.map` **Map** AMap.Map对象, 展现结果的地图实例。当指定此参数后，搜索结果的标注、线路等均会自动添加到此地图上。可选
|
||||
- `opts.city` **string** 公交换乘的城市，支持城市名称、城市区号、电话区号，此项为必填
|
||||
- `opts.policy` **number** [公交换乘策略strategy][122]
|
||||
- `opts.nightflag` **boolean** 是否计算夜班车，默认为不计算。true：计算，false：不计算 (optional, default `false`)
|
||||
- `opts.extensions` **string** 默认值：base，返回基本地址信息\\n当取值为：all，返回DriveStep基本信息+DriveStep详细信息 (optional, default `'base'`)
|
||||
- `opts.panel` **(string \| HTMLElement)?** 结果列表的HTML容器id或容器元素，提供此参数后，结果列表将在此容器中进行展示。可选
|
||||
- `opts.hideMarkers` **boolean** 设置隐藏路径规划的起始点图标
|
||||
设置为true：隐藏图标；设置false：显示图标\\n默认值为：false (optional, default `false`)
|
||||
- `opts.isOutline` **boolean?** 使用map属性时，绘制的规划线路是否显示描边。缺省为true
|
||||
- `opts.outlineColor` **string?** 使用map属性时，绘制的规划线路的描边颜色。缺省为'white'
|
||||
- `opts.autoFitView` **boolean?** 用于控制在路径规划结束后，是否自动调整地图视野使绘制的路线处于视口的可见范围
|
||||
|
||||
### Examples
|
||||
|
||||
```javascript
|
||||
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));
|
||||
});
|
||||
```
|
||||
|
||||
### search
|
||||
|
||||
根据起点和终点坐标，进行公交换乘查询
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `origin` **LngLat** 起点经纬度
|
||||
- `destination` **LngLat** 终点经纬度
|
||||
- `callback` **TransferCallback** status为complete时，result为DrivingResult；当status为error时，result为错误信息info；当status为no_data时，代表检索返回0结果。
|
||||
|
||||
### search
|
||||
|
||||
根据起点和终点坐标，进行公交换乘查询
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `points` **Array<Object>** 当根据起、终点名称查询时，point为包含起点、终点的数组，例：
|
||||
[{keyword:‘北京南站’},{keyword:‘北京西站’}]
|
||||
当数组超过两个元素时，取前两个元素为起点、终点，其余元素忽略
|
||||
- `callback` **TransferCallback** status为complete时，result为DrivingResult；当status为error时，result为错误信息info；当status为no_data时，代表检索返回0结果。
|
||||
|
||||
### leaveAt
|
||||
|
||||
设置公交路径规划出发时间
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `time` **string**
|
||||
- `date` **string**
|
||||
|
||||
### clear
|
||||
|
||||
清除结果显示
|
||||
|
||||
### setPolicy
|
||||
|
||||
设置公交换乘策略
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `policy` **TransferPolicy** 公交换乘策略
|
||||
|
||||
### setCity
|
||||
|
||||
设置公交换乘查询的城市
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `city` **String** 城市
|
||||
|
||||
### setCityd
|
||||
|
||||
设置公交换乘查询的目的地城市
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `cityd` **String** 城市
|
||||
|
||||
## TransferCallback
|
||||
|
||||
Transfer.search 的回调函数 [相关示例][124]
|
||||
|
||||
Type: Function
|
||||
|
||||
### Parameters
|
||||
|
||||
- `status` **string** 当status为complete时，result为TransferResult；
|
||||
当status为error时，result为错误信息info；
|
||||
当status为no_data时，代表检索返回0结果
|
||||
- `result` **(info | TransferResult)**
|
||||
|
||||
## TransferResult
|
||||
|
||||
TransferResult 对象 [详细文档][122],查阅rest接口 '返回结果参数说明'
|
||||
|
||||
Type: Object
|
||||
|
||||
## Riding
|
||||
|
||||
骑行路线规划服务，提供起、终点坐标的驾车导航路线[查询功能][119]。AMap. Driving构造函数的参数为 DrivingOptions 对象。DrivingOptions 允许设置驾车策略和返回信息详略。用户可以通过自定义回调函数取回并显示查询结果。若服务请求失败，系统将返回[错误信息][116]
|
||||
|
||||
### Parameters
|
||||
|
||||
- `opts` **RidingOptions** 参数信息
|
||||
- `opts.map` **Map** AMap.Map对象, 展现结果的地图实例。当指定此参数后，搜索结果的标注、线路等均会自动添加到此地图上。可选
|
||||
- `opts.policy` **number** 骑行路线规划策略；默认值：0可选值为：
|
||||
0：推荐路线及最快路线综合
|
||||
1：推荐路线
|
||||
2：最快路线 (optional, default `0`)
|
||||
- `opts.panel` **(string \| HTMLElement)?** 结果列表的HTML容器id或容器元素，提供此参数后，结果列表将在此容器中进行展示。可选
|
||||
- `opts.hideMarkers` **boolean** 设置隐藏路径规划的起始点图标
|
||||
设置为true：隐藏图标；设置false：显示图标\\n默认值为：false
|
||||
显示绿色代表畅通，黄色代表轻微拥堵，红色代表比较拥堵，灰色表示无路况信息。 (optional, default `false`)
|
||||
- `opts.isOutline` **boolean?** 使用map属性时，绘制的规划线路是否显示描边。缺省为true
|
||||
- `opts.outlineColor` **string?** 使用map属性时，绘制的规划线路的描边颜色。缺省为'white'
|
||||
- `opts.autoFitView` **boolean?** 用于控制在路径规划结束后，是否自动调整地图视野使绘制的路线处于视口的可见范围
|
||||
|
||||
### Examples
|
||||
|
||||
```javascript
|
||||
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));
|
||||
});
|
||||
```
|
||||
|
||||
### clear
|
||||
|
||||
清除搜索的结果
|
||||
|
||||
### setPolicy
|
||||
|
||||
骑行路线规划策略
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `policy` **number** 可选值为：
|
||||
0：推荐路线及最快路线综合
|
||||
1：推荐路线
|
||||
2：最快路线
|
||||
|
||||
### search
|
||||
|
||||
根据起点、终点坐标，实现骑行路线规划
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `origin` **LngLat** 起点经纬度
|
||||
- `destination` **LngLat** 终点经纬度
|
||||
- `callback` **RidingCallback** status为complete时，result为 RidingResult；当status为error时，result为错误信息info；当status为no_data时，代表检索返回0结果。
|
||||
|
||||
### search
|
||||
|
||||
根据起点、终点名称，实现骑行路线规划
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `points` **Array<Object>** 包含起点、终点的数组，例：[{keyword:‘方恒国际中心A座’},{keyword:‘望京站’}]
|
||||
当数组超过两个元素时，取前两个元素为起点、终点，其余元素忽略；
|
||||
- `callback` **RidingCallback** status为complete时，result为 RidingResult；当status为error时，result为错误信息info；当status为no_data时，代表检索返回0结果。
|
||||
|
||||
## RidingCallback
|
||||
|
||||
Riding.search 的回调函数
|
||||
|
||||
Type: Function
|
||||
|
||||
### Parameters
|
||||
|
||||
- `status` **string** status为complete时，result为 RidingResult；当status为error时，result为错误信息info；当status为no_data时，代表检索返回0结果
|
||||
- `result` **(info | RidingResult)**
|
||||
|
||||
## RidingResult
|
||||
|
||||
RidingResult [详细文档][128],查阅rest接口'返回结果参数说明'
|
||||
|
||||
Type: Object
|
||||
|
||||
## DragRoute
|
||||
|
||||
### Parameters
|
||||
|
||||
- `map` **Map** 指定的地图对象
|
||||
- `path` **Array<LngLat>** 导航的起点、途经点、终点的经纬度坐标数组
|
||||
- `policy` **String** [指定驾车策略][110]
|
||||
- `opts` **DragRouteOptions** 配置项
|
||||
- `opts.polyOption` **PolylineOptions?** 设置拖拽路线插件的路线属性对象，包括线样式、宽度、颜色等，参考PolylineOptions列表
|
||||
- `opts.startMarkerOptions` **MarkerOptions?** 设置拖拽路线插件起点点标记属性对象，包括点标记样式、大小等，参考MarkerOptions列表
|
||||
- `opts.midMarkerOptions` **MarkerOptions?** 设置拖拽路线插件途经点点标记属性对象，包括点标记样式、大小等，参考MarkerOptions列表
|
||||
- `opts.endMarkerOptions` **MarkerOptions?** 设置拖拽路线插件终点点标记属性对象，包括点标记样式、大小等，参考MarkerOptions列表
|
||||
- `opts.showTraffic` **boolean** 设置显示实时路况信息，true：路线中显示实时路况信息，false：关闭实时路况信息。 默认值：true (optional, default `true`)
|
||||
|
||||
### Examples
|
||||
|
||||
```javascript
|
||||
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(); //查询导航路径并开启拖拽导航
|
||||
});
|
||||
```
|
||||
|
||||
### search
|
||||
|
||||
开始路径导航。支持鼠标拖拽导航路径节点，更改途经点时，系统实时重新计算并显示导航路径
|
||||
|
||||
### getWays
|
||||
|
||||
返回除了起点和终点之外的所有点返回导航的所有途经点，即所有途径点的坐标数组
|
||||
|
||||
Returns **Array<LngLat>** 所有途经点坐标
|
||||
|
||||
### getRoute
|
||||
|
||||
返回当前导航路径，即导航路径的经纬度坐标数组
|
||||
|
||||
Returns **Array<LngLat>** 当前导航路径
|
||||
|
||||
### destroy
|
||||
|
||||
销毁拖拽导航插件。
|
||||
|
||||
## DragRouteTruck
|
||||
|
||||
可拖拽货车路径规划
|
||||
|
||||
### Parameters
|
||||
|
||||
- `map` **Map** 指定的地图对象
|
||||
- `opts` **DragRouteTruckOptions** 配置项
|
||||
- `opts.polyOption` **PolylineOptions?** 设置拖拽路线插件的路线属性对象，包括线样式、宽度、颜色等，参考PolylineOptions列表
|
||||
- `opts.startMarkerOptions` **MarkerOptions?** 设置拖拽路线插件起点点标记属性对象，包括点标记样式、大小等，参考MarkerOptions列表
|
||||
- `opts.midMarkerOptions` **MarkerOptions?** 设置拖拽路线插件途经点点标记属性对象，包括点标记样式、大小等，参考MarkerOptions列表
|
||||
- `opts.endMarkerOptions` **MarkerOptions?** 设置拖拽路线插件终点点标记属性对象，包括点标记样式、大小等，参考MarkerOptions列表
|
||||
- `opts.showTraffic` **boolean** 设置显示实时路况信息，true：路线中显示实时路况信息，false：关闭实时路况信息。 默认值：true (optional, default `true`)
|
||||
- `opts.policy` **number?** 驾车路线规划策略
|
||||
1躲避拥堵
|
||||
2不走高速
|
||||
3避免收费
|
||||
4躲避拥堵且不走高速
|
||||
5避免收费且不走高速
|
||||
6躲避拥堵且避免收费
|
||||
7躲避拥堵且避免收费且不走高速
|
||||
8高速优先
|
||||
9躲避拥堵且高速优先
|
||||
- `opts.size` **number** 车型大小，必填，1-4分别对应小型至大型
|
||||
- `opts.width` **number** 宽度，缺省2.5米 (optional, default `2.5`)
|
||||
- `opts.height` **number** 高度,缺省1.6米 (optional, default `1.6`)
|
||||
- `opts.load` **number** 载重,缺省0.9t (optional, default `0.9`)
|
||||
- `opts.weight` **number** 自重，缺省10t (optional, default `10`)
|
||||
- `opts.axlesNum` **number** 轴数，缺省2轴 (optional, default `2`)
|
||||
- `opts.extensions` **string** 默认值：base，返回基本地址信息\\n当取值为：all，返回DriveStep基本信息+DriveStep详细信息 (optional, default `'base'`)
|
||||
- `opts.panel` **(string \| HTMLElement)?** 结果列表的HTML容器id或容器元素，提供此参数后，结果列表将在此容器中进行展示。可选
|
||||
- `opts.hideMarkers` **boolean** 设置隐藏路径规划的起始点图标
|
||||
设置为true：隐藏图标；设置false：显示图标\\n默认值为：false (optional, default `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** 车辆类型 0：普通货车（默认值）1：纯电动货车 2：插电混动货车 (optional, default `0`)
|
||||
- `opts.showpolyline` **number** 是否返回路线数据 当取值为1时，steps与tmcs下的polyline数据会正常返回；当取值为0时，steps与tmcs下的polyline数据为空。 (optional, default `1`)
|
||||
- `opts.nosteps` **number** 是否返回steps字段内容 当取值为0时，steps字段内容正常返回；当取值为1时，steps字段内容为空。 (optional, default `1`)
|
||||
- `opts.autoRefresh` **boolean** 是否拖拽后自动更新驾车轨迹 (optional, default `true`)
|
||||
- `opts.refreshTime` **number** 拖拽后自动更新的延迟时间 (optional, default `300`)
|
||||
- `opts.apiVersion` **number** 货车接口版本支持 'v4','v5' (optional, default `'v4'`)
|
||||
- `opts.showFields` **string?** 仅 v5货车接口版本支持 1、具体可指定返回的字段类请见下方返回结果说明中的“show_fields”内字段类型；
|
||||
2、多个字段间采用“,”进行分割；
|
||||
3、show_fields未设置时，只返回基础信息类内字段；
|
||||
4、目前取值支持以下四种："toll_gate"，"cameras"，"general"，"incident"；
|
||||
"toll_gate"：收费站信息
|
||||
"cameras"：电子眼信息
|
||||
"general"：交通设施信息
|
||||
"incident"：交通事件信息
|
||||
|
||||
### Examples
|
||||
|
||||
```javascript
|
||||
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); //查询导航路径并开启拖拽导航
|
||||
});
|
||||
```
|
||||
|
||||
### setAvoidPolygons
|
||||
|
||||
设置避让区域，最大支持三个避让区域，参数为LngLat的二维数组
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `areas` **Array<Array<LngLatLike>>**
|
||||
|
||||
### clearAvoidPolygons
|
||||
|
||||
清除避让区域
|
||||
|
||||
### getAvoidPolygons
|
||||
|
||||
获取避让区域，返回LngLat的二维数组
|
||||
|
||||
Returns **Array<Array<LngLat>>** 避让区域
|
||||
|
||||
### search
|
||||
|
||||
开始路径导航。支持鼠标拖拽导航路径节点，更改途经点时，系统实时重新计算并显示导航路径
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `locations` : Array<{lnglat:LngLatLike}>
|
||||
|
||||
### updatePath
|
||||
|
||||
手动更新路径。设置 autoRefresh 为 false 之后，通过调用这个方法来手动更新路径规划
|
||||
|
||||
### getWays
|
||||
|
||||
返回除了起点和终点之外的所有点返回导航的所有途经点，即所有途径点的坐标数组
|
||||
|
||||
Returns **Array<LngLat>** 所有途经点坐标
|
||||
|
||||
### getRoute
|
||||
|
||||
返回当前导航路径，即导航路径的经纬度坐标数组
|
||||
|
||||
Returns **Array<LngLat>** 当前导航路径
|
||||
|
||||
### destroy
|
||||
|
||||
销毁拖拽导航插件。
|
||||
|
||||
### setOption
|
||||
|
||||
修改配置项
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `opts` **Object**
|
||||
- `opts.policy` **number?** 驾车路线规划策略
|
||||
1躲避拥堵
|
||||
2不走高速
|
||||
3避免收费
|
||||
4躲避拥堵且不走高速
|
||||
5避免收费且不走高速
|
||||
6躲避拥堵且避免收费
|
||||
7躲避拥堵且避免收费且不走高速
|
||||
8高速优先
|
||||
9躲避拥堵且高速优先
|
||||
- `opts.size` **number** 车型大小，必填，1-4分别对应小型至大型
|
||||
- `opts.width` **number** 宽度，缺省2.5米 (optional, default `2.5`)
|
||||
- `opts.height` **number** 高度,缺省1.6米 (optional, default `1.6`)
|
||||
- `opts.load` **number** 载重,缺省0.9t (optional, default `0.9`)
|
||||
- `opts.weight` **number** 自重，缺省10t (optional, default `10`)
|
||||
- `opts.axlesNum` **number** 轴数，缺省2轴 (optional, default `2`)
|
||||
- `opts.extensions` **string** 默认值：base，返回基本地址信息\\n当取值为：all，返回DriveStep基本信息+DriveStep详细信息 (optional, default `'base'`)
|
||||
- `opts.panel` **(string \| HTMLElement)?** 结果列表的HTML容器id或容器元素，提供此参数后，结果列表将在此容器中进行展示。可选
|
||||
- `opts.hideMarkers` **boolean** 设置隐藏路径规划的起始点图标
|
||||
设置为true：隐藏图标；设置false：显示图标\\n默认值为：false (optional, default `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** 车辆类型 0：普通货车（默认值）1：纯电动货车 2：插电混动货车 (optional, default `0`)
|
||||
- `opts.showpolyline` **number** 是否返回路线数据 当取值为1时，steps与tmcs下的polyline数据会正常返回；当取值为0时，steps与tmcs下的polyline数据为空。 (optional, default `1`)
|
||||
- `opts.nosteps` **number** 是否返回steps字段内容 当取值为0时，steps字段内容正常返回；当取值为1时，steps字段内容为空。 (optional, default `1`)
|
||||
|
||||
## GraspRoad
|
||||
|
||||
**Extends AMap.Event**
|
||||
|
||||
轨迹纠偏服务插件。用于将一组带方向的、可能偏离道路的经纬度轨迹，纠正为准确沿着道路的一条经纬度路径。比如根据间隔采集的车辆位置和朝向信息生成行驶轨迹
|
||||
|
||||
### driving
|
||||
|
||||
用于驾车轨迹的纠偏。
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `OriginPath` **Array<Object>**
|
||||
- `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，小数、整数均可
|
||||
- `callback` **GraspRoadCallback** 回调函数
|
||||
|
||||
## GraspRoadCallback
|
||||
|
||||
Type: Function
|
||||
|
||||
### Parameters
|
||||
|
||||
- `err` **Object** 正确时为空
|
||||
- `GraspedPath` **Object** 返回数据，[详查rest文档][131]
|
||||
- `GraspedPath.distance` **number** 总距离
|
||||
- `GraspedPath.data` **Object**
|
||||
- `GraspedPath.data.points` **Array<Object>** 轨迹点数据
|
||||
- `GraspedPath.data.points.x` **number** 经度
|
||||
- `GraspedPath.data.points.x` **number** 纬度
|
||||
@@ -0,0 +1,369 @@
|
||||
## 搜索
|
||||
|
||||
用于进行 POI 搜索联想与数据查询的相关类型
|
||||
|
||||
|
||||
## AutoComplete
|
||||
|
||||
根据输入关键字提示匹配信息，可将Poi类型和城市作为输入提示的限制条件。用户可以通过自定义回调函数取回并显
|
||||
|
||||
### Parameters
|
||||
|
||||
- `opts` **object** 输入提示参数
|
||||
- `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'
|
||||
|
||||
### Examples
|
||||
|
||||
```javascript
|
||||
var auto;
|
||||
//加载输入提示插件
|
||||
map.plugin(['AMap. Autocomplete'], function() {
|
||||
let autoOptions = {
|
||||
city: '010' //城市，默认全国
|
||||
};
|
||||
auto = new AMap.Autocomplete(autoOptions);
|
||||
}};
|
||||
```
|
||||
|
||||
### setType
|
||||
|
||||
设置提示Poi类型，多个类型用“|”分隔，POI相关类型请在网站“相关下载”处下载，目前只支持Poi类型编码如“050000” 默认值：所有类别
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `type` **String** 提示Poi类型
|
||||
|
||||
### setCity
|
||||
|
||||
设置城市
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `city` **String** 城市
|
||||
|
||||
### setCityLimit
|
||||
|
||||
设置是否强制限制城市
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `citylimit` **boolean** 是否强制限制城市
|
||||
|
||||
### search
|
||||
|
||||
根据输入关键字提示匹配信息，支持中文、拼音
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `keyword` **String** 关键字
|
||||
- `callback` **AutoCompleteSearchCallback** 搜索结果回调
|
||||
|
||||
## AutoCompleteSearchCallback
|
||||
|
||||
搜索结果回调
|
||||
|
||||
Type: function
|
||||
|
||||
### Parameters
|
||||
|
||||
- `status` **string** 返回信息状态 可取值：'complete': result 为 AutocompleteResult; 'error': result为错误信息；'no_data': result 为 0
|
||||
- `result` **searchResult** 返回结果详细信息
|
||||
- `result.info` **string** 查询状态说明
|
||||
- `result.count` **number** 输入提示条数
|
||||
- `result.tips` **Array<Tip>** 输入提示列表
|
||||
- `result.tips.name` **string** 名称
|
||||
- `result.tips.district` **string** 所属区域
|
||||
- `result.tips.adcode` **string** 区域编码
|
||||
|
||||
## PlaceSearch
|
||||
|
||||
地点搜索服务插件，提供某一特定地区的位置查询服务。
|
||||
|
||||
### Examples
|
||||
|
||||
```javascript
|
||||
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('方恒国际中心'); //关键字查询
|
||||
});
|
||||
```
|
||||
|
||||
### search
|
||||
|
||||
根据输入关键字提示匹配信息，支持中文、拼音
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `keyword` **string** 关键字
|
||||
- `callback` **searchCallback** 搜索结果回调
|
||||
|
||||
### searchInBounds
|
||||
|
||||
根据范围和关键词进行范围查询
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `keyword` **string** 关键词
|
||||
- `bounds` **AMap.Bounds** 范围
|
||||
- `callback` **searchCallback** 搜索结果回调
|
||||
|
||||
### searchNearBy
|
||||
|
||||
根据中心点经纬度、半径以及关键字进行周边查询 radius取值范围：0-50000
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `keyword` **string** 关键字
|
||||
- `center` **AMap.LngLat** 中心点经纬度
|
||||
- `radius` **number** 半径
|
||||
|
||||
### getDetails
|
||||
|
||||
根据PGUID 查询POI 详细信息
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `PGUID` **string** PGUID
|
||||
|
||||
### setType
|
||||
|
||||
设置查询类别，多个类别用“|”分割
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `type` **string** 类别
|
||||
|
||||
### setPageIndex
|
||||
|
||||
设置显示查询结果页码
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `pageIndex` **number** 结果页码
|
||||
|
||||
### setPageSize
|
||||
|
||||
设置每页显示查询结果数量
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `pageSize` **number** 页数
|
||||
|
||||
### setCity
|
||||
|
||||
设置查询城市, 支持cityname（中文或中文全拼）、citycode、adcode
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `city` **string** 城市标识
|
||||
|
||||
### setCityLimit
|
||||
|
||||
设置是否强制限制城市
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `citylimit` **boolean** 是否开启
|
||||
|
||||
### poiOnAMAP
|
||||
|
||||
唤起高德地图客户端marker页
|
||||
Object 参数：{
|
||||
id: "B000A7BD6C", POIID
|
||||
name:String, 必要参数
|
||||
location:LngLat|position属性 必须参数
|
||||
}
|
||||
例如：{
|
||||
id: "B000A7BD6C",
|
||||
location: LngLat,
|
||||
name: "清华大学",
|
||||
address: "地址"
|
||||
}
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `p`
|
||||
- `opts` **object** 调起参数
|
||||
|
||||
### detailOnAMAP
|
||||
|
||||
唤起高德地图客户端POI详情页
|
||||
Object 参数：{
|
||||
id: "B000A7BD6C", POIID
|
||||
name:String, 必要参数
|
||||
location:LngLat|position属性 必须参数
|
||||
}
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `p`
|
||||
- `opts` **object** 调起
|
||||
|
||||
## searchCallback
|
||||
|
||||
搜索结果回调
|
||||
|
||||
Type: function
|
||||
|
||||
### Parameters
|
||||
|
||||
- `status` **string** 返回信息状态 可取值：'complete': result 为 AutocompleteResult; 'error': result为错误信息；'no_data': result 为 0
|
||||
- `result` **SearchResult** 返回结果详细信息
|
||||
- `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点有出入口信息时返回，否则返回空字符串
|
||||
|
||||
## CloudDataSearch
|
||||
|
||||
云数据检索服务类
|
||||
|
||||
### Parameters
|
||||
|
||||
- `tableid` **string**
|
||||
- `opts` **CloudDataSearchOptions**
|
||||
- `opts.map` **Map** AMap.Map对象, 展现结果的地图实例。当指定此参数后，搜索结果的标注、线路等均会自动添加到此地图上。可选值
|
||||
- `opts.keywords` **string** 云检索关键字，仅支持对建立了文本索引的字段进行模糊检索（请在[云数据管理平台][100]中管理文本索引）
|
||||
- `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点都处于视口的可见范围
|
||||
|
||||
### Examples
|
||||
|
||||
```javascript
|
||||
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);
|
||||
});
|
||||
```
|
||||
|
||||
### setOptions
|
||||
|
||||
设置云数据检索属性
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `opts` **CloudDataSearchOptions**
|
||||
|
||||
### clear
|
||||
|
||||
清除搜索结果
|
||||
|
||||
### searchNearBy
|
||||
|
||||
周边检索，根据指定的中心点和半径检索位置数据。
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `center` **LngLat** 搜索中心
|
||||
- `radius` **number** 取值范围[0-50000]，超过取值范围按3000，单位：米
|
||||
- `callback` **CloudDataSearchCallback** 搜索回调
|
||||
|
||||
### searchById
|
||||
|
||||
根据数据id检索位置数据，id检索时不需要设置CloudDataSearchOptions
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `id` **string**
|
||||
- `callback` **CloudDataSearchCallback** 搜索回调
|
||||
|
||||
### searchByDistrict
|
||||
|
||||
根据行政区划（包括全国/省/市/区县）名称，检索行政区划内位置数据.
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `district` **string** district为“全国”，则对全表搜索当district非法或不正确时，按照district为“全国”返回
|
||||
- `callback` **CloudDataSearchCallback** 搜索回调
|
||||
|
||||
### searchInPolygon
|
||||
|
||||
多边形检索，根据给定的多边形节点坐标数组，检索位置数据。如果数组只有两个坐标元素，则认为多边形为矩形，这两个点为矩形的左下、右上点。多边形坐标数组的起、终点必须保证多边形闭合（起、终点坐标相同）
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `path` **Array<LngLat>** 检索范围路径
|
||||
- `callback` **CloudDataSearchCallback** 搜索回调
|
||||
|
||||
## CloudDataSearchCallback
|
||||
|
||||
搜索结果回调
|
||||
|
||||
Type: function
|
||||
|
||||
### Parameters
|
||||
|
||||
- `status` **string** 返回信息状态 可取值：'complete': result 为 AutocompleteResult; 'error': result为错误信息；'no_data': result 为 0
|
||||
- `result` **object** 返回结果详细信息
|
||||
- `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，若您的原始图片小于该尺寸，将返回原图。
|
||||
@@ -0,0 +1,355 @@
|
||||
## 其他服务
|
||||
|
||||
行政区查询、天气查询、公交站点和公交线路查询
|
||||
|
||||
|
||||
## DistrictSearch
|
||||
|
||||
**Extends AMap.Event**
|
||||
|
||||
行政区查询服务（AMap.DistrictSearch）提供行政区信息的查询，
|
||||
使用该服务可以获取到行政区域的区号、城市编码、中心点、边界、下辖区域等详细信息，为基于行政区域的地图功能提供支持。
|
||||
|
||||
### Parameters
|
||||
|
||||
- `opts` **DistrictSearchOptions** 默认参数
|
||||
- `level` **string** 关键字对应的行政区级别或商圈，可选值：
|
||||
country：国家
|
||||
province：省/直辖市
|
||||
city：市
|
||||
district：区/县
|
||||
biz_area：商圈
|
||||
- `showbiz` **boolean** 是否显示商圈，默认值true
|
||||
可选为true/false，为了能够精准的定位到街道，特别是在快递、物流、送餐等场景下，强烈建议将此设置为false
|
||||
- `extensions` **string** 是否返回行政区边界坐标点，默认值：base，不返回行政区边界坐标点，取值：all，返回完整行政区边界坐标点
|
||||
- `subdistrict` **number** 显示下级行政区级数（行政区级别包括：国家、省/直辖市、市、区/县4个级别），商圈为区/县下一
|
||||
级，可选值：0、1、2、3，默认值：1
|
||||
0：不返回下级行政区
|
||||
1：返回下一级行政区
|
||||
2：返回下两级行政区
|
||||
3：返回下三级行政区
|
||||
|
||||
### Examples
|
||||
|
||||
```javascript
|
||||
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查询对应信息。
|
||||
```
|
||||
|
||||
### setLevel
|
||||
|
||||
设置关键字对应的行政区级别或商圈，可选值：
|
||||
country：国家
|
||||
province：省/直辖市
|
||||
city：市
|
||||
district：区/县
|
||||
biz_area：商圈
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `level` **string** 设置级别
|
||||
|
||||
### setSubdistrict
|
||||
|
||||
设置下级行政区级数（行政区级别包括：国家、省/直辖市、市、区/县4个级别），商圈为区/县下一级，默认值：1
|
||||
可选值：0、1、2、3
|
||||
0：不返回下级行政区；
|
||||
1：返回下一级行政区；
|
||||
2：返回下两级行政区；
|
||||
3：返回下三级行政区；
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `subdistrict` **string** 下级行政区级数
|
||||
|
||||
### search
|
||||
|
||||
根据关键字查询行政区或商圈信息 关键字支持：行政区名、citycode、adcode、商圈名。默认值：“全国”
|
||||
当status为complete时，result为DistrictSearchResult；
|
||||
当status为error时，result为错误信息info；
|
||||
当status为no_data时，代表检索返回0结果
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `keyword`
|
||||
- `DistrictSearchCallBack` **function (status: String, result: info/DistrictSearchResult)** 回调函数
|
||||
- `keywords` **string** 查询的关键字
|
||||
|
||||
## Weather
|
||||
|
||||
天气查询服务，根据城市名称或区域编码返回城市天气预报信息，包括实时天气信息和四天天气预报。
|
||||
|
||||
### Examples
|
||||
|
||||
```javascript
|
||||
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 事件
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
### getLive
|
||||
|
||||
查询实时天气信息。
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `city` **String** 城市名称/区域编码（如：“杭州市”/“330100”）
|
||||
- `callback` **WeatherLiveResult** 回调函数
|
||||
|
||||
### getForecast
|
||||
|
||||
查询四天预报天气，包括查询当天天气信息
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `city` **String**
|
||||
- `callback` **WeatherForecastResult** 回调函数
|
||||
|
||||
## WeatherLiveResult
|
||||
|
||||
Type: Function
|
||||
|
||||
### Parameters
|
||||
|
||||
- `err` **Object** 正确时为空
|
||||
- `LiveData` **Object** 返回数据
|
||||
- `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** 数据发布的时间
|
||||
|
||||
## WeatherForecastResult
|
||||
|
||||
Type: Function
|
||||
|
||||
### Parameters
|
||||
|
||||
- `err` **Object** 正确时为空
|
||||
- `ForecastData` **Object** 返回数据
|
||||
- `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** 夜间风力
|
||||
|
||||
## StationSearch
|
||||
|
||||
**Extends AMap.Event**
|
||||
|
||||
AMap.StationSearch 公交站点查询服务，根据输入关键字、ID查询公交站点信息。
|
||||
用户可以通过自定义回调函数取回并显示查询结果。若服务请求失败，系统将返回错误信息。
|
||||
|
||||
### Parameters
|
||||
|
||||
- `opts` **StationSearchOptions** 参数信息
|
||||
- `opts.pageIndex` **Number** 页码（如pageIndex为2，pageSize为10，那么显示的应是第11-20条返回结果）
|
||||
默认值：1，取值范围：1-100，超过取值范围按默认，超出实际页数按最大值返回
|
||||
- `opts.pageSize` **Number** 单页显示结果条数，默认值：20，取值范围：1-100，超过取值范围按默认
|
||||
- `opts.city` **String** 公交站点所在城市，默认值：“全国”，可选值：cityname（中文或中文全拼）、citycode、adcode
|
||||
|
||||
### Examples
|
||||
|
||||
```javascript
|
||||
//加载公交站点查询插件
|
||||
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);});
|
||||
});
|
||||
```
|
||||
|
||||
### setPageIndex
|
||||
|
||||
设置查询结果页码，默认值：1 取值范围：1-100，超过取值范围按默认
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `pageIndex` **Number** 结果页码
|
||||
|
||||
### setPageSize
|
||||
|
||||
设置单页显示结果条数，默认值：20 取值范围：1-100，超过取值范围按默认
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `pageSize` **Number** 单页显示结果条数
|
||||
|
||||
### setCity
|
||||
|
||||
设置查询城市，默认值：“全国” 可选值：cityname（中文或中文全拼）、citycode、adcode
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `city` **String** 查询城市
|
||||
|
||||
### setCity
|
||||
|
||||
根据给定的公交站点id进行公交站点详情检索，id是公交站点的唯一标识
|
||||
当status为complete时，result为StationSearchResult；
|
||||
当status为error时，result为错误信息info；
|
||||
当status为no_data时，代表检索返回0结果
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `id` **String** 公交站点 id
|
||||
|
||||
### setCity
|
||||
|
||||
根据给定公交站点名称进行公交站点详情查询，多个关键字用"|"分割，status说明同上 [相关示例][134]
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `keyword` **String** 公交站点名称
|
||||
- `StationSearchCallback` **String** 回调函数
|
||||
|
||||
### StationSearchOptions
|
||||
|
||||
Type: Object
|
||||
|
||||
#### Properties
|
||||
|
||||
- `pageIndex` **Number** 页码（如pageIndex为2，pageSize为10，那么显示的应是第11-20条返回结果），默认值：1 取值范围：1-100，超过取值范围按默认; 超出实际页数，按最大值
|
||||
- `pageSize` **Number** 单页显示结果条数，默认值：20
|
||||
- `city` **String** 公交线路所在城市
|
||||
|
||||
## LineSearch
|
||||
|
||||
**Extends AMap.Event**
|
||||
|
||||
AMap.LineSearch 公交路线查询类，通过extensions属性控制返回信息详略。
|
||||
公交线路信息包括起、终点、途径站点，首、末班车时间等信息。用户可以通过自定义回调函数取回并显示查询结果。
|
||||
若服务请求失败，系统将返回[错误信息][135]。
|
||||
|
||||
### Parameters
|
||||
|
||||
- `opts` **LineSearchOptions** 参数信息
|
||||
- `opts.pageIndex` **Number** 页码（如pageIndex为2，pageSize为10，那么显示的应是第11-20条返回结果）
|
||||
默认值：1，取值范围：1-100，超过取值范围按默认，超出实际页数按最大值返回
|
||||
- `opts.pageSize` **Number** 单页显示结果条数，默认值：20，取值范围：1-100，超过取值范围按默认
|
||||
- `opts.city` **String** 公交站点所在城市，默认值：“全国”，可选值：cityname（中文或中文全拼）、citycode、adcode
|
||||
- `extensions` **String** 此项仅公交路线查询时有效，默认值：base，返回公交路线基本信息，当取值为：all，返回公交路线基本信息+详细信息
|
||||
|
||||
### Examples
|
||||
|
||||
```javascript
|
||||
//加载公交线路查询插件
|
||||
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);});
|
||||
});
|
||||
```
|
||||
|
||||
### setPageIndex
|
||||
|
||||
设置查询结果页码，默认值：1 取值范围：1-100，超过取值范围按默认
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `pageIndex` **Number** 结果页码
|
||||
|
||||
### setPageSize
|
||||
|
||||
设置单页显示结果条数，默认值：20 取值范围：1-100，超过取值范围按默认
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `pageSize` **Number** 单页显示结果条数
|
||||
|
||||
### setCity
|
||||
|
||||
设置查询城市，默认值：“全国” 可选值：cityname（中文或中文全拼）、citycode、adcode
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `city` **String** 城市
|
||||
|
||||
### setCity
|
||||
|
||||
设置查询城市，默认值：“全国” 可选值：cityname（中文或中文全拼）、citycode、adcode
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `city` **String** 查询城市
|
||||
|
||||
### setCity
|
||||
|
||||
根据给定的公交站点id进行公交站点详情检索，id是公交站点的唯一标识
|
||||
当status为complete时，result为LineSearchResult；
|
||||
当status为error时，result为错误信息info；
|
||||
当status为no_data时，代表检索返回0结果
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `id` **String** 公交站点 id
|
||||
|
||||
### setCity
|
||||
|
||||
根据给定公交站点名称进行公交站点详情查询，多个关键字用"|"分割，status说明同上 [相关示例][136]
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `keyword` **String** 公交站点名称
|
||||
- `LineSearchCallback` **String** 回调函数
|
||||
|
||||
### LineSearchOptions
|
||||
|
||||
Type: Object
|
||||
|
||||
#### Properties
|
||||
|
||||
- `pageIndex` **Number** 页码（如pageIndex为2，pageSize为10，那么显示的应是第11-20条返回结果），默认值：1 取值范围：1-100，超过取值范围按默认; 超出实际页数，按最大值
|
||||
- `pageSize` **Number** 单页显示结果条数，默认值：20
|
||||
- `city` **String** 公交线路所在城市
|
||||
- `extensions` **String** 此项仅公交路线查询时有效 默认值：base，返回公交路线基本信息 当取值为：all，返回公交路线基本信息+详细信息
|
||||
@@ -0,0 +1,70 @@
|
||||
## 服务类
|
||||
|
||||
用于调用 Web 服务 API，直接透传查询条件和返回结果
|
||||
|
||||
|
||||
## WebService
|
||||
|
||||
用于调用 Web 服务 API，直接透传查询条件和返回结果，提供GET和POST两种请求方式，具体请求接口和返回结果，请参考 [https://lbs.amap.com/api/webservice/summary/][96]
|
||||
|
||||
### get
|
||||
|
||||
以 GET 请求方式请求指定的 Web 服务 API 接口
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `path` **string** Web服务API的接口路径
|
||||
- `params` **object** Web服务 API 的查询参数
|
||||
- `callback` **WebServiceCallback** 查询回调函数
|
||||
- `opts` **HttpOptions** HTTP 请求参数配置 (optional, default `{}`)
|
||||
|
||||
#### Examples
|
||||
|
||||
```javascript
|
||||
AMap.WebService.get('https://restapi.amap.com/v3/place/text',
|
||||
{
|
||||
keywords : '首开广场',
|
||||
types : '写字楼',
|
||||
city : '010'
|
||||
},function (error, result) {
|
||||
console.log(error, result);
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
### post
|
||||
|
||||
以 POST 请求方式请求指定的 Web 服务 API 接口, 目前只有轨迹纠偏接口需要使用 POST 方式
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `path` **string** Web服务API的接口路径
|
||||
- `params` **any** Web服务 API 的查询参数
|
||||
- `callback` **WebServiceCallback** 查询回调函数
|
||||
|
||||
#### Examples
|
||||
|
||||
```javascript
|
||||
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);
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
## WebServiceCallback
|
||||
|
||||
WebService 的回调函数类型
|
||||
|
||||
Type: Function
|
||||
|
||||
### Parameters
|
||||
|
||||
- `status` **string** 服务查询的状态结果，'complete' 或 'error'
|
||||
- `data` **any** Web服务API返回的数据
|
||||
@@ -0,0 +1,391 @@
|
||||
## 工具类
|
||||
|
||||
用于满足一定专门功能的工具类型
|
||||
|
||||
|
||||
## RangingTool
|
||||
|
||||
构造一个距离量测插件对象。参数map为地图实例。 opts属性参考RangingToolOptions列表中的说明
|
||||
|
||||
### Parameters
|
||||
|
||||
- `map` **Map** 要添加到的地图实例
|
||||
- `opts` **RangingToolOptions** 鼠标工具配置参数
|
||||
- `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)
|
||||
|
||||
### Examples
|
||||
|
||||
```javascript
|
||||
map.plugin(["AMap.MouseTool"],function(){
|
||||
var ruler = new AMap.RangingTool(map);
|
||||
});
|
||||
```
|
||||
|
||||
### turnOn
|
||||
|
||||
启动测距工具
|
||||
|
||||
### turnOff
|
||||
|
||||
关闭测距工具
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `removeOverlays` **Boolean** 是否删除测距过程产生的覆盖物
|
||||
|
||||
## MouseTool
|
||||
|
||||
鼠标工具插件。通过该插件，可进行鼠标画标记点、线、多边形、矩形、圆、距离量测、面积量测、拉框放大、拉框缩小等功能。
|
||||
|
||||
### Parameters
|
||||
|
||||
- `map` **Map** 鼠标工具添加到的地图实例
|
||||
|
||||
### Examples
|
||||
|
||||
```javascript
|
||||
map.plugin(["AMap.MouseTool"],function(){
|
||||
var mousetool = new AMap.MouseTool(map);
|
||||
// 使用鼠标工具，在地图上画标记点
|
||||
mousetool.marker();
|
||||
});
|
||||
```
|
||||
|
||||
### marker
|
||||
|
||||
开启鼠标画点标注模式。鼠标在地图上单击绘制点标注，标注样式参考MarkerOptions设置
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `opts` **MarkerOptions** 参考MarkerOptions设置
|
||||
|
||||
### circle
|
||||
|
||||
开启鼠标画圆模式。鼠标在地图上拖动绘制相应的圆形。圆形样式参考CircleOptions设置
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `opts` **CircleOptions** 参考CircleOptions设置
|
||||
|
||||
### rectangle
|
||||
|
||||
开启鼠标画矩形模式。鼠标在地图上拉框即可绘制相应的矩形。矩形样式参考PolygonOptions设置
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `opts` **PolygonOptions** 矩形样式参考PolygonOptions设置
|
||||
|
||||
### polyline
|
||||
|
||||
开启鼠标画折线模式。鼠标在地图上点击绘制折线，鼠标左键双击或右键单击结束绘制，折线样式参考PolylineOptions设置
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `opts` **PolylineOptions** 参考PolylineOptions设置
|
||||
|
||||
### polygon
|
||||
|
||||
开启鼠标画多边形模式。鼠标在地图上单击开始绘制多边形，鼠标左键双击或右键单击结束当前多边形的绘制，多边形样式参考PolygonOptions设置
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `opts` **PolygonOptions** 参考PolygonOptions设置
|
||||
|
||||
### measureArea
|
||||
|
||||
开启面积量测模式。鼠标在地图上单击绘制量测区域，鼠标左键双击或右键单击结束当前量测操作，并显示本次量测结果。量测面样式参考PolygonOptions设置
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `opts` **PolygonOptions** 参考PolygonOptions设置
|
||||
|
||||
### rule
|
||||
|
||||
开启距离量测模式。鼠标在地图上单击绘制量测节点，并计算显示两两节点之间的距离，鼠标左键双击或右键单击结束当前量测操作。量测线样式参考 PolylineOptions 设置
|
||||
注：不能同时使用rule方法和RangTool插件进行距离量测
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `opts` **PolylineOptions** 参考PolylineOptions设置
|
||||
|
||||
### rectZoomIn
|
||||
|
||||
开启鼠标拉框放大模式。鼠标可在地图上拉框放大地图。矩形框样式参考PolygonOptions设置
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `opts` **PolygonOptions** 参考PolygonOptions设置
|
||||
|
||||
### rectZoomOut
|
||||
|
||||
开启鼠标拉框缩小模式。鼠标可在地图上拉框缩小地图。矩形框样式参考PolygonOptions设置
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `opts` **PolygonOptions** 参考PolygonOptions设置
|
||||
|
||||
### close
|
||||
|
||||
关闭当前鼠标操作。参数arg设为true时，鼠标操作关闭的同时清除地图上绘制的所有覆盖物对象；设为false时，保留所绘制的覆盖物对象。默认为false
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `ifClear` **boolean** 是否清除地图上的覆盖物
|
||||
|
||||
## PolygonEditor
|
||||
|
||||
Polygon 编辑器
|
||||
|
||||
### Parameters
|
||||
|
||||
- `map` **Map** AMap.Map 的实例
|
||||
- `polygon` **Polygon?** 编辑对象
|
||||
- `opts` **Object?** 设置参数
|
||||
- `opts.createOptions` **Object?** 新创建的对象样式
|
||||
- `opts.editOptions` **Object?** 编辑样式
|
||||
- `opts.controlPoint` **Object?** 顶点样式 CircleMarkerOptions
|
||||
- `opts.midControlPoint` **Object?** 中间点样式 CircleMarkerOptions
|
||||
|
||||
### open
|
||||
|
||||
开始编辑对象
|
||||
|
||||
### setTarget
|
||||
|
||||
设置编辑对象
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `tar`
|
||||
- `overlay` **Polygon**
|
||||
|
||||
### getTarget
|
||||
|
||||
获取编辑对象
|
||||
|
||||
Returns **(Polygon \| undefined)**
|
||||
|
||||
### setAdsorbPolygons
|
||||
|
||||
设置吸附多边形
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `list` **(Polygon \| Array<Polygon>)**
|
||||
|
||||
### clearAdsorbPolygons
|
||||
|
||||
清空所有的吸附多边形
|
||||
|
||||
### addAdsorbPolygons
|
||||
|
||||
添加吸附多边形
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `list` **(Polygon \| Array<Polygon>)**
|
||||
|
||||
### removeAdsorbPolygons
|
||||
|
||||
删除吸附多边形
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `list` **(Polygon \| Array<Polygon>)**
|
||||
|
||||
### close
|
||||
|
||||
停止编辑对象
|
||||
|
||||
## PolylineEditor
|
||||
|
||||
折线编辑插件，用于编辑AMap.Polyline对象，支持通过鼠标调整折线的形状。
|
||||
|
||||
### Parameters
|
||||
|
||||
- `map` **Map** AMap.Map 的实例
|
||||
- `polygon` **Polygon?** 编辑对象
|
||||
- `opts` **Object?** 设置参数
|
||||
- `opts.createOptions` **Object?** 新创建的对象样式
|
||||
- `opts.editOptions` **Object?** 编辑样式
|
||||
- `opts.controlPoint` **Object?** 顶点样式 CircleMarkerOptions
|
||||
- `opts.midControlPoint` **Object?** 中间点样式 CircleMarkerOptions
|
||||
|
||||
### setTarget
|
||||
|
||||
设置编辑对象
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `overlay` **Polyline?**
|
||||
|
||||
### getTarget
|
||||
|
||||
获取编辑对象
|
||||
|
||||
Returns **(Polyline \| undefined)** 当前编辑对象
|
||||
|
||||
### open
|
||||
|
||||
开始编辑对象
|
||||
|
||||
### close
|
||||
|
||||
停止编辑对象
|
||||
|
||||
## CircleEditor
|
||||
|
||||
圆编辑插件。用于编辑AMap.Circle对象，功能包括使用鼠标改变圆半径大小、拖拽圆心改变圆的位置。
|
||||
|
||||
### Parameters
|
||||
|
||||
- `map` **Map** AMap.Map 实例
|
||||
- `circle` **Circle?** 可选参数， AMap.Circle 实例
|
||||
- `opts` **Object?** 设置参数
|
||||
- `opts.createOptions` **Object?** 新创建的对象样式
|
||||
- `opts.editOptions` **Object?** 编辑样式
|
||||
- `opts.movePoint` **Object?** 移动点样式 MarkerOptions
|
||||
- `opts.resizePoint` **Object?** reaize点样式 MarkerOptions
|
||||
|
||||
### setTarget
|
||||
|
||||
设置编辑对象
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `overlay` **Circle?** 编辑对象
|
||||
|
||||
### getTarget
|
||||
|
||||
获取编辑对象
|
||||
|
||||
Returns **(Circle \| undefined)** 当前编辑对象
|
||||
|
||||
### open
|
||||
|
||||
打开编辑功能
|
||||
|
||||
### close
|
||||
|
||||
关闭编辑功能
|
||||
|
||||
## BezierCurveEditor
|
||||
|
||||
贝塞尔曲线编辑器
|
||||
|
||||
### Parameters
|
||||
|
||||
- `map` **Map** AMap.Map 实例
|
||||
- `bezier` **BezierCurve?** 曲线示例
|
||||
- `opts` **Object?** 设置参数
|
||||
- `opts.createOptions` **Object?** 新创建的对象样式
|
||||
- `opts.editOptions` **Object?** 编辑样式
|
||||
- `opts.controlPoint` **Object?** 顶点样式 MarkerOptions
|
||||
- `opts.midControlPoint` **Object?** 中间点样式 MarkerOptions
|
||||
- `opts.bezierControlPoint` **Object?** 贝塞尔控制点样式MarkerOptions
|
||||
- `opts.bezierControlLine` **Object?** 贝塞尔控制线样式PolylineOptions
|
||||
|
||||
### setTarget
|
||||
|
||||
设置编辑对象
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `overlay` **BezierCurve?**
|
||||
|
||||
### getTarget
|
||||
|
||||
获取编辑对象
|
||||
|
||||
Returns **(BezierCurve \| undefined)** [overlay] 当前编辑对象
|
||||
|
||||
### open
|
||||
|
||||
开始编辑对象
|
||||
|
||||
### close
|
||||
|
||||
结束编辑对象
|
||||
|
||||
## EllipseEditor
|
||||
|
||||
椭圆编辑器
|
||||
|
||||
### Parameters
|
||||
|
||||
- `map` **Map** AMap.Map 的实例
|
||||
- `ellipse` **Ellipse?** AMap.Ellipse 的实例
|
||||
- `opts` **Object?** 设置参数
|
||||
- `opts.createOptions` **Object?** 新创建的对象样式
|
||||
- `opts.editOptions` **Object?** 编辑样式
|
||||
- `opts.movePoint` **Object?** 移动点样式 MarkerOptions
|
||||
- `opts.resizeXPoint` **Object?** reaizeX点样式 MarkerOptions
|
||||
- `opts.resizeYPoint` **Object?** reaizeY点样式 MarkerOptions
|
||||
|
||||
### setTarget
|
||||
|
||||
设置编辑对象
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `overlay` **Ellipse?** 编辑对象
|
||||
|
||||
### getTarget
|
||||
|
||||
获取编辑对象
|
||||
|
||||
Returns **(Ellipse \| undefined)** 当前编辑对象
|
||||
|
||||
### open
|
||||
|
||||
打开编辑功能
|
||||
|
||||
### close
|
||||
|
||||
关闭编辑功能
|
||||
|
||||
## RectangleEditor
|
||||
|
||||
矩形编辑器
|
||||
|
||||
### Parameters
|
||||
|
||||
- `map` **Map** AMap.Map 的实例
|
||||
- `rect` **Rectangle?** AMap.Rectangle 的实例
|
||||
- `opts` **Object?** 设置参数
|
||||
- `opts.createOptions` **Object?** 新创建的对象样式
|
||||
- `opts.editOptions` **Object?** 编辑样式
|
||||
- `opts.southWestPoint` **Object?** 西南点样式 MarkerOptions
|
||||
- `opts.northEastPoint` **Object?** 东北点样式 MarkerOptions
|
||||
|
||||
### setTarget
|
||||
|
||||
设置编辑对象
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `overlay` **Rectangle?** 编辑对象
|
||||
|
||||
### getTarget
|
||||
|
||||
获取编辑对象
|
||||
|
||||
Returns **(Rectangle \| undefined)** 当前编辑对象
|
||||
|
||||
### open
|
||||
|
||||
打开编辑功能
|
||||
|
||||
### close
|
||||
|
||||
关闭编辑功能
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,71 @@
|
||||
# 右键菜单 (ContextMenu)
|
||||
|
||||
右键菜单可以绑定到地图底图或覆盖物上，提供快捷操作功能。
|
||||
|
||||
## 创建菜单
|
||||
|
||||
```javascript
|
||||
// 创建右键菜单实例
|
||||
const contextMenu = new AMap.ContextMenu();
|
||||
|
||||
// 添加菜单项
|
||||
contextMenu.addItem('放大一级', function() {
|
||||
map.zoomIn();
|
||||
}, 0); // 第三个参数是排序权重
|
||||
|
||||
contextMenu.addItem('缩小一级', function() {
|
||||
map.zoomOut();
|
||||
}, 1);
|
||||
|
||||
contextMenu.addItem('设置中心点', function() {
|
||||
map.setCenter(contextMenuPos); // 使用保存的点击位置
|
||||
}, 2);
|
||||
```
|
||||
|
||||
## 绑定事件
|
||||
|
||||
### 1. 绑定到地图
|
||||
|
||||
```javascript
|
||||
let contextMenuPos;
|
||||
|
||||
map.on('rightclick', function(e) {
|
||||
contextMenuPos = e.lnglat; // 记录右键点击的位置
|
||||
contextMenu.open(map, e.lnglat);
|
||||
});
|
||||
```
|
||||
|
||||
### 2. 绑定到覆盖物 (如 Marker)
|
||||
|
||||
```javascript
|
||||
const marker = new AMap.Marker({
|
||||
position: [116.397, 39.909]
|
||||
});
|
||||
map.add(marker);
|
||||
|
||||
const markerMenu = new AMap.ContextMenu();
|
||||
markerMenu.addItem('删除标记', function() {
|
||||
map.remove(marker);
|
||||
});
|
||||
|
||||
marker.on('rightclick', function(e) {
|
||||
markerMenu.open(map, e.lnglat);
|
||||
});
|
||||
```
|
||||
|
||||
## 动态菜单
|
||||
|
||||
你可以在事件回调中动态修改菜单项。
|
||||
|
||||
```javascript
|
||||
map.on('rightclick', function(e) {
|
||||
contextMenu.removeItem('添加标记', function(){}); // 先移除旧的（如果需要）
|
||||
|
||||
// 根据条件动态添加
|
||||
if (map.getZoom() < 10) {
|
||||
contextMenu.addItem('缩放至详细级别', () => map.setZoom(15), 0);
|
||||
}
|
||||
|
||||
contextMenu.open(map, e.lnglat);
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,220 @@
|
||||
# 自定义图层 (Custom Layers)
|
||||
|
||||
当官方图层无法满足需求时，可以使用自定义图层叠加自己的数据。
|
||||
|
||||
## 1. 图片图层 (ImageLayer)
|
||||
|
||||
将一张图片映射到地图的指定区域（矩形范围）。
|
||||
|
||||
```javascript
|
||||
const bounds = new AMap.Bounds(
|
||||
[116.327911, 39.939229], // 西南角
|
||||
[116.342659, 39.946275] // 东北角
|
||||
);
|
||||
|
||||
const imageLayer = new AMap.ImageLayer({
|
||||
url: 'https://amap.com/examples/img/dongwuyuan.jpg',
|
||||
bounds: bounds,
|
||||
zooms: [12, 20],
|
||||
zIndex: 2,
|
||||
opacity: 0.8
|
||||
});
|
||||
|
||||
map.add(imageLayer);
|
||||
```
|
||||
|
||||
## 2. 视频图层 (VideoLayer)
|
||||
|
||||
将视频流叠加到地图上，支持 HTML5 Video 元素。
|
||||
|
||||
```javascript
|
||||
const videoLayer = new AMap.VideoLayer({
|
||||
url: 'https://xxx.mp4', // 视频地址
|
||||
bounds: bounds,
|
||||
zIndex: 10,
|
||||
zooms: [14, 20],
|
||||
opacity: 1,
|
||||
loop: true, // 是否循环播放
|
||||
});
|
||||
map.add(videoLayer);
|
||||
```
|
||||
|
||||
## 3. Canvas 图层 (CanvasLayer)
|
||||
|
||||
最灵活的图层，允许通过 Canvas API 自定义绘制内容。
|
||||
|
||||
```javascript
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = map.getSize().width;
|
||||
canvas.height = map.getSize().height;
|
||||
|
||||
const canvasLayer = new AMap.CanvasLayer({
|
||||
canvas: canvas,
|
||||
bounds: map.getBounds(),
|
||||
zooms: [3, 18],
|
||||
});
|
||||
|
||||
map.add(canvasLayer);
|
||||
|
||||
// 自定义绘制逻辑
|
||||
function draw() {
|
||||
const ctx = canvas.getContext('2d');
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
// ... 绘制逻辑 ...
|
||||
// 可以使用 AMap.CustomLayer 的 render 方法结合 map.lngLatToContainer 转换坐标
|
||||
}
|
||||
|
||||
draw();
|
||||
```
|
||||
|
||||
## 4. 自定义切片图层 (TileLayer)
|
||||
|
||||
加载第三方的 WMTS 或 XYZ 切片服务。
|
||||
|
||||
```javascript
|
||||
const xyzLayer = new AMap.TileLayer({
|
||||
// [x], [y], [z] 会自动替换为行列号和缩放级别
|
||||
getTileUrl: 'https://tile.openstreetmap.org/[z]/[x]/[y].png',
|
||||
zIndex: 100
|
||||
});
|
||||
map.add(xyzLayer);
|
||||
```
|
||||
|
||||
## 5. GL 图层 (GLCustomLayer)
|
||||
|
||||
结合 Three.js 实现自定义 3D 场景渲染。
|
||||
|
||||
```javascript
|
||||
var map = new AMap.Map('container', {
|
||||
center: [116.54, 39.79],
|
||||
zooms: [2, 20],
|
||||
zoom: 14,
|
||||
viewMode: '3D',
|
||||
pitch: 50,
|
||||
});
|
||||
|
||||
var camera;
|
||||
var renderer;
|
||||
var scene;
|
||||
var meshes = [];
|
||||
// 数据转换工具
|
||||
var customCoords = map.customCoords;
|
||||
// 数据使用转换工具进行转换，这个操作必须要提前执行（在获取镜头参数 函数之前执行），否则将会获得一个错误信息。
|
||||
var data = customCoords.lngLatsToCoords([
|
||||
[116.52, 39.79],
|
||||
[116.54, 39.79],
|
||||
[116.56, 39.79],
|
||||
]);
|
||||
|
||||
// 创建 GL 图层
|
||||
var gllayer = new AMap.GLCustomLayer({
|
||||
// 图层的层级
|
||||
zIndex: 10,
|
||||
// 初始化的操作，创建图层过程中执行一次。
|
||||
init: (gl) => {
|
||||
// 这里我们的地图模式是 3D，所以创建一个透视相机，相机的参数初始化可以随意设置，因为在 render 函数中，每一帧都需要同步相机参数，因此这里变得不那么重要。
|
||||
// 如果你需要 2D 地图（viewMode: '2D'），那么你需要创建一个正交相机
|
||||
camera = new THREE.PerspectiveCamera(
|
||||
60,
|
||||
window.innerWidth / window.innerHeight,
|
||||
100,
|
||||
1 << 30
|
||||
);
|
||||
|
||||
renderer = new THREE.WebGLRenderer({
|
||||
context: gl, // 地图的 gl 上下文
|
||||
// alpha: true,
|
||||
// antialias: true,
|
||||
// canvas: gl.canvas,
|
||||
});
|
||||
|
||||
// 自动清空画布这里必须设置为 false，否则地图底图将无法显示
|
||||
renderer.autoClear = false;
|
||||
scene = new THREE.Scene();
|
||||
|
||||
// 环境光照和平行光
|
||||
var aLight = new THREE.AmbientLight(0xffffff, 0.3);
|
||||
var dLight = new THREE.DirectionalLight(0xffffff, 1);
|
||||
dLight.position.set(1000, -100, 900);
|
||||
scene.add(dLight);
|
||||
scene.add(aLight);
|
||||
|
||||
var texture = new THREE.TextureLoader().load(
|
||||
'https://a.amap.com/jsapi_demos/static/demo-center-v2/three.jpeg'
|
||||
);
|
||||
texture.minFilter = THREE.LinearFilter;
|
||||
// 这里可以使用 three 的各种材质
|
||||
var mat = new THREE.MeshPhongMaterial({
|
||||
color: 0xfff0f0,
|
||||
depthTest: true,
|
||||
transparent: true,
|
||||
map: texture,
|
||||
});
|
||||
var geo = new THREE.BoxBufferGeometry(1000, 1000, 1000);
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
const d = data[i];
|
||||
var mesh = new THREE.Mesh(geo, mat);
|
||||
mesh.position.set(d[0], d[1], 500);
|
||||
meshes.push({
|
||||
mesh,
|
||||
count: i,
|
||||
});
|
||||
scene.add(mesh);
|
||||
}
|
||||
},
|
||||
render: () => {
|
||||
// 这里必须执行！！重新设置 three 的 gl 上下文状态。
|
||||
renderer.resetState();
|
||||
// 重新设置图层的渲染中心点，将模型等物体的渲染中心点重置
|
||||
// 否则和 LOCA 可视化等多个图层能力使用的时候会出现物体位置偏移的问题
|
||||
customCoords.setCenter([116.52, 39.79]);
|
||||
var { near, far, fov, up, lookAt, position } =
|
||||
customCoords.getCameraParams();
|
||||
|
||||
// 2D 地图下使用的正交相机
|
||||
// var { near, far, top, bottom, left, right, position, rotation } = customCoords.getCameraParams();
|
||||
|
||||
// 这里的顺序不能颠倒，否则可能会出现绘制卡顿的效果。
|
||||
camera.near = near;
|
||||
camera.far = far;
|
||||
camera.fov = fov;
|
||||
camera.position.set(...position);
|
||||
camera.up.set(...up);
|
||||
camera.lookAt(...lookAt);
|
||||
camera.updateProjectionMatrix();
|
||||
|
||||
// 2D 地图使用的正交相机参数赋值
|
||||
// camera.top = top;
|
||||
// camera.bottom = bottom;
|
||||
// camera.left = left;
|
||||
// camera.right = right;
|
||||
// camera.position.set(...position);
|
||||
// camera.updateProjectionMatrix();
|
||||
|
||||
renderer.render(scene, camera);
|
||||
|
||||
// 这里必须执行！！重新设置 three 的 gl 上下文状态。
|
||||
renderer.resetState();
|
||||
},
|
||||
});
|
||||
map.add(gllayer);
|
||||
|
||||
// 动画
|
||||
function animate() {
|
||||
for (let i = 0; i < meshes.length; i++) {
|
||||
let { mesh, count } = meshes[i];
|
||||
count += 1;
|
||||
mesh.rotateZ((count / 180) * Math.PI);
|
||||
}
|
||||
map.render();
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
animate();
|
||||
|
||||
function onWindowResize() {
|
||||
camera.aspect = window.innerWidth / window.innerHeight;
|
||||
camera.updateProjectionMatrix();
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
}
|
||||
window.addEventListener('resize', onWindowResize);
|
||||
```
|
||||
@@ -0,0 +1,178 @@
|
||||
# 事件系统 (Event System)
|
||||
|
||||
JSAPI v2.0 提供了一套类似于 DOM 的事件机制，支持对地图及覆盖物进行事件绑定和解绑。
|
||||
|
||||
## 事件绑定 (on)
|
||||
|
||||
```javascript
|
||||
// 绑定地图点击事件
|
||||
const clickHandler = function(e) {
|
||||
console.log('点击位置：', e.lnglat.getLng(), e.lnglat.getLat());
|
||||
console.log('触发对象：', e.target);
|
||||
console.log('像素坐标：', e.pixel);
|
||||
};
|
||||
|
||||
map.on('click', clickHandler);
|
||||
|
||||
// 绑定覆盖物事件
|
||||
marker.on('mouseover', function(e) {
|
||||
marker.setLabel({ content: '鼠标移入' });
|
||||
});
|
||||
```
|
||||
|
||||
## 事件解绑 (off)
|
||||
|
||||
**注意**: 解绑时需要传入绑定时的**同一个函数引用**。
|
||||
|
||||
```javascript
|
||||
// 正确方式
|
||||
map.off('click', clickHandler);
|
||||
|
||||
|
||||
|
||||
## 一次性事件 (once)
|
||||
|
||||
事件只触发一次后自动解绑。
|
||||
|
||||
```javascript
|
||||
map.once('click', function(e) {
|
||||
console.log('只触发一次');
|
||||
});
|
||||
```
|
||||
|
||||
## 常用事件列表
|
||||
|
||||
### 地图事件 (Map Events)
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
| :--- | :--- | :--- |
|
||||
| complete | 地图资源加载完成 | - |
|
||||
| click | 左键单击 | MapsEvent |
|
||||
| dblclick | 左键双击 | MapsEvent |
|
||||
| rightclick | 右键单击 | MapsEvent |
|
||||
| mousemove | 鼠标移动 | MapsEvent |
|
||||
| mousewheel | 鼠标滚轮 | MapsEvent |
|
||||
| mouseover | 鼠标移入 | MapsEvent |
|
||||
| mouseout | 鼠标移出 | MapsEvent |
|
||||
| mousedown | 鼠标按下 | MapsEvent |
|
||||
| mouseup | 鼠标抬起 | MapsEvent |
|
||||
| touchstart | 触摸开始 | MapsEvent |
|
||||
| touchmove | 触摸移动 | MapsEvent |
|
||||
| touchend | 触摸结束 | MapsEvent |
|
||||
| zoomstart | 缩放开始 | - |
|
||||
| zoomend | 缩放结束 | - |
|
||||
| zoomchange | 缩放级别变化 | - |
|
||||
| movestart | 平移开始 | - |
|
||||
| moveend | 平移结束 | - |
|
||||
| mapmove | 地图移动中 | - |
|
||||
| rotatestart | 旋转开始 | - |
|
||||
| rotateend | 旋转结束 | - |
|
||||
| rotatechange | 旋转角度变化 | - |
|
||||
| dragstart | 拖拽开始 | - |
|
||||
| dragging | 拖拽中 | - |
|
||||
| dragend | 拖拽结束 | - |
|
||||
| resize | 地图容器大小变化 | - |
|
||||
| hotspotclick | 热点点击 | { type, lnglat, name, id } |
|
||||
| hotspotover | 热点移入 | { type, lnglat, name, id } |
|
||||
| hotspotout | 热点移出 | { type, lnglat, name, id } |
|
||||
|
||||
### 覆盖物事件 (Overlay Events)
|
||||
|
||||
适用于 `Marker`, `Polygon`, `Polyline`, `Circle` 等。
|
||||
|
||||
| 事件名 | 说明 |
|
||||
| :--- | :--- |
|
||||
| `click` | 点击覆盖物 |
|
||||
| `mouseover` | 鼠标移入 |
|
||||
| `mouseout` | 鼠标移出 |
|
||||
| `dragstart` | 开始拖拽 (需设置 `draggable: true`) |
|
||||
| `dragging` | 拖拽中 |
|
||||
| `dragend` | 拖拽结束 |
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 基础事件监听
|
||||
|
||||
```javascript
|
||||
const map = new AMap.Map('container', {
|
||||
zoom: 14,
|
||||
center: [116.397, 39.909]
|
||||
});
|
||||
|
||||
// 地图加载完成
|
||||
map.on('complete', function() {
|
||||
console.log('地图加载完成');
|
||||
});
|
||||
|
||||
// 点击事件
|
||||
map.on('click', function(e) {
|
||||
console.log('点击坐标:', e.lnglat.getLng(), e.lnglat.getLat());
|
||||
|
||||
// 在点击位置添加标记
|
||||
new AMap.Marker({
|
||||
map: map,
|
||||
position: e.lnglat
|
||||
});
|
||||
});
|
||||
|
||||
// 缩放事件
|
||||
map.on('zoomend', function() {
|
||||
console.log('当前缩放级别:', map.getZoom());
|
||||
});
|
||||
|
||||
// 移动事件
|
||||
map.on('moveend', function() {
|
||||
console.log('当前中心点:', map.getCenter());
|
||||
});
|
||||
```
|
||||
### 覆盖物事件
|
||||
|
||||
```javascript
|
||||
const marker = new AMap.Marker({
|
||||
position: [116.397, 39.909],
|
||||
draggable: true
|
||||
});
|
||||
map.add(marker);
|
||||
|
||||
// 点击事件
|
||||
marker.on('click', function(e) {
|
||||
console.log('点击了标记');
|
||||
});
|
||||
|
||||
// 鼠标移入移出
|
||||
marker.on('mouseover', function() {
|
||||
marker.setLabel({ content: '鼠标移入' });
|
||||
});
|
||||
|
||||
marker.on('mouseout', function() {
|
||||
marker.setLabel({ content: '' });
|
||||
});
|
||||
|
||||
// 拖拽事件
|
||||
marker.on('dragstart', function() {
|
||||
console.log('开始拖拽');
|
||||
});
|
||||
|
||||
marker.on('dragend', function(e) {
|
||||
console.log('拖拽结束，新位置:', e.target.getPosition());
|
||||
});
|
||||
```
|
||||
|
||||
## 自定义事件上下文
|
||||
|
||||
可以通过 `context` 参数指定回调函数中的 `this` 指向。
|
||||
|
||||
```javascript
|
||||
map.on('click', function() {
|
||||
this.foo(); // this 指向 myObj
|
||||
}, myObj);
|
||||
```
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. **函数引用**: 解绑事件时必须传入绑定时的同一个函数引用
|
||||
2. **避免匿名函数**: 如果需要解绑，不要使用匿名函数
|
||||
3. **内存管理**: 组件销毁前解绑事件，防止内存泄漏
|
||||
4. **事件冒泡**: 覆盖物事件会冒泡到地图，必要时阻止冒泡
|
||||
5. **触摸事件**: 移动端需要监听 touch 系列事件
|
||||
6. **异步加载**: complete 事件在地图资源加载完成后触发
|
||||
@@ -0,0 +1,171 @@
|
||||
# 地理编码 (Geocoder)
|
||||
|
||||
地理编码服务提供了将地址转换为经纬度（正向地理编码）和将经纬度转换为地址（逆向地理编码）的功能。
|
||||
|
||||
## 1. 加载插件
|
||||
|
||||
使用 `AMapLoader` 加载时需要包含 `AMap.Geocoder` 插件。
|
||||
|
||||
```javascript
|
||||
AMapLoader.load({
|
||||
key: '您的Key',
|
||||
version: '2.0',
|
||||
plugins: ['AMap.Geocoder'] // 预加载插件
|
||||
}).then((AMap) => {
|
||||
// ...
|
||||
});
|
||||
```
|
||||
|
||||
## 2. 正向地理编码 (地址 -> 坐标)
|
||||
|
||||
将详细的结构化地址转换为经纬度坐标。
|
||||
|
||||
```javascript
|
||||
const geocoder = new AMap.Geocoder({
|
||||
city: '010', // 城市，默认全国
|
||||
});
|
||||
|
||||
geocoder.getLocation('北京市朝阳区阜通东大街6号', function(status, result) {
|
||||
if (status === 'complete' && result.info === 'OK') {
|
||||
// result.geocodes 是一个数组
|
||||
const { location, formattedAddress } = result.geocodes[0];
|
||||
console.log('坐标：', location.lng, location.lat);
|
||||
console.log('规范地址：', formattedAddress);
|
||||
|
||||
// 在地图上标记
|
||||
map.setCenter(location);
|
||||
new AMap.Marker({
|
||||
map: map,
|
||||
position: location
|
||||
});
|
||||
} else {
|
||||
console.error('地理编码失败');
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
## 3. 逆向地理编码 (坐标 -> 地址)
|
||||
|
||||
将经纬度坐标转换为详细地址信息。
|
||||
|
||||
```javascript
|
||||
const lnglat = [116.396574, 39.992706];
|
||||
|
||||
geocoder.getAddress(lnglat, function(status, result) {
|
||||
if (status === 'complete' && result.info === 'OK') {
|
||||
// result.regeocode 包含详细地址信息
|
||||
const address = result.regeocode.formattedAddress;
|
||||
console.log('地址：', address);
|
||||
|
||||
// 获取周边 POI、道路等详细信息
|
||||
const { roads, pois, aois } = result.regeocode.addressComponent;
|
||||
} else {
|
||||
console.error('逆地理编码失败');
|
||||
}
|
||||
});
|
||||
```
|
||||
## 完整示例
|
||||
|
||||
### 地址搜索定位
|
||||
|
||||
```javascript
|
||||
const map = new AMap.Map('container', {
|
||||
zoom: 14,
|
||||
center: [116.397, 39.909]
|
||||
});
|
||||
|
||||
const geocoder = new AMap.Geocoder({
|
||||
city: '北京',
|
||||
extensions: 'all'
|
||||
});
|
||||
|
||||
const input = document.getElementById('addressInput');
|
||||
const btn = document.getElementById('searchBtn');
|
||||
|
||||
btn.onclick = function() {
|
||||
const address = input.value.trim();
|
||||
if (!address) return;
|
||||
|
||||
geocoder.getLocation(address, function(status, result) {
|
||||
if (status === 'complete' && result.geocodes.length > 0) {
|
||||
const geocode = result.geocodes[0];
|
||||
|
||||
// 清除之前的标记
|
||||
map.clearMap();
|
||||
|
||||
// 添加标记
|
||||
const marker = new AMap.Marker({
|
||||
map: map,
|
||||
position: geocode.location
|
||||
});
|
||||
|
||||
// 信息窗体
|
||||
const infoWindow = new AMap.InfoWindow({
|
||||
content: `
|
||||
<div>
|
||||
<h4>${geocode.formattedAddress}</h4>
|
||||
<p>坐标: ${geocode.location.lng}, ${geocode.location.lat}</p>
|
||||
</div>
|
||||
`,
|
||||
offset: new AMap.Pixel(0, -30)
|
||||
});
|
||||
|
||||
marker.on('click', function() {
|
||||
infoWindow.open(map, marker.getPosition());
|
||||
});
|
||||
|
||||
// 移动视角
|
||||
map.setZoomAndCenter(16, geocode.location);
|
||||
|
||||
// 自动打开信息窗体
|
||||
infoWindow.open(map, geocode.location);
|
||||
} else {
|
||||
alert('未找到该地址');
|
||||
}
|
||||
});
|
||||
};
|
||||
```
|
||||
|
||||
### 点击地图获取地址
|
||||
|
||||
```javascript
|
||||
const map = new AMap.Map('container', {
|
||||
zoom: 14,
|
||||
center: [116.397, 39.909]
|
||||
});
|
||||
|
||||
const geocoder = new AMap.Geocoder({
|
||||
extensions: 'all'
|
||||
});
|
||||
|
||||
const infoWindow = new AMap.InfoWindow({
|
||||
offset: new AMap.Pixel(0, -15)
|
||||
});
|
||||
|
||||
map.on('click', function(e) {
|
||||
const lnglat = [e.lnglat.getLng(), e.lnglat.getLat()];
|
||||
|
||||
geocoder.getAddress(lnglat, function(status, result) {
|
||||
if (status === 'complete') {
|
||||
const address = result.regeocode.formattedAddress;
|
||||
|
||||
infoWindow.setContent(`
|
||||
<div style="padding: 10px;">
|
||||
<p><strong>地址:</strong> ${address}</p>
|
||||
<p><strong>坐标:</strong> ${lnglat[0].toFixed(6)}, ${lnglat[1].toFixed(6)}</p>
|
||||
</div>
|
||||
`);
|
||||
|
||||
infoWindow.open(map, e.lnglat);
|
||||
}
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. **城市限制**: 设置 city 可以提高编码准确度
|
||||
2. **详细信息**: 需要 POI、道路等信息时设置 `extensions: 'all'`
|
||||
3. **批量查询**: 批量查询需要设置 `batch: true`
|
||||
4. **结果数量**: 正向编码可能返回多个结果，需要根据 level 判断准确度
|
||||
5. **坐标格式**: 逆向编码支持数组 `[lng, lat]` 或 LngLat 对象
|
||||
@@ -0,0 +1,306 @@
|
||||
# 信息窗体 (InfoWindow)
|
||||
|
||||
信息窗体用于在地图上弹出一个浮层，展示详细信息。它可以绑定到特定位置或覆盖物上。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
// 1. 创建信息窗体
|
||||
const infoWindow = new AMap.InfoWindow({
|
||||
content: '<h4>标题</h4><div>这是信息窗体的内容</div>', // 支持 HTML 字符串或 DOM 元素
|
||||
anchor: 'bottom-center', // 锚点位置: top-left, top-center, top-right, middle-left, center, middle-right, bottom-left, bottom-center, bottom-right
|
||||
offset: new AMap.Pixel(0, -30), // 偏移量，避免遮挡标记
|
||||
isCustom: false, // 是否自定义外观 (设为 true 则不显示默认边框和关闭按钮)
|
||||
autoMove: true, // 是否自动调整地图视野使窗体可见
|
||||
closeWhenClickMap: true, // 点击地图其他空白处关闭窗体
|
||||
});
|
||||
|
||||
// 2. 打开信息窗体
|
||||
infoWindow.open(map, [116.397, 39.909]); // 在指定位置打开
|
||||
|
||||
// 或者绑定点击事件
|
||||
marker.on('click', function(e) {
|
||||
infoWindow.open(map, e.target.getPosition());
|
||||
});
|
||||
```
|
||||
|
||||
## 自定义样式
|
||||
|
||||
如果将 `isCustom` 设为 `true`，则可以完全控制窗体的外观。
|
||||
|
||||
```javascript
|
||||
const customInfoWindow = new AMap.InfoWindow({
|
||||
isCustom: true,
|
||||
content: createCustomContent(), // 返回一个 DOM 元素
|
||||
offset: new AMap.Pixel(16, -45)
|
||||
});
|
||||
|
||||
function createCustomContent() {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'my-info-window';
|
||||
div.innerHTML = `
|
||||
<div class="info-title">高德地图</div>
|
||||
<div class="info-body">自定义样式的窗体</div>
|
||||
<button onclick="closeInfoWindow()">关闭</button>
|
||||
`;
|
||||
return div;
|
||||
}
|
||||
|
||||
// 需要手动实现关闭逻辑
|
||||
window.closeInfoWindow = function() {
|
||||
map.clearInfoWindow();
|
||||
}
|
||||
```
|
||||
|
||||
## 更新内容
|
||||
|
||||
```javascript
|
||||
infoWindow.setContent('<div>新的内容</div>');
|
||||
infoWindow.setPosition([116.40, 39.90]);
|
||||
```
|
||||
## 配置项
|
||||
|
||||
| 参数 | 类型 | 默认值 | 说明 |
|
||||
| :--- | :--- | :--- | :--- |
|
||||
| content | String/HTMLElement | - | 内容，支持 HTML 字符串或 DOM 元素 |
|
||||
| anchor | String | 'bottom-center' | 锚点位置 |
|
||||
| offset | Pixel | - | 偏移量 |
|
||||
| isCustom | Boolean | false | 是否自定义样式 |
|
||||
| autoMove | Boolean | false | 是否自动调整地图视野 |
|
||||
| closeWhenClickMap | Boolean | false | 点击地图其他区域是否关闭 |
|
||||
| size | Size | - | 窗体大小 |
|
||||
| avoid | Array | - | 避让的像素区域 |
|
||||
|
||||
### 锚点位置 (anchor)
|
||||
|
||||
- `top-left` - 左上
|
||||
- `top-center` - 上中
|
||||
- `top-right` - 右上
|
||||
- `middle-left` - 左中
|
||||
- `center` - 中心
|
||||
- `middle-right` - 右中
|
||||
- `bottom-left` - 左下
|
||||
- `bottom-center` - 下中（默认）
|
||||
- `bottom-right` - 右下
|
||||
|
||||
## 与标记配合使用
|
||||
|
||||
```javascript
|
||||
const marker = new AMap.Marker({
|
||||
position: [116.397, 39.909],
|
||||
title: '点击查看详情'
|
||||
});
|
||||
map.add(marker);
|
||||
|
||||
const infoWindow = new AMap.InfoWindow({
|
||||
content: '<div>POI 详情信息</div>',
|
||||
offset: new AMap.Pixel(0, -30)
|
||||
});
|
||||
|
||||
marker.on('click', function(e) {
|
||||
infoWindow.open(map, e.target.getPosition());
|
||||
});
|
||||
```
|
||||
|
||||
## 自定义样式
|
||||
|
||||
设置 `isCustom: true` 完全控制窗体外观：
|
||||
|
||||
```javascript
|
||||
const customInfoWindow = new AMap.InfoWindow({
|
||||
isCustom: true,
|
||||
content: createCustomContent(),
|
||||
offset: new AMap.Pixel(16, -45)
|
||||
});
|
||||
|
||||
function createCustomContent() {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'custom-info-window';
|
||||
div.innerHTML = `
|
||||
<div class="info-header">
|
||||
<span class="info-title">高德地图</span>
|
||||
<span class="info-close" onclick="closeInfoWindow()">×</span>
|
||||
</div>
|
||||
<div class="info-body">
|
||||
<p>自定义样式的信息窗体</p>
|
||||
<button onclick="doSomething()">操作按钮</button>
|
||||
</div>
|
||||
<div class="info-arrow"></div>
|
||||
`;
|
||||
return div;
|
||||
}
|
||||
|
||||
// 全局关闭方法
|
||||
window.closeInfoWindow = function() {
|
||||
map.clearInfoWindow();
|
||||
};
|
||||
```
|
||||
|
||||
### 自定义样式 CSS
|
||||
|
||||
```css
|
||||
.custom-info-window {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||
min-width: 200px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.info-header {
|
||||
background: linear-gradient(135deg, #1890ff, #096dd9);
|
||||
color: #fff;
|
||||
padding: 12px 16px;
|
||||
border-radius: 8px 8px 0 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.info-title {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.info-close {
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.info-close:hover {
|
||||
background: rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
.info-body {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.info-arrow {
|
||||
position: absolute;
|
||||
bottom: -8px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 8px solid transparent;
|
||||
border-right: 8px solid transparent;
|
||||
border-top: 8px solid #fff;
|
||||
}
|
||||
```
|
||||
|
||||
## 动态更新内容
|
||||
|
||||
```javascript
|
||||
// 更新内容
|
||||
infoWindow.setContent('<div>新的内容</div>');
|
||||
|
||||
// 更新位置
|
||||
infoWindow.setPosition([116.40, 39.90]);
|
||||
|
||||
// 获取当前位置
|
||||
const position = infoWindow.getPosition();
|
||||
|
||||
// 获取是否打开
|
||||
const isOpen = infoWindow.getIsOpen();
|
||||
```
|
||||
|
||||
## 事件监听
|
||||
|
||||
```javascript
|
||||
infoWindow.on('open', function() {
|
||||
console.log('信息窗体已打开');
|
||||
});
|
||||
|
||||
infoWindow.on('close', function() {
|
||||
console.log('信息窗体已关闭');
|
||||
});
|
||||
|
||||
infoWindow.on('change', function() {
|
||||
console.log('信息窗体内容或位置已改变');
|
||||
});
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
```javascript
|
||||
const map = new AMap.Map('container', {
|
||||
zoom: 14,
|
||||
center: [116.397, 39.909]
|
||||
});
|
||||
|
||||
// POI 数据
|
||||
const pois = [
|
||||
{ name: '天安门', address: '北京市东城区', position: [116.397428, 39.90923] },
|
||||
{ name: '故宫', address: '北京市东城区景山前街4号', position: [116.397026, 39.918058] },
|
||||
{ name: '王府井', address: '北京市东城区', position: [116.410904, 39.913904] }
|
||||
];
|
||||
|
||||
// 创建信息窗体
|
||||
const infoWindow = new AMap.InfoWindow({
|
||||
isCustom: true,
|
||||
offset: new AMap.Pixel(0, -40)
|
||||
});
|
||||
|
||||
// 添加标记
|
||||
pois.forEach(poi => {
|
||||
const marker = new AMap.Marker({
|
||||
position: poi.position,
|
||||
title: poi.name
|
||||
});
|
||||
|
||||
marker.on('click', function(e) {
|
||||
const content = `
|
||||
<div class="poi-info-window">
|
||||
<div class="poi-header">
|
||||
<h3>${poi.name}</h3>
|
||||
<span class="close-btn" onclick="map.clearInfoWindow()">×</span>
|
||||
</div>
|
||||
<div class="poi-body">
|
||||
<p>${poi.address}</p>
|
||||
<div class="poi-actions">
|
||||
<button onclick="navigateTo(${poi.position[0]}, ${poi.position[1]})">导航</button>
|
||||
<button onclick="shareLocation('${poi.name}')">分享</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
infoWindow.setContent(content);
|
||||
infoWindow.open(map, e.target.getPosition());
|
||||
});
|
||||
|
||||
map.add(marker);
|
||||
});
|
||||
|
||||
// 全局方法
|
||||
window.navigateTo = function(lng, lat) {
|
||||
console.log('导航到:', lng, lat);
|
||||
};
|
||||
|
||||
window.shareLocation = function(name) {
|
||||
console.log('分享位置:', name);
|
||||
};
|
||||
```
|
||||
|
||||
## 关闭信息窗体
|
||||
|
||||
```javascript
|
||||
// 方式一：调用 close 方法
|
||||
infoWindow.close();
|
||||
|
||||
// 方式二：清除地图上的信息窗体
|
||||
map.clearInfoWindow();
|
||||
```
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. **同时只能打开一个**: 地图上同时只能打开一个信息窗体
|
||||
2. **自定义样式**: `isCustom: true` 时不显示默认的边框和关闭按钮
|
||||
3. **偏移量**: 根据标记图标大小调整 offset，避免遮挡
|
||||
4. **自动调整**: `autoMove: true` 可以自动调整地图视野使窗体可见
|
||||
5. **事件冒泡**: 窗体内的点击事件需要阻止冒泡，否则可能触发地图点击事件
|
||||
@@ -0,0 +1,78 @@
|
||||
# 官方图层 (Official Layers)
|
||||
|
||||
高德地图 JSAPI v2.0 内置了多种标准图层，开发者可以按需叠加使用。
|
||||
|
||||
## 1. 标准切片图层 (TileLayer)
|
||||
|
||||
基础的栅格瓦片图层。
|
||||
|
||||
```javascript
|
||||
// 默认标准图层
|
||||
const layer = new AMap.TileLayer();
|
||||
map.add(layer);
|
||||
```
|
||||
|
||||
### 衍生图层
|
||||
|
||||
- **卫星图层 (Satellite)**
|
||||
```javascript
|
||||
const satellite = new AMap.TileLayer.Satellite();
|
||||
map.add(satellite);
|
||||
```
|
||||
|
||||
- **路网图层 (RoadNet)**
|
||||
通常叠加在卫星图上使用，展示道路网络。
|
||||
```javascript
|
||||
const roadNet = new AMap.TileLayer.RoadNet();
|
||||
map.add(roadNet);
|
||||
```
|
||||
|
||||
- **实时路况图层 (Traffic)**
|
||||
展示实时的交通拥堵情况。
|
||||
```javascript
|
||||
const traffic = new AMap.TileLayer.Traffic({
|
||||
zIndex: 10,
|
||||
autoRefresh: true, // 是否自动刷新
|
||||
interval: 180, // 刷新间隔 (秒)
|
||||
});
|
||||
map.add(traffic);
|
||||
```
|
||||
|
||||
## 2. 3D 楼块图层 (Buildings)
|
||||
|
||||
用于展示 3D 建筑物模型，仅在 `viewMode: '3D'` 下有效。
|
||||
|
||||
```javascript
|
||||
const buildings = new AMap.Buildings({
|
||||
zooms: [16, 20], // 显示层级范围
|
||||
zIndex: 10,
|
||||
heightFactor: 2, // 楼块高度系数
|
||||
});
|
||||
map.add(buildings);
|
||||
|
||||
// 设置楼块样式
|
||||
buildings.setStyle({
|
||||
hideWithoutStyle: false, // 是否隐藏未设置样式的楼块
|
||||
areas: [{
|
||||
color1: 'red', // 顶面颜色
|
||||
color2: 'blue', // 侧面颜色
|
||||
path: [[116.403322, 39.920255], ...], // 围栏区域
|
||||
}]
|
||||
});
|
||||
```
|
||||
|
||||
## 3. 室内地图图层 (IndoorMap)
|
||||
|
||||
当缩放级别达到一定程度且地图中心位于支持室内地图的建筑（如大型商场、机场）时自动显示。
|
||||
|
||||
```javascript
|
||||
const indoor = new AMap.IndoorMap({
|
||||
alwaysShow: true, // 是否始终显示
|
||||
});
|
||||
map.add(indoor);
|
||||
|
||||
// 监听楼层切换
|
||||
indoor.on('floor_change', function(e) {
|
||||
console.log('当前楼层：', e.floor);
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,247 @@
|
||||
# 地图加载与初始化 (Map Initialization)
|
||||
|
||||
本指南介绍如何使用 `@amap/amap-jsapi-loader` 异步加载高德地图 JSAPI v2.0，并初始化地图实例。
|
||||
|
||||
## 前置条件
|
||||
|
||||
在加载地图前，**必须**先完成安全配置。请参考 [安全配置文档](./security.md)。
|
||||
|
||||
```javascript
|
||||
// 必须在加载前执行
|
||||
window._AMapSecurityConfig = {
|
||||
securityJsCode: '您的安全密钥',
|
||||
};
|
||||
```
|
||||
|
||||
## 1. 引入加载器
|
||||
使用 script 标签加载 loader.js：
|
||||
```bash
|
||||
<script src="https://webapi.amap.com/loader.js"></script>
|
||||
```
|
||||
|
||||
## 2. 异步加载 JSAPI
|
||||
|
||||
使用 `AMapLoader.load` 方法加载 API。
|
||||
|
||||
```javascript
|
||||
import AMapLoader from '@amap/amap-jsapi-loader';
|
||||
|
||||
AMapLoader.load({
|
||||
key: '您的Key', // 必填，申请的 Web 端开发者 Key
|
||||
version: '2.0', // 必填，指定版本号
|
||||
plugins: ['AMap.Scale'], // 预加载插件列表
|
||||
}).then((AMap) => {
|
||||
// JSAPI 加载完成，可以开始初始化地图
|
||||
initMap(AMap);
|
||||
}).catch((e) => {
|
||||
console.error('地图加载失败', e);
|
||||
});
|
||||
```
|
||||
|
||||
## 3. 进阶配置 (Advanced Configuration)
|
||||
|
||||
### 加载 Loca 数据可视化库
|
||||
Loca 是高德地图基于 WebGL 的高性能数据可视化库。需要在加载器中显式声明 `Loca` 配置。
|
||||
|
||||
```javascript
|
||||
AMapLoader.load({
|
||||
key: '您的Key',
|
||||
version: '2.0',
|
||||
Loca: {
|
||||
version: '2.0.0' // 指定 Loca 版本
|
||||
}
|
||||
}).then((AMap) => {
|
||||
const map = new AMap.Map('container');
|
||||
|
||||
// 初始化 Loca 容器
|
||||
const loca = new Loca.Container({
|
||||
map: map,
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
```
|
||||
|
||||
### 加载器参数详解
|
||||
|
||||
| 参数 | 类型 | 必填 | 说明 |
|
||||
| :--- | :--- | :--- | :--- |
|
||||
| `key` | String | 是 | 申请好的 Web 端开发者 Key |
|
||||
| `version` | String | 是 | 指定要加载的 JSAPI 版本，如 "2.0" |
|
||||
| `plugins` | Array | 否 | 需要预加载的插件列表，如 `['AMap.Scale', 'AMap.ToolBar']` |
|
||||
| `Loca` | Object | 否 | Loca 库配置，包含 `{ version: '2.0.0' }` |
|
||||
| `AMapUI` | Object | 否 | AMapUI 库配置，包含 `{ version: '1.1', plugins: [] }` |
|
||||
| `serviceHost` | String | 否 | 代理服务器地址（通常在安全配置中全局设置，此处也可覆盖） |
|
||||
|
||||
## 3. 初始化地图实例
|
||||
|
||||
创建 `AMap.Map` 实例，建议开启 3D 视图模式以获得最佳性能。
|
||||
|
||||
```javascript
|
||||
function initMap(AMap) {
|
||||
const map = new AMap.Map('container', {
|
||||
viewMode: '3D', // 开启 3D 模式 (推荐)
|
||||
zoom: 11, // 初始化缩放级别 [2, 20]
|
||||
center: [116.397428, 39.90923], // 初始化中心点坐标 [lng, lat]
|
||||
pitch: 45, // 俯仰角度，有效范围 [0, 83]
|
||||
rotation: 0, // 旋转角度
|
||||
mapStyle: 'amap://styles/normal', // 地图样式
|
||||
});
|
||||
|
||||
// 添加控件
|
||||
map.addControl(new AMap.Scale());
|
||||
}
|
||||
```
|
||||
### 常用配置项
|
||||
|
||||
| 参数 | 类型 | 默认值 | 说明 |
|
||||
| :--- | :--- | :--- | :--- |
|
||||
| viewMode | String | '2D' | 渲染模式：'2D' 或 '3D' |
|
||||
| zoom | Number | - | 初始缩放级别 |
|
||||
| center | Array | - | 初始中心点 [lng, lat] |
|
||||
| pitch | Number | 0 | 俯仰角度 (3D 模式有效) |
|
||||
| rotation | Number | 0 | 旋转角度 |
|
||||
| mapStyle | String | - | 地图样式 URL |
|
||||
| zooms | Array | [2, 20] | 缩放级别范围 |
|
||||
|
||||
## 4. 地图生命周期管理
|
||||
### 地图加载完成
|
||||
|
||||
```javascript
|
||||
map.on('complete', function() {
|
||||
console.log('地图加载完成');
|
||||
});
|
||||
```
|
||||
|
||||
### 销毁地图
|
||||
在组件卸载或不再需要地图时，务必调用 `destroy` 方法以释放 WebGL 上下文和内存资源。
|
||||
|
||||
```javascript
|
||||
// 销毁地图实例
|
||||
if (map) {
|
||||
map.destroy();
|
||||
map = null;
|
||||
}
|
||||
```
|
||||
## 5. 地图样式
|
||||
|
||||
### 官方主题样式
|
||||
|
||||
```javascript
|
||||
const map = new AMap.Map('container', {
|
||||
mapStyle: 'amap://styles/normal', // 标准
|
||||
// mapStyle: 'amap://styles/dark', // 幻影黑
|
||||
// mapStyle: 'amap://styles/light', // 月光银
|
||||
// mapStyle: 'amap://styles/whitesmoke',// 远山黛
|
||||
// mapStyle: 'amap://styles/fresh', // 草色青
|
||||
// mapStyle: 'amap://styles/grey', // 雅士灰
|
||||
// mapStyle: 'amap://styles/graffiti', // 涂鸦
|
||||
// mapStyle: 'amap://styles/macaron', // 马卡龙
|
||||
// mapStyle: 'amap://styles/blue', // 靛青蓝
|
||||
// mapStyle: 'amap://styles/darkblue', // 极夜蓝
|
||||
// mapStyle: 'amap://styles/wine', // 酱籽
|
||||
});
|
||||
|
||||
// 动态切换样式
|
||||
map.setMapStyle('amap://styles/dark');
|
||||
```
|
||||
|
||||
## 完整示例 (Vue 3)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div id="map-container" style="width: 100%; height: 500px;"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, onUnmounted, shallowRef } from 'vue';
|
||||
import AMapLoader from '@amap/amap-jsapi-loader';
|
||||
|
||||
const map = shallowRef(null); // 使用 shallowRef 避免深层响应式带来的性能损耗
|
||||
|
||||
onMounted(() => {
|
||||
window._AMapSecurityConfig = { securityJsCode: '您的安全密钥' };
|
||||
|
||||
AMapLoader.load({
|
||||
key: '您的Key',
|
||||
version: '2.0',
|
||||
plugins: ['AMap.Scale'], // 按需加载插件
|
||||
}).then((AMap) => {
|
||||
map.value = new AMap.Map('map-container', {
|
||||
viewMode: '3D',
|
||||
zoom: 12,
|
||||
center: [120.15, 30.28],
|
||||
});
|
||||
// 添加插件
|
||||
map.value.addControl(new AMap.Scale());
|
||||
}).catch(e => console.error(e));
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
map.value?.destroy();
|
||||
});
|
||||
</script>
|
||||
```
|
||||
## 5. 地图控件
|
||||
|
||||
```javascript
|
||||
// 比例尺
|
||||
map.addControl(new AMap.Scale());
|
||||
|
||||
// 工具条（缩放、定位）
|
||||
map.addControl(new AMap.ToolBar({
|
||||
position: 'RT' // 右上角
|
||||
}));
|
||||
|
||||
// 3D 控制（旋转、俯仰）
|
||||
map.addControl(new AMap.ControlBar({
|
||||
position: { right: '10px', top: '10px' }
|
||||
}));
|
||||
|
||||
// 鹰眼（缩略图）
|
||||
map.addControl(new AMap.HawkEye());
|
||||
|
||||
// 图层切换
|
||||
map.addControl(new AMap.MapType());
|
||||
```
|
||||
|
||||
## 完整示例 (React Hooks)
|
||||
|
||||
```jsx
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import AMapLoader from '@amap/amap-jsapi-loader';
|
||||
|
||||
export default function MapComponent() {
|
||||
const mapRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
// 安全密钥配置
|
||||
window._AMapSecurityConfig = { securityJsCode: '您的安全密钥' };
|
||||
|
||||
AMapLoader.load({
|
||||
key: '您的Key',
|
||||
version: '2.0',
|
||||
plugins: ['AMap.Scale'], // 预加载插件
|
||||
}).then((AMap) => {
|
||||
mapRef.current = new AMap.Map('map-container', {
|
||||
viewMode: '3D',
|
||||
zoom: 11,
|
||||
center: [116.397428, 39.90923],
|
||||
});
|
||||
|
||||
// 添加控件
|
||||
mapRef.current.addControl(new AMap.Scale());
|
||||
}).catch((e) => {
|
||||
console.error('地图加载失败', e);
|
||||
});
|
||||
|
||||
// 销毁地图
|
||||
return () => {
|
||||
mapRef.current?.destroy();
|
||||
};
|
||||
}, []);
|
||||
|
||||
return <div id="map-container" style={{ width: '100%', height: '500px' }} />;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,357 @@
|
||||
# 点标记 (Markers)
|
||||
|
||||
高德地图 JSAPI v2.0 提供了多种类型的点标记，适用于不同的业务场景。
|
||||
|
||||
## 1. 基础点标记 (Marker)
|
||||
|
||||
最常用的点标记，支持自定义图标或 DOM 内容。
|
||||
|
||||
```javascript
|
||||
// 默认蓝色水滴图标
|
||||
const marker = new AMap.Marker({
|
||||
position: [116.397, 39.909], // 位置
|
||||
icon: new AMap.Icon({
|
||||
size: new AMap.Size(40, 50),
|
||||
image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
|
||||
imageSize: new AMap.Size(40, 50),
|
||||
}),
|
||||
title: '北京', // 鼠标悬停文本
|
||||
});
|
||||
map.add(marker);
|
||||
|
||||
// 自定义图标
|
||||
const iconMarker = new AMap.Marker({
|
||||
position: [116.397, 39.909],
|
||||
icon: new AMap.Icon({
|
||||
size: new AMap.Size(40, 50),
|
||||
image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
|
||||
imageSize: new AMap.Size(40, 50),
|
||||
}),
|
||||
offset: new AMap.Pixel(-20, -50), // 锚点偏移
|
||||
});
|
||||
|
||||
// 自定义 DOM 内容 (灵活性最强，但性能消耗较高)
|
||||
const contentMarker = new AMap.Marker({
|
||||
position: [116.397, 39.909],
|
||||
content: '<div class="custom-marker">我的标记</div>',
|
||||
offset: new AMap.Pixel(-15, -15),
|
||||
});
|
||||
```
|
||||
### 自定义图标样式
|
||||
|
||||
以下是几种常用的 Marker 样式，可直接复制使用。
|
||||
|
||||
#### 带徽标的定位点
|
||||
|
||||
适用于用户头像、 Logo 等场景。
|
||||
|
||||
```javascript
|
||||
const marker = new AMap.Marker({
|
||||
position: [116.397, 39.909],
|
||||
content: `
|
||||
<div class="avatar-marker">
|
||||
<img src="https://example.com/avatar.jpg" alt="头像" />
|
||||
<span class="status online"></span>
|
||||
</div>
|
||||
`,
|
||||
offset: new AMap.Pixel(-20, -20),
|
||||
});
|
||||
```
|
||||
|
||||
```css
|
||||
.avatar-marker {
|
||||
position: relative;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
.avatar-marker img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #fff;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
object-fit: cover;
|
||||
}
|
||||
.avatar-marker .status {
|
||||
position: absolute;
|
||||
bottom: 2px;
|
||||
right: 2px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #fff;
|
||||
}
|
||||
.avatar-marker .status.online { background: #52c41a; }
|
||||
.avatar-marker .status.offline { background: #999; }
|
||||
.avatar-marker .status.busy { background: #f5222d; }
|
||||
```
|
||||
|
||||
#### 信息卡片式 Marker
|
||||
|
||||
适用于 POI 展示、信息等场景。
|
||||
|
||||
```javascript
|
||||
const marker = new AMap.Marker({
|
||||
position: [116.397, 39.909],
|
||||
content: `
|
||||
<div class="card-marker">
|
||||
<div class="card-content">
|
||||
<span class="card-price">¥288</span>
|
||||
<span class="card-unit">/晚</span>
|
||||
</div>
|
||||
<div class="card-arrow"></div>
|
||||
</div>
|
||||
`,
|
||||
offset: new AMap.Pixel(-40, -52),
|
||||
});
|
||||
```
|
||||
|
||||
```css
|
||||
.card-marker {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
.card-marker:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
.card-content {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 6px 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.card-price {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1890ff;
|
||||
}
|
||||
.card-unit {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
.card-arrow {
|
||||
position: absolute;
|
||||
bottom: -6px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
border-top: 6px solid #fff;
|
||||
}
|
||||
/* 选中状态 */
|
||||
.card-marker.active .card-content {
|
||||
background: #1890ff;
|
||||
}
|
||||
.card-marker.active .card-price,
|
||||
.card-marker.active .card-unit {
|
||||
color: #fff;
|
||||
}
|
||||
.card-marker.active .card-arrow {
|
||||
border-top-color: #1890ff;
|
||||
}
|
||||
```
|
||||
|
||||
#### 带数字序号的 Marker
|
||||
|
||||
适用于路线规划、排序展示等场景。
|
||||
|
||||
```javascript
|
||||
function createNumberMarker(number, isStart = false, isEnd = false) {
|
||||
let bgColor = '#1890ff';
|
||||
if (isStart) bgColor = '#52c41a';
|
||||
if (isEnd) bgColor = '#f5222d';
|
||||
|
||||
return new AMap.Marker({
|
||||
position: [116.397, 39.909],
|
||||
content: `
|
||||
<div class="number-marker" style="background: ${bgColor}">
|
||||
<span>${number}</span>
|
||||
</div>
|
||||
`,
|
||||
offset: new AMap.Pixel(-15, -15),
|
||||
});
|
||||
}
|
||||
|
||||
// 使用示例
|
||||
const startMarker = createNumberMarker('起', true);
|
||||
const endMarker = createNumberMarker('终', false, true);
|
||||
const waypoint = createNumberMarker(1);
|
||||
```
|
||||
|
||||
```css
|
||||
.number-marker {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
|
||||
border: 2px solid #fff;
|
||||
}
|
||||
```
|
||||
|
||||
#### 分类图标 Marker
|
||||
|
||||
适用于 POI 分类展示。
|
||||
|
||||
```javascript
|
||||
// 定义分类图标
|
||||
const categoryIcons = {
|
||||
restaurant: { icon: '🍽️', color: '#fa8c16' },
|
||||
hotel: { icon: '🏨', color: '#1890ff' },
|
||||
scenic: { icon: '🏞️', color: '#52c41a' },
|
||||
shopping: { icon: '🛍️', color: '#eb2f96' },
|
||||
hospital: { icon: '🏥', color: '#f5222d' },
|
||||
};
|
||||
|
||||
function createCategoryMarker(category, name) {
|
||||
const { icon, color } = categoryIcons[category] || { icon: '📍', color: '#1890ff' };
|
||||
|
||||
return new AMap.Marker({
|
||||
position: [116.397, 39.909],
|
||||
content: `
|
||||
<div class="category-marker" style="--marker-color: ${color}">
|
||||
<div class="marker-icon">${icon}</div>
|
||||
<div class="marker-label">${name}</div>
|
||||
<div class="marker-arrow"></div>
|
||||
</div>
|
||||
`,
|
||||
offset: new AMap.Pixel(-50, -58),
|
||||
});
|
||||
}
|
||||
|
||||
// 使用示例
|
||||
const restaurantMarker = createCategoryMarker('restaurant', '海底捞火锅');
|
||||
```
|
||||
|
||||
```css
|
||||
.category-marker {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.marker-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: var(--marker-color);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
border: 2px solid #fff;
|
||||
}
|
||||
.marker-label {
|
||||
margin-top: 4px;
|
||||
padding: 2px 8px;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
color: #333;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
||||
white-space: nowrap;
|
||||
max-width: 100px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.marker-arrow {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 5px solid transparent;
|
||||
border-right: 5px solid transparent;
|
||||
border-top: 5px solid #fff;
|
||||
}
|
||||
```
|
||||
|
||||
## 2. 带文字标记
|
||||
|
||||
```javascript
|
||||
const marker = new AMap.Marker({
|
||||
position: [116.397, 39.909],
|
||||
label: {
|
||||
content: '北京天安门',
|
||||
direction: 'top', // top, right, bottom, left, center
|
||||
offset: new AMap.Pixel(0, -5),
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## 2. 海量标注 (LabelMarker)
|
||||
|
||||
**强烈推荐**用于海量点位（千级/万级以上）展示。它是基于 WebGL 的矢量标注，支持文字和图标避让，性能极佳。
|
||||
|
||||
> **注意**：必须配合 `LabelsLayer` 图层使用。
|
||||
|
||||
```javascript
|
||||
// 1. 创建图层
|
||||
const layer = new AMap.LabelsLayer({
|
||||
zooms: [3, 20],
|
||||
zIndex: 1000,
|
||||
collision: true, // 开启碰撞避让
|
||||
allowCollision: false, // 允许被避让隐藏
|
||||
});
|
||||
map.add(layer);
|
||||
|
||||
// 2. 创建 LabelMarker
|
||||
const labelMarker = new AMap.LabelMarker({
|
||||
position: [116.397, 39.909],
|
||||
icon: {
|
||||
type: 'image',
|
||||
image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
|
||||
size: [6, 10],
|
||||
anchor: 'bottom-center',
|
||||
},
|
||||
text: {
|
||||
content: '北京天安门',
|
||||
direction: 'top',
|
||||
style: {
|
||||
fontSize: 12,
|
||||
fillColor: '#fff',
|
||||
strokeColor: '#000',
|
||||
strokeWidth: 1,
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 3. 添加到图层
|
||||
layer.add(labelMarker);
|
||||
```
|
||||
|
||||
## 3. 灵活点标记 (ElasticMarker)
|
||||
|
||||
适用于随地图缩放需要动态改变样式或大小的场景。
|
||||
|
||||
```javascript
|
||||
const elasticMarker = new AMap.ElasticMarker({
|
||||
position: [116.397, 39.909],
|
||||
zooms: [14, 20],
|
||||
styles: [{
|
||||
icon: {
|
||||
img: '...',
|
||||
size: [16, 16],
|
||||
ancher: [8, 16],
|
||||
fitZoom: 14, // 适用于 zoom >= 14
|
||||
scaleFactor: 2, // 缩放比例
|
||||
}
|
||||
}]
|
||||
});
|
||||
map.add(elasticMarker);
|
||||
```
|
||||
|
||||
## 常用操作
|
||||
|
||||
```javascript
|
||||
marker.setPosition([lng, lat]); // 更新位置
|
||||
marker.setMap(null); // 从地图移除
|
||||
marker.hide(); // 隐藏
|
||||
marker.show(); // 显示
|
||||
```
|
||||
@@ -0,0 +1,629 @@
|
||||
# 路径规划 (Routing)
|
||||
|
||||
高德地图提供了驾车、步行、骑行和公交等多种路径规划服务。
|
||||
|
||||
## 1. 驾车路线规划 (Driving)
|
||||
|
||||
支持策略配置（如躲避拥堵、不走高速等）和多点路径规划。
|
||||
|
||||
```javascript
|
||||
// 构造路线规划类
|
||||
const driving = new AMap.Driving({
|
||||
map: map, // 绑定地图，自动绘制路线
|
||||
panel: 'panel-id', // 结果列表的容器 ID (可选)
|
||||
policy: AMap.DrivingPolicy.LEAST_TIME, // 策略：最快
|
||||
});
|
||||
|
||||
// 根据经纬度规划
|
||||
// 参数：起点，终点，(可选)途经点，回调
|
||||
driving.search(
|
||||
[116.379028, 39.865042], // 起点
|
||||
[116.427281, 39.903719], // 终点
|
||||
function(status, result) {
|
||||
if (status === 'complete') {
|
||||
console.log('绘制驾车路线完成');
|
||||
} else {
|
||||
console.error('获取驾车数据失败：' + result);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// 根据关键字规划
|
||||
driving.search([
|
||||
{keyword: '北京站', city: '北京'},
|
||||
{keyword: '北京大学', city: '北京'}
|
||||
], function(status, result) {
|
||||
// ...
|
||||
});
|
||||
// 根据关键字规划
|
||||
driving.search([
|
||||
{keyword: '北京站', city: '北京'},
|
||||
{keyword: '北京大学', city: '北京'}
|
||||
], function(status, result) {
|
||||
// ...
|
||||
});
|
||||
```
|
||||
## 完整示例
|
||||
|
||||
```javascript
|
||||
const map = new AMap.Map('container', {
|
||||
zoom: 12,
|
||||
center: [116.397, 39.909]
|
||||
});
|
||||
|
||||
const driving = new AMap.Driving({
|
||||
policy: AMap.DrivingPolicy.LEAST_TIME,
|
||||
showTraffic: true
|
||||
});
|
||||
|
||||
function planDriving(start, end) {
|
||||
// 清除之前的路线
|
||||
driving.clear();
|
||||
|
||||
driving.search(start, end, function(status, result) {
|
||||
if (status === 'complete') {
|
||||
const route = result.routes[0];
|
||||
|
||||
// 提取路径点
|
||||
const path = [];
|
||||
route.steps.forEach(step => {
|
||||
path.push(...step.path);
|
||||
});
|
||||
|
||||
// 绘制路线
|
||||
const polyline = new AMap.Polyline({
|
||||
path: path,
|
||||
strokeColor: '#1890ff',
|
||||
strokeWeight: 6,
|
||||
strokeOpacity: 0.9,
|
||||
lineJoin: 'round',
|
||||
lineCap: 'round'
|
||||
});
|
||||
map.add(polyline);
|
||||
|
||||
// 显示信息
|
||||
showRouteInfo(route);
|
||||
|
||||
// 调整视野
|
||||
map.setFitView();
|
||||
} else {
|
||||
alert('驾车规划失败：' + result);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function showRouteInfo(route) {
|
||||
const distance = (route.distance / 1000).toFixed(1) + ' 公里';
|
||||
const time = formatTime(route.time);
|
||||
const tolls = route.tolls ? route.tolls + ' 元' : '无';
|
||||
|
||||
console.log(`距离: ${distance}, 时间: ${time}, 过路费: ${tolls}`);
|
||||
}
|
||||
|
||||
function formatTime(seconds) {
|
||||
const hours = Math.floor(seconds / 3600);
|
||||
const minutes = Math.round((seconds % 3600) / 60);
|
||||
if (hours > 0) {
|
||||
return `${hours} 小时 ${minutes} 分钟`;
|
||||
}
|
||||
return `${minutes} 分钟`;
|
||||
}
|
||||
|
||||
// 使用
|
||||
planDriving([116.379028, 39.865042], [116.427281, 39.903719]);
|
||||
```
|
||||
|
||||
## 自定义路线样式
|
||||
|
||||
```javascript
|
||||
driving.search(start, end, function(status, result) {
|
||||
if (status === 'complete') {
|
||||
const route = result.routes[0];
|
||||
const path = [];
|
||||
|
||||
route.steps.forEach(step => {
|
||||
path.push(...step.path);
|
||||
});
|
||||
|
||||
// 底层阴影
|
||||
const shadowLine = new AMap.Polyline({
|
||||
path: path,
|
||||
strokeColor: '#0d47a1',
|
||||
strokeWeight: 10,
|
||||
strokeOpacity: 0.5
|
||||
});
|
||||
|
||||
// 主路线
|
||||
const mainLine = new AMap.Polyline({
|
||||
path: path,
|
||||
strokeColor: '#1890ff',
|
||||
strokeWeight: 6,
|
||||
strokeOpacity: 0.9
|
||||
});
|
||||
|
||||
map.add([shadowLine, mainLine]);
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
## 清除路线
|
||||
|
||||
```javascript
|
||||
// 使用内置方法
|
||||
driving.clear();
|
||||
|
||||
// 或手动移除
|
||||
map.remove(polyline);
|
||||
```
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. **起终点格式**: 支持经纬度数组或关键字对象
|
||||
2. **途经点限制**: 最多支持 16 个途经点
|
||||
3. **路况显示**: 设置 `showTraffic: true` 显示实时路况
|
||||
4. **车牌限行**: 设置 `number` 参数可判断限行路段
|
||||
5. **自动渲染**: 设置 map 和 panel 后会自动渲染路线和结果面板
|
||||
|
||||
## 2. 其他出行方式
|
||||
|
||||
接口调用方式与 `Driving` 类似。
|
||||
|
||||
### 步行 (Walking)
|
||||
|
||||
```javascript
|
||||
const walking = new AMap.Walking({
|
||||
map: map,
|
||||
panel: 'panel'
|
||||
});
|
||||
|
||||
walking.search([116.399028, 39.845042], [116.436281, 39.880719], function(status, result) {});
|
||||
```
|
||||
## 完整示例
|
||||
|
||||
```javascript
|
||||
const map = new AMap.Map('container', {
|
||||
zoom: 14,
|
||||
center: [116.397, 39.909]
|
||||
});
|
||||
|
||||
const walking = new AMap.Walking();
|
||||
|
||||
function planWalking(start, end) {
|
||||
walking.search(start, end, function(status, result) {
|
||||
if (status === 'complete') {
|
||||
const route = result.routes[0];
|
||||
|
||||
// 提取路径点
|
||||
const path = [];
|
||||
route.steps.forEach(step => {
|
||||
path.push(...step.path);
|
||||
});
|
||||
|
||||
// 绘制路线（虚线样式）
|
||||
const polyline = new AMap.Polyline({
|
||||
path: path,
|
||||
strokeColor: '#52c41a',
|
||||
strokeWeight: 5,
|
||||
strokeOpacity: 0.9,
|
||||
strokeStyle: 'dashed', // 虚线
|
||||
strokeDasharray: [10, 5]
|
||||
});
|
||||
map.add(polyline);
|
||||
|
||||
// 添加起点终点标记
|
||||
addStartEndMarkers(start, end);
|
||||
|
||||
// 显示信息
|
||||
const distance = formatDistance(route.distance);
|
||||
const time = formatTime(route.time);
|
||||
console.log(`步行距离: ${distance}, 预计时间: ${time}`);
|
||||
|
||||
// 调整视野
|
||||
map.setFitView();
|
||||
} else {
|
||||
alert('步行规划失败');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function addStartEndMarkers(start, end) {
|
||||
// 起点
|
||||
new AMap.Marker({
|
||||
map: map,
|
||||
position: start,
|
||||
content: createMarkerContent('起', '#52c41a'),
|
||||
offset: new AMap.Pixel(-16, -40)
|
||||
});
|
||||
|
||||
// 终点
|
||||
new AMap.Marker({
|
||||
map: map,
|
||||
position: end,
|
||||
content: createMarkerContent('终', '#f5222d'),
|
||||
offset: new AMap.Pixel(-16, -40)
|
||||
});
|
||||
}
|
||||
|
||||
function createMarkerContent(text, color) {
|
||||
return `
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="40" viewBox="0 0 32 40">
|
||||
<path d="M16 0C7.163 0 0 7.163 0 16c0 12 16 24 16 24s16-12 16-24C32 7.163 24.837 0 16 0z" fill="${color}"/>
|
||||
<circle cx="16" cy="14" r="6" fill="#fff"/>
|
||||
<text x="16" y="18" text-anchor="middle" fill="${color}" font-size="10" font-weight="bold">${text}</text>
|
||||
</svg>
|
||||
`;
|
||||
}
|
||||
|
||||
function formatDistance(distance) {
|
||||
if (distance < 1000) {
|
||||
return Math.round(distance) + ' 米';
|
||||
}
|
||||
return (distance / 1000).toFixed(1) + ' 公里';
|
||||
}
|
||||
|
||||
function formatTime(seconds) {
|
||||
if (seconds < 60) {
|
||||
return Math.round(seconds) + ' 秒';
|
||||
}
|
||||
return Math.round(seconds / 60) + ' 分钟';
|
||||
}
|
||||
|
||||
// 使用
|
||||
planWalking([116.379028, 39.865042], [116.385281, 39.870719]);
|
||||
```
|
||||
|
||||
### 骑行 (Riding)
|
||||
|
||||
```javascript
|
||||
const riding = new AMap.Riding({
|
||||
map: map
|
||||
});
|
||||
|
||||
riding.search([116.399028, 39.845042], [116.436281, 39.880719]);
|
||||
```
|
||||
## 完整示例
|
||||
|
||||
```javascript
|
||||
const map = new AMap.Map('container', {
|
||||
zoom: 13,
|
||||
center: [116.397, 39.909]
|
||||
});
|
||||
|
||||
const riding = new AMap.Riding();
|
||||
|
||||
function planRiding(start, end) {
|
||||
riding.search(start, end, function(status, result) {
|
||||
if (status === 'complete') {
|
||||
const route = result.routes[0];
|
||||
|
||||
// 提取路径点
|
||||
const path = [];
|
||||
route.rides.forEach(ride => {
|
||||
path.push(...ride.path);
|
||||
});
|
||||
|
||||
// 绘制路线（橙色，表示骑行）
|
||||
const polyline = new AMap.Polyline({
|
||||
path: path,
|
||||
strokeColor: '#fa8c16',
|
||||
strokeWeight: 5,
|
||||
strokeOpacity: 0.9,
|
||||
lineJoin: 'round',
|
||||
lineCap: 'round'
|
||||
});
|
||||
map.add(polyline);
|
||||
|
||||
// 添加起点终点标记
|
||||
addStartEndMarkers(start, end);
|
||||
|
||||
// 显示信息
|
||||
showRouteInfo(route);
|
||||
|
||||
// 调整视野
|
||||
map.setFitView();
|
||||
} else {
|
||||
alert('骑行规划失败');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function addStartEndMarkers(start, end) {
|
||||
// 起点
|
||||
new AMap.Marker({
|
||||
map: map,
|
||||
position: start,
|
||||
content: createBikeMarker('起', '#52c41a'),
|
||||
offset: new AMap.Pixel(-16, -40)
|
||||
});
|
||||
|
||||
// 终点
|
||||
new AMap.Marker({
|
||||
map: map,
|
||||
position: end,
|
||||
content: createBikeMarker('终', '#fa541c'),
|
||||
offset: new AMap.Pixel(-16, -40)
|
||||
});
|
||||
}
|
||||
|
||||
function createBikeMarker(text, color) {
|
||||
return `
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="40" viewBox="0 0 32 40">
|
||||
<path d="M16 0C7.163 0 0 7.163 0 16c0 12 16 24 16 24s16-12 16-24C32 7.163 24.837 0 16 0z" fill="${color}"/>
|
||||
<circle cx="16" cy="14" r="6" fill="#fff"/>
|
||||
<text x="16" y="18" text-anchor="middle" fill="${color}" font-size="10" font-weight="bold">${text}</text>
|
||||
</svg>
|
||||
`;
|
||||
}
|
||||
|
||||
function showRouteInfo(route) {
|
||||
const distance = formatDistance(route.distance);
|
||||
const time = formatTime(route.time);
|
||||
|
||||
// 估算消耗卡路里（约 30 卡/公里）
|
||||
const calories = Math.round(route.distance / 1000 * 30);
|
||||
|
||||
console.log(`
|
||||
骑行距离: ${distance}
|
||||
预计时间: ${time}
|
||||
预计消耗: ${calories} 卡路里
|
||||
`);
|
||||
}
|
||||
|
||||
function formatDistance(distance) {
|
||||
if (distance < 1000) {
|
||||
return Math.round(distance) + ' 米';
|
||||
}
|
||||
return (distance / 1000).toFixed(1) + ' 公里';
|
||||
}
|
||||
|
||||
function formatTime(seconds) {
|
||||
const hours = Math.floor(seconds / 3600);
|
||||
const minutes = Math.round((seconds % 3600) / 60);
|
||||
if (hours > 0) {
|
||||
return `${hours} 小时 ${minutes} 分钟`;
|
||||
}
|
||||
return `${minutes} 分钟`;
|
||||
}
|
||||
|
||||
// 使用
|
||||
planRiding([116.379028, 39.865042], [116.420281, 39.890719]);
|
||||
```
|
||||
|
||||
## 自定义路线样式
|
||||
|
||||
```javascript
|
||||
// 橙色渐变效果（骑行风格）
|
||||
const colors = ['#fa8c16', '#ffa940', '#ffc069'];
|
||||
|
||||
riding.search(start, end, function(status, result) {
|
||||
if (status === 'complete') {
|
||||
const route = result.routes[0];
|
||||
const path = [];
|
||||
|
||||
route.rides.forEach(ride => {
|
||||
path.push(...ride.path);
|
||||
});
|
||||
|
||||
// 底层阴影
|
||||
const shadowLine = new AMap.Polyline({
|
||||
path: path,
|
||||
strokeColor: '#d46b08',
|
||||
strokeWeight: 8,
|
||||
strokeOpacity: 0.4
|
||||
});
|
||||
|
||||
// 主路线
|
||||
const mainLine = new AMap.Polyline({
|
||||
path: path,
|
||||
strokeColor: '#fa8c16',
|
||||
strokeWeight: 5,
|
||||
strokeOpacity: 0.9,
|
||||
lineJoin: 'round',
|
||||
lineCap: 'round'
|
||||
});
|
||||
|
||||
map.add([shadowLine, mainLine]);
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
## 电动车模式
|
||||
|
||||
```javascript
|
||||
const riding = new AMap.Riding({
|
||||
policy: 1 // 1 表示电动车
|
||||
});
|
||||
|
||||
riding.search(start, end, function(status, result) {
|
||||
// 电动车路线规划
|
||||
});
|
||||
```
|
||||
|
||||
## 清除路线
|
||||
|
||||
```javascript
|
||||
riding.clear();
|
||||
```
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. **路径特点**: 骑行路线会优先选择非机动车道、自行车道
|
||||
2. **速度估算**: 默认按照 15km/h（普通自行车）或 20km/h（电动车）估算
|
||||
3. **距离限制**: 骑行规划适合中短距离，过长距离可能无结果
|
||||
4. **颜色区分**: 建议使用橙色与驾车（蓝色）、步行（绿色）路线区分
|
||||
5. **上下坡**: 骑行路线会尽量避免陡坡路段
|
||||
|
||||
### 公交 (Transfer)
|
||||
|
||||
```javascript
|
||||
const transfer = new AMap.Transfer({
|
||||
map: map,
|
||||
city: '北京市',
|
||||
policy: AMap.TransferPolicy.LEAST_TIME // 最快捷模式
|
||||
});
|
||||
|
||||
transfer.search([116.291, 39.887], [116.436, 39.880], function(status, result) {});
|
||||
```
|
||||
## 完整示例
|
||||
|
||||
```javascript
|
||||
const map = new AMap.Map('container', {
|
||||
zoom: 12,
|
||||
center: [116.397, 39.909]
|
||||
});
|
||||
|
||||
const transfer = new AMap.Transfer({
|
||||
city: '北京市',
|
||||
policy: AMap.TransferPolicy.LEAST_TIME
|
||||
});
|
||||
|
||||
function planTransit(start, end) {
|
||||
transfer.search(start, end, function(status, result) {
|
||||
if (status === 'complete' && result.plans && result.plans.length > 0) {
|
||||
const plan = result.plans[0]; // 取第一个方案
|
||||
|
||||
// 遍历每个段落
|
||||
plan.segments.forEach((segment, index) => {
|
||||
// 乘车段
|
||||
if (segment.transit && segment.transit.path) {
|
||||
const polyline = new AMap.Polyline({
|
||||
path: segment.transit.path,
|
||||
strokeColor: '#1890ff',
|
||||
strokeWeight: 6,
|
||||
strokeOpacity: 0.9
|
||||
});
|
||||
map.add(polyline);
|
||||
|
||||
// 添加上下车站标记
|
||||
addStationMarker(segment.transit.on_station, '上');
|
||||
addStationMarker(segment.transit.off_station, '下');
|
||||
}
|
||||
|
||||
// 步行段
|
||||
if (segment.walking && segment.walking.path) {
|
||||
const polyline = new AMap.Polyline({
|
||||
path: segment.walking.path,
|
||||
strokeColor: '#52c41a',
|
||||
strokeWeight: 4,
|
||||
strokeOpacity: 0.8,
|
||||
strokeStyle: 'dashed'
|
||||
});
|
||||
map.add(polyline);
|
||||
}
|
||||
});
|
||||
|
||||
// 显示方案信息
|
||||
showPlanInfo(plan);
|
||||
|
||||
// 调整视野
|
||||
map.setFitView();
|
||||
} else {
|
||||
alert('公交规划失败');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function addStationMarker(station, type) {
|
||||
if (!station) return;
|
||||
|
||||
new AMap.Marker({
|
||||
map: map,
|
||||
position: station.location,
|
||||
content: `<div style="
|
||||
background: ${type === '上' ? '#1890ff' : '#fa541c'};
|
||||
color: #fff;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
">${type} ${station.name}</div>`,
|
||||
offset: new AMap.Pixel(-20, -10)
|
||||
});
|
||||
}
|
||||
|
||||
function showPlanInfo(plan) {
|
||||
const distance = formatDistance(plan.distance);
|
||||
const time = formatTime(plan.time);
|
||||
const cost = plan.cost ? plan.cost + ' 元' : '未知';
|
||||
const walkDistance = formatDistance(plan.walking_distance);
|
||||
|
||||
console.log(`
|
||||
总距离: ${distance}
|
||||
预计时间: ${time}
|
||||
票价: ${cost}
|
||||
步行距离: ${walkDistance}
|
||||
`);
|
||||
|
||||
// 显示换乘详情
|
||||
plan.segments.forEach((segment, index) => {
|
||||
if (segment.transit) {
|
||||
const t = segment.transit;
|
||||
console.log(`第${index + 1}段: ${t.name} (${t.on_station.name} → ${t.off_station.name})`);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function formatDistance(distance) {
|
||||
if (distance < 1000) {
|
||||
return Math.round(distance) + ' 米';
|
||||
}
|
||||
return (distance / 1000).toFixed(1) + ' 公里';
|
||||
}
|
||||
|
||||
function formatTime(seconds) {
|
||||
const hours = Math.floor(seconds / 3600);
|
||||
const minutes = Math.round((seconds % 3600) / 60);
|
||||
if (hours > 0) {
|
||||
return `${hours} 小时 ${minutes} 分钟`;
|
||||
}
|
||||
return `${minutes} 分钟`;
|
||||
}
|
||||
|
||||
// 使用
|
||||
planTransit([116.379028, 39.865042], [116.527281, 39.950719]);
|
||||
```
|
||||
|
||||
## 显示多个方案
|
||||
|
||||
```javascript
|
||||
transfer.search(start, end, function(status, result) {
|
||||
if (status === 'complete' && result.plans) {
|
||||
// 显示所有方案供用户选择
|
||||
result.plans.forEach((plan, index) => {
|
||||
const info = {
|
||||
index: index + 1,
|
||||
time: formatTime(plan.time),
|
||||
cost: plan.cost + ' 元',
|
||||
transfers: plan.segments.filter(s => s.transit).length - 1 // 换乘次数
|
||||
};
|
||||
console.log(`方案${info.index}: ${info.time}, ${info.cost}, 换乘${info.transfers}次`);
|
||||
});
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
## 清除路线
|
||||
|
||||
```javascript
|
||||
transfer.clear();
|
||||
```
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. **城市参数必填**: Transfer 必须指定城市参数
|
||||
2. **跨城市**: 不支持跨城市公交规划
|
||||
3. **换乘策略**: 不同策略会返回不同的方案
|
||||
4. **夜班车**: 设置 `nightflag: true` 计算夜班车路线
|
||||
5. **多方案**: 通常会返回多个方案，可供用户选择
|
||||
6. **路径绘制**: 需要分别处理乘车段和步行段
|
||||
|
||||
|
||||
## 3. 拖拽导航
|
||||
|
||||
开启 `showTraffic` 可显示实时路况，部分插件支持拖拽修改路径。
|
||||
|
||||
```javascript
|
||||
const driving = new AMap.Driving({
|
||||
map: map,
|
||||
showTraffic: true, // 显示路况
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,104 @@
|
||||
# 搜索服务 (Search)
|
||||
|
||||
搜索服务主要包含 POI 搜索 (`PlaceSearch`) 和 输入提示 (`AutoComplete`)。
|
||||
|
||||
## 1. 输入提示 (AutoComplete)
|
||||
|
||||
根据输入关键字提示匹配信息，通常与搜索组合使用。
|
||||
|
||||
```javascript
|
||||
const autoOptions = {
|
||||
city: '北京', // 限制城市
|
||||
input: 'tipinput' // 绑定输入框的 ID，自动监听输入
|
||||
};
|
||||
|
||||
const autoComplete = new AMap.AutoComplete(autoOptions);
|
||||
|
||||
// 监听选中事件
|
||||
autoComplete.on('select', function(e) {
|
||||
console.log('选中：', e.poi.name);
|
||||
// 选中后通常调用 PlaceSearch 进行详细搜索
|
||||
placeSearch.search(e.poi.name);
|
||||
});
|
||||
```
|
||||
|
||||
## 2. POI 搜索 (PlaceSearch)
|
||||
|
||||
查询兴趣点（POI）信息，如餐厅、酒店、景点等。
|
||||
|
||||
### 基础配置
|
||||
|
||||
```javascript
|
||||
const placeSearch = new AMap.PlaceSearch({
|
||||
map: map, // 结果自动展示在地图上
|
||||
panel: 'panel', // 结果列表容器
|
||||
pageSize: 5, // 每页结果数
|
||||
pageIndex: 1, // 当前页码
|
||||
city: '010', // 兴趣点城市
|
||||
citylimit: true, // 是否强制限制在设置的城市内
|
||||
});
|
||||
```
|
||||
|
||||
### 搜索方式
|
||||
|
||||
#### 关键字搜索
|
||||
|
||||
```javascript
|
||||
placeSearch.search('北京大学', function(status, result) {
|
||||
// result.poiList.pois 包含 POI 数组
|
||||
});
|
||||
```
|
||||
|
||||
#### 周边搜索 (NearBy)
|
||||
|
||||
查询中心点周边的 POI。
|
||||
|
||||
```javascript
|
||||
const center = [116.405467, 39.907761];
|
||||
const radius = 500; // 半径 (米)
|
||||
const type = '餐饮服务'; // POI 类型
|
||||
|
||||
placeSearch.searchNearBy(type, center, radius, function(status, result) {
|
||||
// ...
|
||||
});
|
||||
```
|
||||
|
||||
#### 多边形内搜索 (InBounds)
|
||||
|
||||
查询矩形或多边形范围内的 POI。
|
||||
|
||||
```javascript
|
||||
const polygon = new AMap.Polygon({
|
||||
path: [[116.39, 39.91], [116.41, 39.91], [116.41, 39.93], [116.39, 39.93]]
|
||||
});
|
||||
|
||||
placeSearch.searchInBounds('酒店', polygon, function(status, result) {
|
||||
// ...
|
||||
});
|
||||
```
|
||||
## POI 类型编码
|
||||
|
||||
常用类型编码示例：
|
||||
|
||||
| 编码 | 类型 |
|
||||
| :--- | :--- |
|
||||
| 050000 | 餐饮服务 |
|
||||
| 060000 | 购物服务 |
|
||||
| 070000 | 生活服务 |
|
||||
| 080000 | 体育休闲服务 |
|
||||
| 090000 | 医疗保健服务 |
|
||||
| 100000 | 住宿服务 |
|
||||
| 110000 | 风景名胜 |
|
||||
| 120000 | 商务住宅 |
|
||||
| 130000 | 政府机构及社会团体 |
|
||||
| 140000 | 科教文化服务 |
|
||||
| 150000 | 交通设施服务 |
|
||||
| 160000 | 金融保险服务 |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. **城市设置**: 不设置 city 时默认全国搜索
|
||||
2. **结果数量**: pageSize 最大为 50
|
||||
3. **详细信息**: 需要电话、网址等信息时设置 `extensions: 'all'`
|
||||
4. **距离字段**: 只有周边搜索时才有 distance 字段
|
||||
5. **自动渲染**: 设置 map 和 panel 后会自动渲染结果，无需手动处理
|
||||
@@ -0,0 +1,162 @@
|
||||
# 安全配置 (Security Configuration)
|
||||
|
||||
自 2021 年 12 月 02 日起，高德地图 JSAPI v2.0 强制要求进行安全密钥配置，否则将无法正常加载地图或调用插件。
|
||||
|
||||
## 配置原理
|
||||
|
||||
为了提升密钥安全性，JSAPI v2.0 引入了“安全密钥”机制。开发者需要配合 `key` (用户 Key) 和 `securityJsCode` (安全密钥) 使用。
|
||||
|
||||
- **Key (用户 Key)**:用于标识开发者身份，明文传递。
|
||||
- **SecurityJsCode (安全密钥)**: 用于后端验证，不应在生产环境前端明文暴露。
|
||||
|
||||
## 配置方式
|
||||
|
||||
### 方式一：明文设置（仅限开发环境）
|
||||
|
||||
在开发阶段，为方便调试，可以直接在前端代码中设置 `securityJsCode`。
|
||||
**注意：请确保在调用 `AMapLoader.load` 之前设置。**
|
||||
|
||||
```javascript
|
||||
window._AMapSecurityConfig = {
|
||||
securityJsCode: '您的安全密钥', // 必填，从高德控制台申请
|
||||
};
|
||||
```
|
||||
|
||||
### 方式二：代理转发（生产环境推荐）
|
||||
|
||||
在生产环境中，为了避免安全密钥泄露，强烈建议使用代理服务器转发请求。通过配置 `serviceHost`，将地图 API 请求转发到您的后端服务，再由后端服务附带安全密钥请求高德接口。
|
||||
|
||||
#### 1. 前端配置
|
||||
设置 `serviceHost` 指向您的代理服务地址。
|
||||
|
||||
```javascript
|
||||
window._AMapSecurityConfig = {
|
||||
serviceHost: 'https://您的代理服务器域名/_AMapService',
|
||||
// 例如：'https://api.example.com/_AMapService'
|
||||
};
|
||||
```
|
||||
|
||||
#### 2. Nginx 代理配置示例
|
||||
|
||||
在您的 Nginx 服务器上配置转发规则。
|
||||
|
||||
```nginx
|
||||
server {
|
||||
listen 80;
|
||||
server_name api.example.com;
|
||||
|
||||
location /_AMapService/ {
|
||||
set $args "$args&jscode=您的安全密钥";
|
||||
proxy_pass https://restapi.amap.com/;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**配置说明：**
|
||||
- 前端请求 `https://api.example.com/_AMapService/v3/weather/weatherInfo?city=110101`
|
||||
- Nginx 转发为 `https://restapi.amap.com/v3/weather/weatherInfo?city=110101&jscode=您的安全密钥`
|
||||
|
||||
#### 3. Node.js 代理配置示例
|
||||
|
||||
使用 `express` 和 `http-proxy-middleware` 实现代理转发。
|
||||
|
||||
```javascript
|
||||
const express = require('express');
|
||||
const { createProxyMiddleware } = require('http-proxy-middleware');
|
||||
const app = express();
|
||||
|
||||
app.use('/_AMapService', createProxyMiddleware({
|
||||
target: 'https://restapi.amap.com',
|
||||
changeOrigin: true,
|
||||
pathRewrite: { '^/_AMapService': '' }, // 去除请求路径中的 /_AMapService 前缀
|
||||
onProxyReq: (proxyReq, req, res) => {
|
||||
// 拦截请求，追加 jscode 参数
|
||||
const url = new URL(req.url, 'https://restapi.amap.com');
|
||||
url.searchParams.append('jscode', '您的安全密钥');
|
||||
|
||||
// 修改转发请求的路径
|
||||
proxyReq.path = url.pathname + url.search;
|
||||
}
|
||||
}));
|
||||
|
||||
app.listen(3000, () => {
|
||||
console.log('Proxy server is running on http://localhost:3000');
|
||||
});
|
||||
```
|
||||
|
||||
#### 4. Java (Spring Boot) 代理配置示例
|
||||
|
||||
使用 `RestTemplate` 手动转发请求并追加安全密钥。
|
||||
|
||||
```java
|
||||
import org.springframework.web.bind.annotation.GetMapping;
|
||||
import org.springframework.web.bind.annotation.RestController;
|
||||
import org.springframework.web.client.RestTemplate;
|
||||
import org.springframework.http.ResponseEntity;
|
||||
import javax.servlet.http.HttpServletRequest;
|
||||
|
||||
@RestController
|
||||
public class AMapProxyController {
|
||||
|
||||
// 建议将密钥配置在 application.properties 中
|
||||
private static final String SECURITY_JS_CODE = "您的安全密钥";
|
||||
|
||||
@GetMapping("/_AMapService/**")
|
||||
public ResponseEntity<String> proxy(HttpServletRequest request) {
|
||||
// 1. 解析目标路径，去除本地代理前缀
|
||||
String targetPath = request.getRequestURI().replace("/_AMapService", "");
|
||||
String amapUrl = "https://restapi.amap.com" + targetPath;
|
||||
|
||||
// 2. 组装查询参数，追加 jscode
|
||||
String queryString = request.getQueryString();
|
||||
if (queryString == null || queryString.isEmpty()) {
|
||||
queryString = "jscode=" + SECURITY_JS_CODE;
|
||||
} else {
|
||||
queryString += "&jscode=" + SECURITY_JS_CODE;
|
||||
}
|
||||
|
||||
// 3. 发起转发请求
|
||||
String finalUrl = amapUrl + "?" + queryString;
|
||||
RestTemplate restTemplate = new RestTemplate();
|
||||
|
||||
// 注意：此处直接返回字符串，实际生产中可能需要处理 Headers 和状态码的透传
|
||||
return restTemplate.getForEntity(finalUrl, String.class);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 获取密钥
|
||||
|
||||
1. 登录 [高德开放平台控制台](https://console.amap.com/)
|
||||
2. 进入「应用管理」→「我的应用」
|
||||
3. 创建应用或选择已有应用
|
||||
4. 添加 Key，选择「Web端(JS API)」
|
||||
5. 获取 Key 和对应的安全密钥
|
||||
|
||||
## 常见问题
|
||||
|
||||
### 1. 地图白屏或提示 INVALID_USER_KEY
|
||||
|
||||
- 检查 Key 和安全密钥是否匹配
|
||||
- 确认 `window._AMapSecurityConfig` 在 JSAPI 加载前已定义
|
||||
- 检查 Key 是否已启用
|
||||
|
||||
### 2. 配额超限
|
||||
|
||||
- 登录控制台查看配额使用情况
|
||||
- 生产环境务必使用代理方式，避免密钥被盗用
|
||||
|
||||
### 3. 部分服务不可用
|
||||
|
||||
- 确认插件已在 URL 或 Loader 中声明
|
||||
- 检查 Key 是否有对应服务的使用权限
|
||||
|
||||
## 安全最佳实践
|
||||
|
||||
1. **开发环境与生产环境分离**: 使用不同的 Key
|
||||
2. **生产环境必须使用代理**: 避免前端暴露安全密钥
|
||||
3. **设置 IP 白名单**: 在控制台配置允许访问的服务器 IP
|
||||
4. **定期更换密钥**: 如有泄露风险，及时重新生成
|
||||
5. **监控配额使用**: 设置告警，防止异常调用
|
||||
@@ -0,0 +1,186 @@
|
||||
# 矢量图形 (Vector Graphics)
|
||||
|
||||
JSAPI v2.0 支持在地图上绘制各种矢量图形，如折线、多边形、圆和贝塞尔曲线。所有矢量图形均支持 WebGL 渲染。
|
||||
|
||||
## 1. 折线 (Polyline)
|
||||
|
||||
用于绘制路径、轨迹或边界线。
|
||||
|
||||
```javascript
|
||||
const path = [
|
||||
[116.368904, 39.913423],
|
||||
[116.382122, 39.901176],
|
||||
[116.387271, 39.912501],
|
||||
[116.398258, 39.904600]
|
||||
];
|
||||
|
||||
const polyline = new AMap.Polyline({
|
||||
path: path,
|
||||
isOutline: true, // 是否显示描边
|
||||
outlineColor: '#ffeeff', // 描边颜色
|
||||
borderWeight: 3, // 描边宽度
|
||||
strokeColor: "#3366FF", // 线颜色
|
||||
strokeOpacity: 1, // 线透明度
|
||||
strokeWeight: 6, // 线宽
|
||||
strokeStyle: "solid", // 线样式: solid, dashed
|
||||
strokeDasharray: [10, 5], // 虚线间隔
|
||||
lineJoin: 'round', // 折线拐点样式
|
||||
lineCap: 'round', // 折线端点样式
|
||||
zIndex: 50,
|
||||
});
|
||||
|
||||
map.add(polyline);
|
||||
```
|
||||
|
||||
### Polyline 配置项
|
||||
|
||||
| 参数 | 类型 | 默认值 | 说明 |
|
||||
|------|------|--------|------|
|
||||
| path | Array | - | 路径坐标 `[[lng, lat], ...]` |
|
||||
| strokeColor | String | '#00D' | 线条颜色 |
|
||||
| strokeOpacity | Number | 1 | 线条透明度 0-1 |
|
||||
| strokeWeight | Number | 1 | 线条宽度（像素） |
|
||||
| strokeStyle | String | 'solid' | 线条样式：solid / dashed |
|
||||
| strokeDasharray | Array | - | 虚线间隔，如 `[10, 5]` |
|
||||
| isOutline | Boolean | false | 是否显示描边 |
|
||||
| outlineColor | String | '#000' | 描边颜色 |
|
||||
| borderWeight | Number | 1 | 描边宽度 |
|
||||
| lineJoin | String | 'miter' | 拐点样式：miter / round / bevel |
|
||||
| lineCap | String | 'butt' | 端点样式：butt / round / square |
|
||||
| geodesic | Boolean | false | 是否大地线（地球曲面最短路径） |
|
||||
| showDir | Boolean | false | 是否显示方向箭头 |
|
||||
| zIndex | Number | 10 | 层叠顺序 |
|
||||
| extData | Any | - | 自定义数据 |
|
||||
|
||||
## 2. 多边形 (Polygon)
|
||||
|
||||
用于绘制区域、围栏或建筑物轮廓。
|
||||
|
||||
```javascript
|
||||
const polygonPath = [
|
||||
[116.403322, 39.920255],
|
||||
[116.410703, 39.897555],
|
||||
[116.402292, 39.892353],
|
||||
[116.389846, 39.891365]
|
||||
];
|
||||
|
||||
const polygon = new AMap.Polygon({
|
||||
path: polygonPath,
|
||||
fillColor: '#ccebc5', // 填充颜色
|
||||
fillOpacity: 0.5, // 填充透明度
|
||||
strokeColor: '#2b8cbe', // 轮廓线颜色
|
||||
strokeWeight: 2, // 轮廓线宽度
|
||||
});
|
||||
|
||||
map.add(polygon);
|
||||
```
|
||||
|
||||
### Polygon 配置项
|
||||
|
||||
| 参数 | 类型 | 默认值 | 说明 |
|
||||
|------|------|--------|------|
|
||||
| path | Array | - | 多边形路径 `[[lng, lat], ...]`，支持带孔 `[外环, 孔1, 孔2]` |
|
||||
| fillColor | String | '#00D' | 填充颜色 |
|
||||
| fillOpacity | Number | 0.5 | 填充透明度 0-1 |
|
||||
| strokeColor | String | '#00D' | 边框颜色 |
|
||||
| strokeOpacity | Number | 1 | 边框透明度 0-1 |
|
||||
| strokeWeight | Number | 1 | 边框宽度（像素） |
|
||||
| strokeStyle | String | 'solid' | 边框样式：solid / dashed |
|
||||
| strokeDasharray | Array | - | 虚线间隔 |
|
||||
| zIndex | Number | 10 | 层叠顺序 |
|
||||
| extData | Any | - | 自定义数据 |
|
||||
|
||||
## 3. 圆 (Circle)
|
||||
|
||||
用于绘制圆形区域，常用于周边搜索范围展示。
|
||||
|
||||
```javascript
|
||||
const circle = new AMap.Circle({
|
||||
center: [116.403322, 39.920255], // 圆心
|
||||
radius: 1000, // 半径 (米)
|
||||
fillColor: '#ee2200',
|
||||
fillOpacity: 0.5,
|
||||
strokeColor: '#F33',
|
||||
strokeWeight: 1,
|
||||
});
|
||||
|
||||
map.add(circle);
|
||||
```
|
||||
|
||||
## 4. 贝塞尔曲线 (BezierCurve)
|
||||
|
||||
绘制平滑曲线，常用于航线或流向图。
|
||||
|
||||
```javascript
|
||||
const path = [
|
||||
// 起点
|
||||
[116.39, 39.91, 116.37, 39.91], // 控制点1, 控制点2
|
||||
// 途经点
|
||||
[116.38, 39.92, 116.38, 39.93, 116.39, 39.93],
|
||||
// ...
|
||||
];
|
||||
|
||||
const bezier = new AMap.BezierCurve({
|
||||
path: path,
|
||||
isOutline: true,
|
||||
outlineColor: '#ffeeff',
|
||||
borderWeight: 3,
|
||||
strokeColor: "#3366FF",
|
||||
strokeWeight: 6,
|
||||
strokeOpacity: 0.9,
|
||||
});
|
||||
|
||||
map.add(bezier);
|
||||
```
|
||||
|
||||
## 矢量图形编辑器
|
||||
|
||||
高德提供了 `AMap.PolyEditor`, `AMap.CircleEditor` 等插件，允许用户在地图上交互式编辑矢量图形。
|
||||
|
||||
```javascript
|
||||
// 需先加载插件 AMap.PolyEditor
|
||||
const polyEditor = new AMap.PolyEditor(map, polyline);
|
||||
|
||||
polyEditor.open(); // 开启编辑
|
||||
// polyEditor.close(); // 结束编辑
|
||||
|
||||
polyEditor.on('end', function(event) {
|
||||
console.log('编辑结束，新路径：', event.target.getPath());
|
||||
});
|
||||
```
|
||||
## 5. 最佳实践
|
||||
|
||||
### 性能优化
|
||||
|
||||
```javascript
|
||||
// 大量坐标点时，使用 setPath 而非重新创建
|
||||
polyline.setPath(newPath); // 推荐
|
||||
// map.remove(old); map.add(new); // 不推荐
|
||||
|
||||
// 批量操作使用数组
|
||||
map.add([polyline1, polyline2, polygon1]);
|
||||
map.remove([polyline1, polyline2]);
|
||||
```
|
||||
|
||||
### 常见问题
|
||||
|
||||
**Q: 多边形不显示？**
|
||||
|
||||
检查路径是否闭合（首尾相连），确保至少 3 个点。
|
||||
|
||||
**Q: 编辑器报错？**
|
||||
|
||||
确保先加载插件：
|
||||
|
||||
```javascript
|
||||
AMap.plugin(['AMap.PolyEditor', 'AMap.CircleEditor'], function() {
|
||||
// 使用编辑器
|
||||
});
|
||||
```
|
||||
|
||||
**Q: 如何判断点是否在多边形内？**
|
||||
|
||||
```javascript
|
||||
const isInside = polygon.contains([lng, lat]);
|
||||
```
|
||||
|
||||
@@ -0,0 +1,84 @@
|
||||
# 视图控制 (View Control)
|
||||
|
||||
高德地图 JSAPI v2.0 提供了强大的 3D 视图控制能力，包括缩放、旋转、俯仰和中心点移动。
|
||||
|
||||
## 核心属性
|
||||
|
||||
在地图初始化或运行时，可以通过以下属性控制视口：
|
||||
|
||||
- **zoom**: 缩放级别 (2 - 20)。
|
||||
- **center**: 地图中心点 `[lng, lat]`。
|
||||
- **rotation**: 旋转角度 (0 - 360)，顺时针。
|
||||
- **pitch**: 俯仰角度 (0 - 83)，0 为垂直向下，83 为接近水平。
|
||||
|
||||
## 常用方法
|
||||
|
||||
### 1. 缩放 (Zoom)
|
||||
|
||||
```javascript
|
||||
map.setZoom(15); // 设置特定级别
|
||||
map.zoomIn(); // 放大一级
|
||||
map.zoomOut(); // 缩小一级
|
||||
const zoom = map.getZoom(); // 获取当前级别
|
||||
```
|
||||
|
||||
### 2. 移动与平移 (Move/Pan)
|
||||
|
||||
```javascript
|
||||
// 瞬间移动到指定位置
|
||||
map.setCenter([116.40, 39.90]);
|
||||
|
||||
// 平滑移动到指定位置 (带动画)
|
||||
map.panTo([116.40, 39.90]);
|
||||
|
||||
// 同时设置缩放和中心点
|
||||
map.setZoomAndCenter(14, [116.40, 39.90]);
|
||||
```
|
||||
|
||||
### 3. 3D 控制 (Pitch/Rotation)
|
||||
|
||||
```javascript
|
||||
map.setPitch(45); // 设置俯仰角
|
||||
map.setRotation(90); // 设置旋转角 (正北为0，顺时针)
|
||||
```
|
||||
|
||||
### 4. 限制显示范围 (Bounds)
|
||||
|
||||
限制用户只能在特定区域内浏览地图。
|
||||
|
||||
```javascript
|
||||
const bounds = new AMap.Bounds(
|
||||
[116.0, 39.0], // 西南角
|
||||
[117.0, 40.0] // 东北角
|
||||
);
|
||||
map.setLimitBounds(bounds);
|
||||
|
||||
// 清除限制
|
||||
map.clearLimitBounds();
|
||||
```
|
||||
|
||||
## 视图自适应
|
||||
|
||||
让地图自动调整层级和中心，以显示所有指定的覆盖物。
|
||||
|
||||
```javascript
|
||||
// 自动适配视口
|
||||
map.setFitView(
|
||||
[marker1, polygon1], // 覆盖物数组，为空则包含所有
|
||||
false, // 是否立即过渡 (false 为动画)
|
||||
[60, 60, 60, 60] // 上下左右的 padding
|
||||
);
|
||||
```
|
||||
## 注意事项
|
||||
- 容器高度：确保地图容器 div 在 CSS 中有明确的宽度和高度，否则地图无法显示。
|
||||
- 坐标系：高德地图使用 GCJ-02 坐标系（火星坐标系）。
|
||||
- 插件加载：可以在 AMapLoader.load 时一次性引入，也可以在使用时通过 AMap.plugin(['AMap.XX'], callback) 动态引入。
|
||||
- 性能优化：对于 1000 个以上的点标记，强烈建议使用 AMap.LabelMarker 或 AMap.MassMarks 而非普通 AMap.Marker。
|
||||
- references/map-init.md
|
||||
- references/security.md
|
||||
|
||||
### 说明：
|
||||
1. **安全配置模块**：在 v2.0 中，这是最常见的报错来源。我在 `0. 安全配置` 中特别强调了 `window._AMapSecurityConfig`。
|
||||
2. **Loader 模式**：官方现在推荐使用异步 Loader 模式，示例代码直接给出了 `AMapLoader` 的写法。
|
||||
3. **高性能组件**：针对 v2.0 增加了 `LabelMarker` 的引用，这是 WebGL 版本相比 v1.4 的核心优势。
|
||||
4. **结构化引用**：保持了与你提供的百度地图 Skill 一致的 `references/*.md` 结构，方便 LLM 模拟读取详细文档。
|
||||
Reference in New Issue
Block a user