一、使用步骤
1.在vue中引入高德地图的加载器
npm i @amap/amap-jsapi-loader --save
在自己的组件中去引用
<template>
//这个div就是你用来存放高德地图的，务必要设置宽高！！
<div id="container">
</div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader';
</script>
<style>
#container {
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
}
</style>
2.添加自己在高德申请的密钥
<template>
<div id="container">
</div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader';
//高德申请的秘钥
window._AMapSecurityConfig = {
securityJsCode: '你申请的密钥',
}
</script>
<style>
#container {
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
position: static !important;
}
</style>
3.加载高德地图
<template>
<div id="container">
</div>
</template>
<script>
export default {
name: "Mapview",
data() {
return {
map: null,
}
},
mounted() {
this.initAMap();
},
methods: {
initAMap() {
AMapLoader.load({
key: '设置您的key', //设置您的key
version: "2.0",
//把你使用到的高德工具Api都放到这个下面
plugins: ['AMap.ToolBar', 'AMap.Driving', 'AMap.MassMarks', 'AMap.PlaceSearch',
'AMap.AutoComplete', 'AMap.MarkerClusterer', 'AMap.MouseTool', 'AMap.Geocoder'
],
Loca: {
version: "2.0"
},
}).then((AMap) => {
//创建map地图实例
this.map = new AMap.Map("container", {
viewMode: "2D",//地图显示为2D还是为3D
zoom: 13, //地图初期所显示的放大级别
resizeEnable: true,
showIndoorMap: false,
zooms: [3, 21],
center: [120.4328176, 36.1763461], //地图初期显示的中心点坐标 青岛
});
}).catch(e => {
console.log("出现了错误", e);
})
}
<script>
这个时候，你已经可以看到基本的地图模型了
4.加载地图上的多边图形，比如把一个区域框起来之类的
<template>
<div id="container">
</div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader';
import coordinate from '@/assets/coordinate.js'
export default {
name: "Mapview",
data() {
return {
map: null,
polygon: null,
}
},
mounted() {
this.initAMap();
},
methods: {
initAMap() {
AMapLoader.load({
key: '设置您的key', //设置您的key
version: "2.0",
//把你使用到的高德工具Api都放到这个下面
plugins: ['AMap.ToolBar', 'AMap.Driving', 'AMap.MassMarks', 'AMap.PlaceSearch',
'AMap.AutoComplete', 'AMap.MarkerClusterer', 'AMap.MouseTool', 'AMap.Geocoder'
],
Loca: {
version: "2.0"
},
}).then((AMap) => {
//创建map地图实例
this.map = new AMap.Map("container", {
viewMode: "2D",//地图显示为2D还是为3D
zoom: 13, //地图初期所显示的放大级别
resizeEnable: true,
showIndoorMap: false,
zooms: [3, 21],
center: [120.4328176, 36.1763461], //地图初期显示的中心点坐标 青岛
});
//实现将地图的某一区域框起来，也就是在地图上绘制多边形
this.polygon = new AMap.Polygon({
path: coordinate.data,//这里设置你要绘制多边形的 点，以数组形式呈现的经纬度的点，以点成线，以线成面
strokeColor: "#ff146e",
strokeWeight: 2,
strokeOpacity: 0.9,
fillOpacity: 0.1,
strokeStyle: "solid",
zIndex: 20,
});
//将地图边框添加到map实例中
this.map.add(this.polygon)
}).catch(e => {
console.log("出现了错误", e);
})
}
<script>
还有很多种操作，这里我也说不过来了 ，具体还是要参考高德开放平台的官方文档哈
地址：概述-地图 JS API v2.0 | 高德地图API
官方示例：JSAPI 加载器-生命周期-示例中心-JS API 2.0 示例 | 高德地图API
