VueCli3引入百度地图Api详细步骤+宽高自动页面自适应（踩坑+源代码）

1. 首先去百度地图官网申请ak密钥，这个很简单，百度也有很多教程，就不细说了。

   传送门：申请ak密钥
   开发文档：百度地图API开发文档

2. 打开项目文件，在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 中引入百度地图

1. 在script插入如下代码

import BaiduMap from '@/components/BaiduMap.vue'

	export default {
		name: 'Index',
		components: {
			BaiduMap
		}
	}

2. 即可在template中使用该模板

<template>
	<BaiduMap></BaiduMap>
</template>

完成

今天就到这里~ 我们下个bug再见