一、申请key###
点击下边的网址，创建应用，然后申请key，后期要用到，如果已经有key，忽略这一步 http://lbs.amap.com/dev/key/app
二、调用高德地图
首先在index.html中加入如下引用
<script src="https://webapi.amap.com/maps?v=1.4.8&key=第一步申请的key"></script>
<!--引入UI组件库（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
新建一个map.vue 文件
在javascript标签中引入
import AMap from 'AMap'
编写页面
<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
