-
首先去百度地图官网申请ak密钥,这个很简单,百度也有很多教程,就不细说了。
传送门:申请ak密钥
开发文档:百度地图API开发文档 -
打开项目文件,在public文件夹下的index.html页面中引入百度地图API
这里的密钥,要替换为你刚才申请的ak密钥
<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=3.0&ak=密钥"></script>
3.在src->components文件夹下新建一个vue组件,我把它命名为:BaiduMap.vue,然后贴上代码
<template>
<div id="map" :style="{height:mapHeight}">
<div id="allmap" ref="allmap"></div>
</div>
</template>
<script>
export default {
name: "BaiduMap",
methods: {
map() {
let map = new window.BMap.Map(this.$refs.allmap); // 创建Map实例
map.centerAndZoom(new window.BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
map.addControl(
new window.BMap.MapTypeControl({
// 添加地图类型控件
mapTypes: [window.BMAP_NORMAL_MAP, window.BMAP_HYBRID_MAP],
})
);
map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
},
initMapHeight() {
var main = document.getElementById("map");
main.style.height = window.innerHeight + "px";
},
},
data() {
return {
mapHeight: 800 + "px",
};
},
mounted() {
this.initMapHeight();
this.map();
window.onresize = () => {
return (() => {
this.mapHeight = window.innerHeight + 'px';
})();
};
},
};
</script>
<style>
#allmap {
height: 100%;
overflow: hidden;
}
</style>
先来解释一下上面的代码,百度地图的容器必须在有高度的div中才能进行渲染,为了实现页面自适应的效果,为id为map的父元素绑定了动态高度mapHeight,并在页面加载的时候初始化这个值,这样容器就有高度了,这个高度在页面发送变化的时候会被更新。
window.onresize = () => {
return (() => {
this.mapHeight = window.innerHeight + 'px';
})();
};
其他代码阅读开发文档后就都明白了
开发文档:百度地图API开发文档
————————————————————————————————————————————————
到这里,百度地图的组件就做好了,当你需要用它的时候把他引入相应的界面就可以了。
什么?你别告诉我你不会引入界面……
比如我们要在index.vue 中引入百度地图
- 在script插入如下代码
import BaiduMap from '@/components/BaiduMap.vue'
export default {
name: 'Index',
components: {
BaiduMap
}
}
- 即可在template中使用该模板
<template>
<BaiduMap></BaiduMap>
</template>
完成
今天就到这里~ 我们下个bug再见