vue中使用百度地图API写一个简单的组件(一)

这里先说明一下，像这种地图组件，个人感觉做成个组件比较合适，当然也可以直接写进页面里，就是复用性差一些。

2020.1.19日，修改一个bug，修改详情见第四步：调用

一、打开百度地图API官网，创建秘钥

点击这里打开官网
下滑浏览器，找到JavaScriptAPI。点击进去，里面便是开发文档，可以根据这里的开发文档使用。想快速构建的还是留在这里看我的吧！
点击申请秘钥去申请一个秘钥，具体步骤请看这里

二、配置vue环境

1、在index.html中添加百度地图JavaScript API接口

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的秘钥" ></script>

下面是我自己项目中的例子

2、在webpack.base.conf.js配置文件中配置BMap，在module.exports 中与entry平级；如果还有其他的，同样在下面引入就可以了;修改完成之后重新 npm run dev

module.exports = {
 entry: {
 app: './src/main.js'
 },
 externals: {
 'BMap': 'BMap',
 'BMap_Symbol_SHAPE_POINT': 'BMap_Symbol_SHAPE_POINT'
 },

下面是我自己项目中的例子

三、在components文件夹中添加一个组件baiduMap.vue

这里是路径位置

这里是代码

<template>
	<div>
		<div class="baidumap" id="allmap">
			
		</div>
		<slot/>
	</div>
</template>

<script>
	import BMap from 'BMap'
	import BMapSymbolSHAPEPOINT from 'BMap_Symbol_SHAPE_POINT'
	export default {
		props: {
			msg:[],
		},
		name: 'baiduMap',
		data() {
			return {

			}
		},
		methods: {
			baiduMap() {
				var map = new BMap.Map('allmap')
				//左上角用于放大的组件
				map.addControl(new BMap.NavigationControl());
				//左下角公里数
				map.addControl(new BMap.ScaleControl());
				//右下角预览地图
				map.addControl(new BMap.OverviewMapControl());
				//右上角三种模式切换
				// map.addControl(new BMap.MapTypeControl());
				map.enableScrollWheelZoom(true);
				if (this.msg=='') {
					return;
				}
				var point = new BMap.Point(this.msg[0].x, this.msg[0].y)
				map.centerAndZoom(point, 13)
				var marker = new BMap.Marker(point) // 创建标注
				map.addOverlay(marker) // 将标注添加到地图中
				if (this.msg.length>=2) {
					this.addMarkers(map)
				} 
			},
			addMarkers(map){
				for(var i=1;i<this.msg.length;i++){
					var point = new BMap.Point(this.msg[i].x,this.msg[i].y)
					var marker = new BMap.Marker(point) // 创建标注
					map.addOverlay(marker) // 将标注添加到地图中
				}
			}
		},
		mounted() {
			this.baiduMap();
		}
	}
</script>

<style scoped="scoped">
	.baidumap {
		width: 100%;
		height: 55rem;
	}
</style>

这里我来讲解一下：首先创建一个<div class="baidumap" id="allmap"></div> 用于展示地图。然后用props接收父页面传递的参数，此参数用于标记地理位置（经度纬度）,因为标记可能是多个，所以我们用数组的形式，这样我们的父页面直接传递过来一个带着经纬度的数组即可，里面还有一些组件和功能就请看注释吧！
注意：地图组件需要导入：

import BMap from 'BMap'
import BMapSymbolSHAPEPOINT from 'BMap_Symbol_SHAPE_POINT'

四、调用

2020.1.19修改：这里由于笔者的失误出现了一个非常弱智的bug，vue中请求是异步的，定位信息还没有传过来就已经开始渲染了组件，所以组件永远是初始值(位置),应当使用v-if等请求信息返回后再进行组件渲染!

小提示: 对于对vue不太玩的转的同学我这里说明一下，这里只能使用v-if而不能使用v-show，因为后者更像是“隐藏”，v-show会进行渲染，而v-if不会进行渲染，固要使用v-if

---

(下方代码已修改)

<template>
	<div>
		<baiduMap v-if="bool" :msg="points"></baiduMap>
	</div>
</template>

<script>
	import API from '@/api'
	import baiduMap from '@/components/ItemApi/baiduMap.vue'
	export default {
		name: 'index',
		data() {
			return {
				points:[{
					x:154.5387114725,
					y:37.0095785384
				}],
				//渲染键
				bool:false
			}
		},
		components:{
			baiduMap
		},
		methods: {
			getJWD(){
				const params={
					
				}
				API.bigConfig.getLonLat(params).then(({
					data
				}) => {
					if (data.code === '200') {
						this.points=data.body;
						this.bool=true
					} 
				})
			},
		},
		mounted() {
			this.getJWD()
		},
	}
</script>

<style scoped="scoped">
	.baidumap{
		width: 100%;
		height: 55rem;
	}
</style>

导入地图组件，直接展示且传递参数即可

五、效果

大小可以根据css中去调，这里只是展示一个样版而已。