密钥请在官网中申请
高德官网:https://lbs.amap.com/api/jsapi-v2/guide/webcli/map-vue1
1.安装Loader
npm i @amap/amap-jsapi-loader --save
yarn add @amap/amap-jsapi-loader --save
pnpm add @amap/amap-jsapi-loader --save
2.创建地图容器
<template>
<div id="container"></div>
</template>
3.设置地图容器样式
<style scoped>
#container{
padding:0px;
margin: 0px;
width: 100%;
height: 800px;
}
</style>
4.引入JS API Loader
import AMapLoader from '@amap/amap-jsapi-loader';
5.创建地图 地图初始化函数 initMap()
const initMap=()=>{
AMapLoader.load({
key:"", // 申请好的Web端开发者Key,首次调用 load 时必填
version:"2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
plugins:[''], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
}).then((AMap)=>{
this.map = new AMap.Map("container",{ //设置地图容器id
viewMode:"3D", //是否为3D地图模式
zoom:5, //地图的缩放比例
mapStyle: 'amap://styles/whitesmoke', //地图的样式
center:[105.602725,37.076636], //初始化地图中心点位置
});
}).catch(e=>{
console.log(e);
})
},
// 获取到dom后在创建地图
onMounted(async () => {
initMap()
})
6.如果高德地图使用的时2.0版本的话需要配值安全密钥
window._AMapSecurityConfig = {
securityJsCode: '您申请的安全密钥'
}
注意:直接写这段可能会报错,因为window下没有_AMapSecurityConfig这个属性的,需要手动配置,创建一个global.d.ts文件写入一下代码即可
interface Window { _AMapSecurityConfig: { securityJsCode: string } }