🤖 作者简介：水煮白菜王 （juejin/csdn同名），一位资深前端劝退师 👻
✍ 记录一下平时在博客写作中 不定时更新，总结出的一些开发技巧和知识点✍。
👀 感谢支持💕💕💕
高德地图JS API 开发常见使用
使用高德地图JS API前 ,先准备创建应用，👉 如何创建 ；👉控制台
一. 引入加载方式
1. script 标签加载 JS API 脚本
通过 script 标签加载方式引入，可以通过 nginx代理 获取安全密钥和key，也可以使用明文直引直用； 不过明文方式很不建议，可以设置白名单或代码加密，防止key、密钥被盗。
// 同步加载
<script type="text/javascript">
window._AMapSecurityConfig = {
serviceHost: "你的代理服务器域名或地址/_AMapService",
// 环境条件不够就直接明文暴露 （不建议）
securityJsCode: '你的密钥',
};
</script>
<script
type="text/javascript"
src="https://webapi.amap.com/maps?v=2.0&key=你申请的key值"
></script>
<script type="text/javascript">
//地图初始化应该在地图容器div已经添加到DOM之后
var map = new window.AMap.Map("container", {
zoom: 12,
});
</script>
// 异步看官方 https://lbs.amap.com/api/javascript-api-v2/guide/abc/load
插件加载方式具体要看如何引入JS API
- 如果你希望和 JS API 的主体同步加载某些插件，而不是异步加载，可以在 JS API 的script加载地址中添加plugin参数，将需要使用的一个或者多个插件的名称作为参数传入即可，这种用法在 JS API 加载完毕之后便可直接使用插件功能了。需要加载多个插件时，plugin参数中的插件名称之间以英文逗号,分割。
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=你申请的key值&plugin=AMap.ToolBar,AMap.Driving"></script>
- 如果想要异步加载，使用script标签加载 loader.js，或者npm包 @amap/amap-jsapi-loader，在AMapLoader.load()的plugins参数数组中引入多个插件
<script src="https://webapi.amap.com/loader.js"></script>
<script type="text/javascript">
AMapLoader.load({
key: "「你申请的应用 Key」", //申请好的 Web 端开发者 Key，调用 load 时必填
version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
plugins: ["AMap.ToolBar", "AMap.Scale"], //需要使用的的插件列表
}).then((AMap) => {
const map = new AMap.Map("container"); //创建地图实例
var toolbar = new AMap.ToolBar(); //创建工具条插件实例
map.addControl(toolbar); //添加工具条插件到页面
var scale = new AMap.Scale();
map.addControl(scale);
});
</script>
提示：渲染高德地图 注意 在所挂载的DOM要有实际宽高 、且在DOM渲染后加载地图。
2. JS API Loader加载（npm、loader.js）
可靠推荐、可全局自由封装AMapLoader
2-1.script 标签加载 Loader
```javascript
<script src="https://webapi.amap.com/loader.js"></script>
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: "「你申请的安全密钥」",
};
AMapLoader.load({
key: "替换为你申请的 key", //申请好的 Web 端开发 Key，首次调用 load 时必填
version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['AMap.Scale','...','...']
AMapUI: {
//是否加载 AMapUI，缺省不加载
version: "1.1", //AMapUI 版本
plugins: ["overlay/SimpleMarker"], //需要加载的 AMapUI ui 插件
},
Loca: {
//是否加载 Loca， 缺省不加载
version: "2.0", //Loca 版本
},
})
.then((AMap) => {
var map = new AMap.Map("container"); //"container"为 <div> 容器的 id
map.addControl(new AMap.Scale()); //添加比例尺组件到地图实例上
})
.catch((e) => {
console.error(e); //加载错误提示
});
</script>
2-2.NPM 安装 Loader
// 安装loader包
npm i @amap/amap-jsapi-loader --save
2-3.实现示例
<!-- Vue 2 Code -->
<template>
<div id="container"></div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
name: "map-view",
mounted() {
this.initAMap();
},
unmounted() {
this.map?.destroy();
},
methods: {
initAMap() {
AMapLoader.load({
key: "", // 申请好的Web端开发者Key，首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
})
.then((AMap) => {
this.map = new AMap.Map("container", {
// 设置地图容器id
viewMode: "3D", // 是否为3D地图模式
zoom: 11, // 初始化地图级别
center: [116.397428, 39.90923], // 初始化地图中心点位置
});
})
.catch((e) => {
console.log(e);
});
},
},
};
</script>
<style scoped>
#container {
width: 100%;
height: 800px;
}
</style>
3.封装AMapLoader.js (重点推荐) 🚀🚀🚀
进行自由封装挂载到全局，即封装即用，快速开发
这里特别说明，对于AMap的引入使用，引入方法有多种，如何进入看环境是否支持，博主这里建议使用npm依赖安装 @amap/amap-jsapi-loader 进行自由封装成js去使用，通过接口或者nginx代理获取key和密钥，这样无论对于后期更换key、密钥来说避免重复打包、提高维护性、项目使用AMap统一性，即引即用👍
/*
* @Author: baicaiKing
* @Date: 2024-07-03 17:06:33
* @LastEditors: Do not edit
* @LastEditTime: 2024-11-19 14:35:47
* @FilePath: \code\src\components\AMapLoader\index.js
* @Description: AMapLoader.js 提供使用AMap地图功能
* @source: https://blog.csdn.net/weixin_45511682/article/details/138078974?spm=1001.2014.3001.5502
*/
/**
* AMapLoader.js
* @method
---vue.js
initMap() {
this.$AMapLoader().then( (AMap) => {
this.AMap = AMap; // this.AMap是其他AMap成员函数要用到AMap地图的AMap Api
this.map = new AMap.Map("container_map", { // <div id="container_map"></div> 你要绑定的地图容器
viewMode: "2D",
zoom: 11,
... 这里添加初始化属性
});
}).catch((e) => {
console.error('AMap加载失败', e);
});
}
---
*/
import AMapLoaders from '@amap/amap-jsapi-loader';
const amapConfig = {
version: "2.0", // 这里是2.0版本 建议使用2.0,在一定程度上规避了一些隐性bug和兼容问题👍
plugins: [
"AMap.Scale",
"AMap.OverView",
"AMap.ToolBar",
// .. 这里引入你所需要的插件
],
AMapUI: {
version: '1.1', // AMapUI 缺省 1.1
plugins: [] // AMapUI ui插件
}
};
export default function AMapLoader() {
return new Promise((resolve, reject) => {
if (window.AMap) {
// console.warn("[AMap Loader]已经挂载过了");
resolve(window.AMap);
} else {
console.info("[AMap Loader]加载中...");
/*
* 在这里你也可以调用服务通过接口来获取、或者nginx代理获取
*/
const key = "" // .. 这里你的AMap key
const securityJsCode = "" //.. 这里你的AMap密钥
// 获取高德地图
if (key && securityJsCode) {
// 高德安全密钥
window._AMapSecurityConfig = {
securityJsCode: securityJsCode,
};
// 加载高德地图 API 和插件
AMapLoaders.load({
key: key, // 高德key值
...amapConfig
}).then((AMap) => {
resolve(AMap);
console.success( "Note:", `[AMap Loader]API 加载成功`,'success' ); //
}).catch((e) => {
reject(e);
console.error("[AMap Loader]加载 API 失败:", e);
});
} else {
reject(new Error('[AMap Loader]未能获取到有效的密钥'));
console.error('[AMap Loader]未能获取到有效的密钥');
}
}
});
}
vue项目下在main.js引入AMapLoader.js挂载全局
// 挂载高德地图
import AMapLoader from "@/components/AMapLoader/index.js";
Vue.prototype.$AMapLoader = AMapLoader;
具体使用
// 初始化地图
initMap() {
this.$AMapLoader()
.then((AMap) => {
this.AMap = AMap; // 这里的动作是其他地方需要用到this.AMap
this.mapApi = new AMap.Map("container_map", {
// mapStyle: "amap://styles/grey", //设置地图的显示样式
zoom: 14,
zooms: [14, 16],
resizeEnable: true,
showBuildingBlock: false, // 不显示3D楼块
showLabel: false, // 取消地图层标注
});
})
.catch((e) => {
console.error("AMap加载失败", e);
});
},
二、常用api 函数 指令
1.地图生命周期
创建地图对象
在创建地图对象阶段，可通过传入地图初始化参数来设置地图的初始状态。例如：中心点、地图视图模式、地图样式等。也可创建后进行设置
var map = new AMap.Map("container_map", {
zoom: 10, //地图级别
center: [116.397428, 39.90923], //地图中心点
// layers: [new AMap.TileLayer.Satellite()], //设置图层,可设置成包含一个或多个图层的数组
// mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式
viewMode: "2D", //设置地图模式 默认2D
terrain: false, //关闭地形图
showBuildingBlock: false, // 不显示3D楼块
// showLabel: false, // 取消地图层标注
scrollWheel: true, // 开启缩放
dragEnable: true, // 开启鼠标拖动
showIndoorMap: false,
doubleClickZoom: false, // 禁止双击
lang: "zh_en",//可选值：en，zh_en, zh_cn 默认zh_en
// resizeEnable: true, //是否监控地图容器尺寸变化
});
创建多个地图只需加载一次 JS API。通过增加多个 HTML 容器，可创建多个地图对象。
<div id="containerOne" style="width:500px; height:300px"></div>
<div id="containerTwo" style="width:500px; height:300px"></div>
// 创建多个地图对象
var mapOne = new AMap.Map('containerOne');
var mapTwo = new AMap.Map('containerTwo');
地图加载完成
地图加载完成后会触发complete事件，可以在这个事件中执行一些地图的其他操作，例如：添加覆盖物、绑定交互事件。根据需求，自动定位到某个城市或显示某些标记点等
这个complete事件有时会引环境问题回调失败。建议直接不用
map.on('complete', function(){
//地图图块加载完成后触发
});
销毁地图对象
//解绑地图的点击事件
map.off("click", clickHandler);
//销毁地图，并清空地图容器
map.destroy();
//地图对象赋值为null
map = null
//清除地图容器的 DOM 元素
document.getElementById("container").remove(); //"container" 为指定 DOM 元素的id
2.点标记 Marker
地图开发常用的Marker点标记：普通Marker、海量点LabelMarker;
// 普通点标记Marker
const marker = new AMap.Marker({
position: new AMap.LngLat(116.39, 39.9),
offset: new AMap.Pixel(-10, -10),
icon: "//vdata.amap.com/icons/b18/1/2.png", //添加 icon 图标 URL
title: "北京",
});
map.add(marker);
}
这里不过多介绍海量点标记，常用开中使用中大部分使用普通点Marker，数据量过大使用海量点LabelMarker即可。
使用海量点标记需要注意先创建 LabelsLayer 图层，将创建的海量点LabelMarker添加到LabelsLayer图层中，具体实现可阅读 「JS API海量点LabelMarker」 还有 「JS API普通点Marker」
3.渲染行政区边界AMap.Polygon
AMap.Polygon用于构造多边形对象，通过PolygonOptions指定多边形样式
new AMap.Polygon(opts: PolygonOptions)
具体实现可阅读 「JS API AMap.Polygon」
4.使用AMap.MouseTool绘制
AMap.MouseTool 插件主要通过用户在地图图面的鼠标操作，绘制相应的点、线、面覆盖物；或者进行图面的距离测量、面积量测、拉框放大、拉框缩小等
map.plugin(["AMap.MouseTool"],function(){
var mousetool = new AMap.MouseTool(map);
// 使用鼠标工具，在地图上画标记点
mousetool.marker();
});
具体实现可阅读 「JS API AMap.MouseTool绘制」
5.设置层级、中心点 setZoomAndCenter
map.setZoom(12);
var position = [116.681212,39.852698];
map.setCenter(position );
map.setZoomAndCenter(12, position);
6.自动缩放视野 setFitView
map.setFitView()
7.平移 panTo
官方案例有过渡效果 但实际使用没有, 不影响使用
map.panTo([116.405467, 39.907761]);
8.限制地图区域 setLimitBounds
设置 Map 的限制区域，设定区域限制后，传入参数为限制的 Bounds。地图仅在区域内可拖拽
var map = new AMap.Map("container_map", {
zoom: 10, //地图级别
terrain: false, //关闭地形图
showBuildingBlock: false, // 不显示3D楼块
// showLabel: false, // 取消地图层标注
});
// 先获取当前地图视图范围/可视区域 getBounds
var bounds = map.getBounds();
// 获取限制的Bounds的范围值传入设定区域限制
map.setLimitBounds(bounds);
9.图片图层 AMap.ImageLayer
图片图层类，将图片作为图层添加在地图上，图片图层会随缩放级别而自适应缩放。可以用于小块区域进行叠加在地图上，如果图片设计过于精细， 堪比json效果👍。
const imageLayer = new AMap.ImageLayer({
url: require("@/assets/img/good.png"),
bounds: new AMap.Bounds(
[118.766124,31.97475],
[118.776359,31.982459]
),
zooms: [14, 20],
});
var map = new AMap.Map("container_map", {
zooms: [14, 20],
center: [118.769418,31.978143],
terrain: false, //关闭地形图
showBuildingBlock: false, // 不显示3D楼块
// showLabel: false, // 取消地图层标注
});
三、隐藏一些样式
1.解决初始加载地图可能出现的白屏闪烁
::v-deep .amap-container {
background-color: transparent !important;
}
2.隐藏logo，版权标识
::v-deep .amap-logo{
display: none !important;
}
::v-deep .amap-copyright{
display: none !important;
}
四、地图自定义样式
可使用官方提供的自定义地图（省时省力）map.setMapStyle("amap://styles/whitesmoke");
// 地图创建之后使用
var map = new AMap.Map("container", {
zoom: 10, //设置地图的缩放级别
});
map.setMapStyle("amap://styles/whitesmoke");
可自行创建定制地图 👉传送门 创建定制地图的可分享复制给其他账号
提示：使用自定义地图id需要配合该账号下key、密钥才能使用，。
map.setMapStyle("amap://styles/你的自定义地图id");
其他
1.AMap官方坐标拾取器
开发可能会用到坐标拾取器， 采点找位置包方便的。 👉地址
后面会持续更新 官方文档
如果你觉得这篇文章对你有帮助，请点赞 👍、收藏 👏 并关注我！👀
