一、在高德地图官网申请key
前往高德地图开发平台高德开放平台 | 高德地图API
二、在vue中使用高德地图
1、安装amap-jsapi-loader工具库
npm i amap-jsapi-loader --save
2.配置密钥(可在main.js中配置)
//配置安全密钥
window._AMapSecurityConfig = {
securityJsCode: '你的密钥' //* 安全密钥
}
3.引入amap-jsapi-loader
import AMapLoader from '@amap/amap-jsapi-loader';
4.在组件中创建地图容器
<div>
<div id='container'></div>
</div>
5.载入高德地图
<script>
// 引入地图插件
import AMapLoader from "@amap/amap-jsapi-loader";
// 设置秘钥(可在main.js配置)
window._AMapSecurityConfig = {
securityJsCode: "申请的密钥",
};
export default {
name: "GaodeMapContainer",
data() {
return {};
},mounted() {
this.initData();
},methods: {
// 1. 展示地图
async initData() {
const AMap = await AMapLoader.load({
key: "申请的key", //申请好的Web端开发者key,调用 load 时必填
version: "2.0", //指定要加载的 JS API 的版本,缺省时默认为 1.4.15
plugins: [
"AMap.ToolBar", // 缩放控件
"AMap.ControlBar", //方向控件
"AMap.MapType", // 图层切换控件
"AMap.Scale", // 比例尺控件
"AMap.HawkEye", // 鹰眼控件
"AMap.Geolocation", // 定位控件
"AMap.MouseTool"
], // 引入地图控件
});
// 1. 展示图层--创建图层
const layer = new AMap.createDefaultLayer({
zooms: [3, 20], //可见级别
visible: true, //是否可见
opacity: 1, //透明度
zIndex: 0, //叠加层级
});
// 2.初始化地图-把地图展示到指定的容器区域内
const map = new AMap.Map("container", {
viewMode: "2D", //默认使用 2D 模式,平面模式
zoom: 11, //地图级别
center: [设置初始坐标], //地图中心点
mapStyle: "amap://styles/normal", //设置地图的显示样式
layers: [layer],
});
// 工具-缩放
const toolbar = new AMap.ToolBar(); //缩放工具条实例化
map.addControl(toolbar);
// 工具方向盘
const controlBar = new AMap.ControlBar();
map.addControl(controlBar);
// 工具-图层切换控件
const mapType = new AMap.MapType();
map.addControl(mapType);
// 工具-比例尺
const scale = new AMap.Scale();
map.addControl(scale);
// 工具-鹰眼控件
const hawkEye = new AMap.HawkEye();
map.addControl(hawkEye);
// 工具-定位控件
const geolocation = new AMap.Geolocation();
map.addControl(geolocation);
},
};
</script>
6.加入容器样式
<style scoped>
#container {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
min-height: 800px;
background: #18820e;
}
</style>
三、效果图
有时间的话更新,实现图中控件功能。如果有不足,请大佬评论指正!