- 首先引用高度地图显示出来
在项目最外层添加文件
文件内容:
module.exports = {
//...
// baseUrl: '/admin/'
//
configureWebpack: {
externals: {
'AMap': 'AMap' // 高德地图配置
}
}
}
然后在index.html页面引入:
<script type="text/javascript" src="//webapi.amap.com/maps?v=1.3&key=120b2484e4ad85e620c4c80ee7948c32"></script>
<script src="//webapi.amap.com/ui/1.0/main.js"></script>
然后在需要添加地图的页面添加上:
<div id="container" class="mymap"></div>
import AMap from 'AMap'; //在页面中引入高德地图
mounted:function(){
this.loadmap(); //加载地图和相关组件
},
methods: {
loadmap(){
const map = new AMap.Map('container', {
zoom: 9
});
},
}
<style scoped>
.mymap{
width: 100%;
height: 800px;
}
</style>
- 继续进行在地图上选中添加