一、申请key###
点击下边的网址,创建应用,然后申请key,后期要用到,如果已经有key,忽略这一步 http://lbs.amap.com/dev/key/app
二、调用高德地图
首先在index.html中加入如下引用
image.png
三、添加配置
在build/webpack.base.conf.js 加入如下配置
externals: {
'AMap': 'AMap',
'AMapUI':'AMapUI'
},
image.png
新建一个map.vue 文件
在javascript标签中引入
import AMap from 'AMap'
编写页面
地图展示
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}))
})
}
}
}
image.png
****也可以使用 vue-amap插件
image.png