1.修改webpac.base.conf.js文件

與module同一級添加

externals: {
‘AMap‘: ‘AMap‘,
‘AMapUI‘: ‘AMapUI‘
}配置。

然後在index頁面引入文件

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=0a8af796be110fd26b4b63d99fd93a6c"></script>

接著下載包vue-amap，

然後在vue頁面中

<template>
<div>
<div id="container" style="width:750px; height:1200px"></div>
</div>
</template>
<script>
import AMap from ‘AMap‘//在使用地圖的頁面引入該組件
var map
export default {
mounted: function () {
this.init()
},
methods: {
init: function () {
map = new AMap.Map(‘container‘, {
center: [116.34301260000001, 39.9662898],
resizeEnable: true,
zoom: 10
})
//創建一個marker
var marker = new AMap.Marker({//在地圖上顯示自己的位置標記
position: [116.34301260000001, 39.9662898],//marker所在的位置
map:map//創建時直接賦予map屬性
});
AMap.plugin([‘AMap.ToolBar‘, ‘AMap.Scale‘], function () {
map.addControl(new AMap.ToolBar())
map.addControl(new AMap.Scale())
})
}
}
}
</script>
<style scoped>
</style>

這樣基本的地圖調用就OK啦

如何在vue裏面調用高德地圖