集成百度地图,找遍所有教程都是需要在webpack.dev.config.js添加什么配置,但是vue3.0的脚手架已经没有这个文件了,所有对于新手前端来说,看的这教程真是心累,后来自己摸索出来,不需要进行配置也可以使用,所有记录一下笔记
第一步
1.cnpm i vue-baidu-map
或者npm
2.main.js 引入 ak百度地图密钥
import BaiduMap from 'vue-baidu-map'
// 引入百度地图
Vue.use(BaiduMap, {
ak: 't0OubpLl9oKT4MZ6COtUhpYHrGjD1f5F'
})
3.index文件,ak是你的密钥
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=t0OubpLl9oKT4MZ6COtUhpYHrGjD1f5F"></script>
4.可以直接用了
需要使用的页面写入标签是固定的,div必须有,样式高度必须有,id必须有
<baidu-map >
<div id="allmap" class="map"/>
</baidu-map>
5.渲染地图代码
createMap () {
// 创建Map实例
var map = new BMap.Map("allmap")
// 初始化地图,设置中心点坐标和地图级别
map.centerAndZoom(new BMap.Point(121.227577, 31.101471), 11)
//添加地图类型控件
map.addControl(new BMap.MapTypeControl({
mapTypes:[BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]
}))
// 设置地图显示的城市 此项是必须设置的
map.setCurrentCity("上海")
//开启鼠标滚轮缩放
map.enableScrollWheelZoom(true)
},
6.在vue声明周期钩子函数中 调用,this.$nextick必须有,否则渲染不出来
this.$nextTick(function() {
this.createMap();
})