一、申請(qǐng)key###
點(diǎn)擊下邊的網(wǎng)址棺聊，創(chuàng)建應(yīng)用伞租，然后申請(qǐng)key，后期要用到限佩，如果已經(jīng)有key葵诈，忽略這一步 http://lbs.amap.com/dev/key/app
二、調(diào)用高德地圖
首先在index.html中加入如下引用
<script src="https://webapi.amap.com/maps?v=1.4.8&key=第一步申請(qǐng)的key"></script>
<!--引入U(xiǎn)I組件庫(kù)（1.0版本） -->
<script src="https://webapi.amap.com/ui/1.0/main.js"></script>
image.png
三祟同、添加配置
在build/webpack.base.conf.js 加入如下配置
externals: {
'AMap': 'AMap',
'AMapUI':'AMapUI'
},
image.png
新建一個(gè)map.vue 文件
在javascript標(biāo)簽中引入
import AMap from 'AMap'
編寫(xiě)頁(yè)面
<template>
<div>
<div id="map-container" style="width: 100%;height: 600px"> </div>
地圖展示
</div>
</template>
<script>
import AMap from 'AMap'
export default {
name: "map.vue",
mounted() {
this.init()
},
methods:{
init(){
const map = new AMap.Map('map-container', {
zoom: 11,
center:[116.397428,39.90923],
viewMode:'3D'
})
map.plugin(['AMap.ToolBar', 'AMap.MapType'], function () {
map.addControl(new AMap.ToolBar())
map.addControl(new AMap.MapType({showTraffic:false,showRoad:false}))
})
}
}
}
</script>
<style scoped>
</style>
image.png
****也可以使用 vue-amap插件
image.png
