如何在vue里面调用高德地图

Posted 2020-10-04 袋袋的阳光生活

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啦