1.开发准备
- 开发工具 vscode，自行安装。
- 高德开放平台，自行注册成为高德开放平台开发者。
高德开放平台-控制台-应用管理-我的应用：创建新应用，填写应用名称，选择应用类型之后，生成key和密钥，如下图所示
因为我们使用的是第三方平台，这里我们只需要开发前端代码，文档以地图 JS API 2.0为例。
2.地图显示
步骤：
- 引入资源
- 创建容器
- 加载地图
代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>地图显示</title>
<!-- 3.设置地图的样式 -->
<style>
html,
body,
#container {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<!-- 2.创建地图容器 -->
<div id="container"></div>
<!-- 1.引入资源 -->
<!-- 4.加载地图 -->
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: "「你申请的安全密钥」",
};
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=「你申请的应用key」"></script>
<script type="text/javascript">
const map = new AMap.Map("container", {
viewMode: '2D', //默认使用 2D 模式
zoom: 11, //地图级别
center: [116.397428, 39.90923], //地图中心点
});
</script>
</body>
</html>
效果如下图所示；
Tips： 如果地图没有加载出来，首先检查设置的安全密钥和key是否正常；其次查看是否给容器设置宽高。
AMap.Map属性和方法
| 参数/方法 | 说明 | 类型 | 参数值描述 |
|---|---|---|---|
| zoom | 初始化地图层级，值越大放大比例越大 | Number | 可以设置为整数或浮点数（一位） |
| center | 初始化地图中心点 | Array | 地图中心点的经纬度 |
| mapStyle | 设置地图的显示样式 | String | 目前支持两种地图样式：第一种：自定义地图样式，如:amap://styles/d6bf8c1d69cea9f5c696185ad4ac4c86 可前往教程 使用官方地图样式第二种：官方样式模版，如：amap://styles/normalamap://styles/greyamap://styles/whitesmokeamap://styles/darkamap://styles/lightamap://styles/graffiti等，查看 标准主题示例 |
3.地图参数
AMap.map 地图对象类，封装了地图的属性设置、图层变更、事件交互等接口的类。
new AMap.Map(div: ([String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) | [HTMLDivElement](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)), opts: MapOptions)
参数说明：
div ((String | HTMLDivElement)) 构造一个地图对象，参数 container 中传入地图容器 DIV 的 ID 值或者 DIV 对象， Options 地图初始化参数对象，参数详情参看 MapOptions 列表。注意：地图容器在创建之前必须拥有实际大小，否则可能出现底图无法渲染的问题。
opts (MapOptions) 地图初始化参数
| 属性 | 描述 |
|---|---|
| opts.center 类型：`([Number, Number] | LngLat)?` |
opts.zoom 类型：Number? | 初始地图缩放级别。可以设置为浮点数；若 center 与 level 未赋值，地图初始化默认显示用户所在当前城市范围。 |
opts.rotation 类型：Number default 0 | 初始地图顺时针旋转的角度，取值范围 [0-360] ，默认值：0 |
opts.pitch 类型：Number default 0 | 初始地图俯仰角度，默认 0，最大值根据地图当前 zoom 级别不断增大， 2D 地图下无效 。 |
opts.viewMode 类型：String default '2D' | 初始地图视图模式，默认为 2D ，可选 3D ，选择 3D 会显示 3D 地图效果。 |
opts.terrain 类型：Boolean default false | 初始地图是否展示地形，此属性适用于 3D 地图。默认为值 false 不展示地形，可选 true ，选择 true 会展示地形效果。(注意：此属性适用于 JSAPI v2.1Beta 及以上版本)。 |
opts.features 类型：Array<String> default ['bg','point','road','building'] | 设置地图上显示的元素种类, 支持 'bg' （地图背景）、 'point' （POI点）、 'road' （道路）、 'building' （建筑物） |
opts.layers 类型：Array<Layer> | 地图图层数组，数组可以是图层 中的一个或多个，默认为普通二维地图。当叠加多个图层， 如：’ https://lbs.amap.com/api/jsapi-v2/documentation#tilelayer ’ 时，普通二维地图需通过实例化一个 TileLayer 类实现。 如果你希望创建一个默认底图图层，使用 AMap.createDefaultLayer()； |
opts.zooms 类型：[Number, Number] default [2,20] | 地图显示的缩放级别范围, 默认为 [2, 20] ，取值范围 [2 ~ 26] |
opts.dragEnable 类型：Boolean default true | 地图是否可通过鼠标拖拽平移, 默认为 true 。此属性可被 setStatus/getStatus 方法控制 |
opts.zoomEnable 类型：Boolean default true | 地图是否可缩放，默认值为 true 。此属性可被 setStatus/getStatus 方法控制 |
opts.jogEnable 类型：Boolean default true | 地图是否使用缓动效果，默认值为 true 。此属性可被 setStatus/getStatus 方法控制 |
opts.pitchEnable 类型：Boolean default true | 是否允许设置俯仰角度, 3D 视图下为 true , 2D 视图下无效。 |
opts.rotateEnable 类型：Boolean default true | 地图是否可旋转, 图默认为 true 。 |
opts.animateEnable 类型：Boolean default true | 地图平移过程中是否使用动画（如调用 panBy、panTo、setCenter、setZoomAndCenter 等函数, 将对地图产生平移操作, 是否使用动画平移的效果）, 默认为 true , 即使用动画 |
opts.keyboardEnable 类型：Boolean default true | 地图是否可通过键盘控制, 默认为 true , 方向键控制地图平移，“+” 和 “-” 可以控制地图的缩放, Ctrl+“→”顺时针旋转，Ctrl+“←”逆时针旋转。此属性可被 setStatus/getStatus 方法控制 |
opts.doubleClickZoom 类型：Boolean default true | 地图是否可通过双击鼠标放大地图, 默认为 true 。此属性可被 setStatus/getStatus 方法控制 |
opts.scrollWheel 类型：Boolean default true | 地图是否可通过鼠标滚轮缩放浏览，默认为 true 。此属性可被 setStatus/getStatus 方法控制 |
opts.touchZoom 类型：Boolean default true | 地图在移动终端上是否可通过多点触控缩放浏览地图，默认为 true 。关闭手势缩放地图，请设置为 false 。 |
opts.touchZoomCenter 类型：Boolean default 1 | 可缺省，当 touchZoomCenter=1 的时候，手机端双指缩放的以地图中心为中心，否则默认以双指中间点为中心。 |
opts.showLabel 类型：Boolean default true | 是否展示地图文字和 POI 信息。 |
opts.defaultCursor 类型：String? | 地图默认鼠标样式。参数 defaultCursor 应符合 CSS 的 cursor 属性规范。 |
opts.isHotspot 类型：Boolean? | 是否开启地图热点和标注的 hover 效果。PC端默认是 true , 移动端默认是 false 。 |
opts.mapStyle 类型：String? | 设置地图的显示样式，目前支持两种地图样式： 第一种：自定义地图样式，如:amap://styles/d6bf8c1d69cea9f5c696185ad4ac4c86. 可前往地图自定义平台定制自己的个性地图样式； 第二种：官方样式模版，如：amap://styles/normal``amap://styles/grey``amap://styles/whitesmoke``amap://styles/dark``amap://styles/light``amap://styles/graffiti. 其他模版样式及自定义地图的使用说明见开发指南。 |
| opts.wallColor 类型：`(String | Array)?` |
| opts.roofColor 类型：`(String | Array)?` |
opts.showBuildingBlock 类型：Boolean default true | 是否展示地图 3D 楼块，默认 true 。 |
opts.showIndoorMap 类型：Boolean default false | 是否自动展示室内地图，默认是 false 。 |
| opts.skyColor 类型：`(String | Array)?` |
opts.labelRejectMask 类型：Boolean default false | 文字是否拒绝掩模图层进行掩模 |
opts.mask 类型：Array<Number> | 为 Map 实例指定掩模的路径，各图层将只显示路径范围内图像， 3D 视图下有效。 格式为一个经纬度的一维、二维或三维数组。 [相关示例] 如：’ https://lbs.amap.com/api/jsapi-v2/example/3d/mask ’ 一维数组时代表一个普通多边形路径，如: [[lng1,lat1], [lng2,lat2], [lng3,lat3]]. 二维数组时代表一个带洞的多边形路径，如: [[[lng4,lat4], [lng5,lat5], [lng6,lat6]], [[lng7,lat7], [lng8,lat8], [lng9,lat9]]]. 三维数组时代表多个多边形路径，如: [ [[lng1,lat1], [lng2,lat2], [lng3,lat3]], [ [[lng4,lat4], [lng5,lat5], [lng6,lat6]], [[lng7,lat7], [lng8,lat8], [lng9,lat9]] ] ]. |
opts.WebGLParams 类型：Object default {} | 额外配置的 WebGL 参数 eg: preserveDrawingBuffer |
示例代码：
var map = new AMap.Map('map', {
viewMode: '3D',
center: [116.397083, 39.874531],
layers: [
AMap.createDefaultLayer()
], // layers 字段为空或者不赋值将会自动创建默认底图。
zoom: 12,
})
成员函数：
-
resize()：重新计算容器大小
-
center(center, immediately, duration)
-
setCenter(center, immediately, duration?)：设置中心点
-
zoom(zoom, center, immediately, duration)：
-
setZoomAndCenter(zoom, center, immediately, duration?)：地图缩放至指定级别并以指定点为地图显示中心点
-
getBounds()：获取当前地图视图范围/可视区域。
-
getCenter()：获取地图中心点经纬度坐标值。
-
setZoom(zoom, immediately, duration?)：设置地图显示的缩放级别，参数 zoom 可设范围：[2, 30]
-
getContainer()：返回地图对象的容器
-
getSize()：获取地图容器尺寸，单位：像素
-
getZoom(digits)：获取当前地图缩放级别, 默认取值范围为[2, 20
-
zoomIn()：地图放大一级显示
-
addLayer(layer)：添加图层到地图上
-
zoomOut()：地图缩小一级显示
-
getPitch()：获取地图当前俯仰角
-
setPitch(Pitch, immediately, duration?)：设置地图俯仰角
-
getRotation()：获取地图顺时针旋转角度, 范围: [0 ~ 360]
-
setRotation(rotation, immediately, duration?)：设置地图顺时针旋转角度, 旋转原点为地图容器中心点, 取值范围: 任意数字
-
removeLayer(layer)：从地图上移除图层
-
setBounds(bounds, immediately, avoid)：指定当前地图显示范围，参数 bounds 为指定的范围
-
panTo(lnglat, duration?)：地图中心点平移至指定点位置
-
setLayers(layers)：将多个图层一次替代地图上原有图层，会移除地图原有图层
-
getLayers()：获取地图图层数组，数组为一个或多个图层
-
panBy(x, y, duration?)：以像素为单位, 沿 x 方向和 y 方向移动地图, x 向右为正, y 向下为正
-
getStatus()：获取当前地图状态信息，包括是否可鼠标拖拽移动地图、地图是否可缩放、地图是否可旋转（rotateEnable）、 是否可双击放大地图、是否可以通过键盘控制地图旋转（keyboardEnable）等
-
setStatus(status)：设置当前地图显示状态，包括是否可鼠标拖拽移动地图、地图是否可缩放、地图是否可旋转（rotateEnable）、 是否可双击放大地图、是否可以通过键盘控制地图旋转（keyboardEnable）等
-
add(features)：添加覆盖物/图层。参数为单个覆盖物/图层，或覆盖物/图层的数组。
-
getDefaultCursor()：获取地图默认鼠标指针样式
-
setDefaultCursor(cursor)：设置地图默认鼠标指针样式
-
remove(features)：删除覆盖物/图层。参数为单个覆盖物/图层，或覆盖物/图层的数组。
-
destroy()：注销地图对象，并清空地图容器
-
lngLatToCoords(lnglat)：经纬度转莫卡托坐标（单位：米）
-
coordsToLngLat(coords)：莫卡托坐标（单位：米）转经纬度
-
getLimitBounds()：获取Map的限制区域
-
lngLatToContainer(lnglat)：地图经纬度坐标转为地图容器像素坐标
-
setLimitBounds()：设置 Map 的限制区域，设定区域限制后，传入参数为限制的 Bounds。地图仅在区域内可拖拽
-
clearLimitBounds()：清除 Map 的限制区域
-
getAltitude(lnglat)：获取当前位置的海拔高度并返回 ：altitude 空间高度 (注意：此方法适用于 JSAPI v2.1Beta 及以上版本)。
-
getZooms()：获取地图缩放等级范围
-
setZooms(zooms)：设置地图缩放等级范围
-
containerToLngLat(pixel)：地图容器坐标转换成经纬度
-
coordToContainer(coord)：莫卡托（单位：米）转成地图容器坐标
-
containerToCoord(pixel)：地图容器坐标转成莫卡托坐标（单位：米）。3D视图下天空范围返回null，如果开启高程的时候同时返回高度
-
getAltitudeByContainer(pixel)：
-
pixelToLngLat(pixel, zoom?)：平面地图像素坐标转换为地图经纬度坐标
-
lngLatToPixel(lnglat, zoom?)：经纬度坐标转换成平面地图像素坐标
-
getResolution()：获取指定位置的地图分辨率，单位：米/像素。 参数point有指定值时，返回指定点地图分辨率，point缺省时，默认返回当前地图中心点位置的分辨率
-
getScale(dpi)：获取当前地图比例尺。表示当前屏幕距离一米代表实际距离多少米
-
getCity(getCityCallBack, lnglat)：获取地图中心点所在区域，回调函数返回对象属性分别对应为{省，市，区/县}
-
setCity(cityName)：
-
按照行政区名称或adcode来设置地图显示的中心点。
行政区名称支持中国、省、市、区/县名称，如遇重名的情况，会按城市编码表顺序返回第一个。adcode请在城市编码表中查询。
建议不要同时使用center/setCenter()和setCity()，如一起使用程序将以setCity()作为最后结果。 -
setFitView(overlays, immediately, avoid, maxZoom)：
-
根据地图上添加的覆盖物分布情况，自动缩放地图到合适的视野级别，参数均可缺省。
overlayList为覆盖物数组，缺省时为当前地图上添加的所有覆盖物图层，
immediately代表是否需要动画过程，avoid代表上下左右的像素避让宽度，maxZoom代表fitView之后的最大级 -
getFitZoomAndCenterByOverlays(overlays, avoid, maxZoom)：根据 overlays 计算出合适的中心点和 zoom 级别
-
getFitZoomAndCenterByBounds(bounds, avoid, maxZoom)：根据 bounds 计算出合适的中心点和 zoom 级别
-
addControl(control)：添加控件。参数可以是插件列表中的任何插件对象，如：ToolBar、OverView、Scale等
-
removeControl(control)：移除地图上的指定控件
-
setMapStyle(value)：设置地图的显示样式，目前支持两种地图样式：
-
getMapStyle()：获取地图的显示样式
-
getAllOverlays(type?)：返回添加的覆盖物对象，
-
clearMap()：删除地图上所有的覆盖物
-
clearInfoWindow()：清除地图上的信息窗体。
-
getFeatures()：获取地图显示元素种类
-
setFeatures(features)：
-
设置地图上显示的元素种类，支持bg（地图背景）、point（兴趣点）、
road（道路）、building（建筑物） -
getMapApprovalNumber()：
-
setMask(maskPath)
-
setLabelRejectMask(reject)：设置文字是否拒绝掩模，true：不进行掩模，false：掩模
事件：
- resize：地图容器尺寸改变事件
- complete：地图资源加载完成后触发事件
- click：点击地图
- dblclick：双击地图
- mapmove：地图平移时触发事件
- hotspotclick：鼠标点击热点时触发
- hotspotover：鼠标滑过热点时触发
- hotspotout：鼠标移出热点时触发
- movestart：地图平移开始时触发
- moveend：地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发
- zoomchange：地图缩放级别更改后触发
- zoomstart：缩放开始时触发
示例代码：
// 初始化地图
const map = new AMap.Map('container',{});
map.on('zoomstart', () => {
console.log('触发地图缩放开始时的事件');
});
- zoomend：缩放结束时触发
- rotatechange：地图旋转 rotation 更改后触发
- rotatestart‘：地图旋转 rotation 开始时触发
- rotateend：地图旋转 rotation 结束时触发
- mousemove：鼠标在地图上移动时触发
- mousewheel：鼠标滚轮开始缩放地图时触发
- mouseover：鼠标移入地图容器内时触发
- mouseout：鼠标移出地图容器时触发
- mouseup：鼠标在地图上单击抬起时触发
- mousedown：鼠标在地图上单击按下时触发
- rightclick：鼠标右键单击事件
- dragstart：开始拖拽地图时触发
- dragging：拖拽地图过程中触发
- dragend：停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发
- touchstart：触摸开始时触发事件，仅适用移动设备
- touchmove：拖拽地图过程中触发，仅适用移动设备
- touchend：触摸结束时触发事件，仅适用移动设备
结语
❓QQ:806797785
⭐️仓库地址：https://gitee.com/gaogzhen
⭐️仓库地址：https://github.com/gaogzhen
[1]高德开放平台[CP/OL].
[2]GIS | 零基础入门WebGIS开发，《智慧校园》项目实战[CP/OL].
扫一扫
7156
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
