在VueCli中使用高德地图
程序员文章站
2022-04-24 09:27:16
...
一.在public文件夹下面的index.html文件中引入
<script src="https://webapi.amap.com/maps?v=1.4.15&key=自己的key值"></script>
注意 这个引用需要放在body标签内部
二.配置vue.config.js文件
这个文件需要自己配置位置如图module.exports={ configureWebpack:{ externals:{ 'AMap':'AMap' } } }
三.重新跑一下这个项目
npm run serve
四.实际应用
import AMap from "AMap"
export default{
mounted(){
this.GaodeMap()
},
methods:{
GaodeMap(){
var map = new AMap.Map("map", {
zoom: 15, //设置地图显示的缩放级别
center: [113.668227, 34.783391] //设置地图中心点坐标
});
var marker = new AMap.Marker({
position: new AMap.LngLat(113.668227, 34.783391), // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]
title: "位置标题"
});
map.add(marker);
}
}
}
上一篇: php+apache+linux的配置
下一篇: 字体图标如何使用?总结字体图标实例用法