在项目根目录使用 npm 安装依赖包:
npm install @amap/amap-jsapi-loader --save
在项目 main.js 中导入并初始化高德地图:
import Vue from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'
import App from './App'
// 你的高德地图 key
const amapKey = 'YOUR_AMAP_KEY'
Vue.config.productionTip = false
window._AMapSecurityConfig = {
securityJsCode: "「你申请的安全密钥」",
};
AMapLoader.load({
key: amapKey,
version: '2.0',
plugins: [] // 加载插件,如搜索、地理编码等服务
}).then(AMap => {
// 全局保存 AMap 对象
Vue.prototype.$AMap = AMap
}).catch(e => {
console.error(e)
})
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
创建一个页面
<template>
<view>
<view id="map-container" style="width: 100vw; height: 60vh;"></view>
</view>
</template>
<script>
export default {
name: "map-view",
data() {
return {
map: null
}
},
mounted() {
this.initAMap();
},
unmounted() {
this.map?.destroy();
},
methods: {
initAMap() {
this.map = new AMap.Map("map-container", {
// 设置地图容器id
viewMode: "3D", // 是否为3D地图模式
zoom: 11, // 初始化地图级别
center: [116.397428, 39.90923], // 初始化地图中心点位置
})
}
}
};
</script>
<style>
</style>