uniapp使用百度地图 vue-baidu-map插件在app端白屏问题兼容方案

上篇文章是vue中pc端使用vue-baidu-map进行开发，项目还需要app端,这篇主要是在app端vue-baidu-map在app上白屏，使用内嵌html方法进行兼容开发，希望可以帮到大家

 主要实现点位显示 路线显示 点击事件 各种切换显示 

首先使用web-view进行跳转，html页面建议放在static文件夹下，其他文件夹会有问题

 将参数传递过去

<!-- 地图页面 -->
	<view class="content">
		<web-view id="iframeMap" :name="token"  :src="`/static/html/map.html?token=${token}&name=${name}&BASE_URL=${BASE_URL}`"></web-view>
	</view>

 map.html页面head中引入各种文件

<script src="./vue.js"></script>
<script src="./axios.js"></script>
<!-- 引入ElementUI样式 -->
<link rel="stylesheet" href="./element.css">
<!-- 引入ElementUI组件库 -->
<script src="./element.js"></script>

 在body中写入节点,id要唯一，因为使用了vue.js让他变成容器

<div id='mapPage'></div>

 地图容器  可以看看百度地图文档 什么都有 

<div id='mapPage'>
  <div id='container'></div>
</div>

 下面引入百度地图和uni.webview.js uni.webview.js是用来跳转回项目组件

<script type="text/javascript" src="./webview.js">
	</script>
	<!-- <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js">
	</script> -->

	<!-- 百度地图 -->
	<script type="text/javascript"
		src="https://api.map.baidu.com/api?v=3.0&&type=webgl&ak=百度id"></script>

 开始进行地图显示

<script>
new Vue({
	el: '#mapPage',
     data(){
         map: null,
     },
created() {
				let obj = {}
                // 获取传递的参数
				let list = decodeURIComponent(window.location.href).split('?')
				let list1 = list[1].split('&')
				list1.forEach(item => {
					let list2 = item.split('=')
					obj[list2[0]] = list2[1]
				})
				// console.log(obj)
				this.token = obj.token
				this.name = obj.name
				this.BASE_URL = obj.BASE_URL
}
    mounted() {
				// console.log(this.map, 'this.map')
				this.map = new BMapGL.Map("container"); // 创建地图实例
				let point = new BMapGL.Point(108.944, 34.335); // 创建点坐标 
				this.map.centerAndZoom(point, 13); // 初始化地图，设置中心点坐标和地图级别
				this.map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
			},
})
</script>

标注点显示

// 显示车辆标注点
				carDataIs() {
					let markerList = []
					let nameList = []
                    // 标注点数据
					this.carMapList.forEach((item, index) => {
						// console.log(item)
						let point = new BMapGL.Point(item.lng, item.lat); // 创建点坐标
						let name = item.vehicleName
                        // item.path为标注点照片我这块是本地路径 后面是照片大小 可以参考官方文档
						let myIcon = new BMapGL.Icon(item.path, new BMapGL.Size(15, 30));
						let marker = new BMapGL.Marker(point, {
							icon: myIcon
						}); //, 
						// 我这块是显示车辆 所以这块是车头方向
						let rsRotation = item.rotation;
						marker.setRotation(rsRotation);
						let label = new BMapGL.Label(name, { // 创建文本标注
							position: point,
							offset: new BMapGL.Size(-30, 18)
						})
                        // 文本样式
						label.setStyle({
							fontSize: '10px',
							height: '20px',
							lineHeight: '20px',
							border: '1px solid #000',
							transform: 'scale(0.8)',
							padding: '0 5px',
						})
						markerList[index] = marker
						markerList[index].id = item.id
						nameList[index] = label
						nameList[index].id = item.id
						// this.map.addOverlay(marker);
                         // 监听标注点点击事件
						marker.addEventListener("click", () => {
							
							this.carButObj = item
							this.mapBottomIs = false
						});
					})
					// 多加一次循环为了将id添加进去 后面进行消失处理需要使用id
					markerList.forEach(item => {
						this.map.addOverlay(item);
					})
					nameList.forEach(item => {
						this.map.addOverlay(item);
					})

                    // 这是将视图变为某个点的坐标 
					let point = new BMapGL.Point(this.carMapList[0].lng, this.carMapList[0].lat); // 创建点坐标
					this.map.centerAndZoom(point, 13);

				},

 让标注点消失

// 清除车辆坐标
				carDataHide() {
					let allOverlay = this.map.getOverlays();
					for (let i = 0; i < allOverlay.length; i++) {
						// this.carListId是这一组汽车标注点有多少点  条件符合让他消失
						if (this.carListId.includes(allOverlay[i].id)) {
							this.map.removeOverlay(allOverlay[i]);
						}
					}
				},

显示路线

// 显示路线
				routeDataIs(index = 0) {
					let pois = []
					let markerList = []
					JSON.parse(this.routeList[index].coordinates).forEach(item => {
						pois.push(new BMapGL.Point(item.lng, item.lat)); // 创建点坐标
					})
					let polyline = new BMapGL.Polyline(pois, {
						strokeColor: '#007aff'
					})

					markerList[index] = polyline
					markerList[index].id = this.routeList[index].id
					markerList.forEach(item => {
						this.map.addOverlay(item);
					})

					let point = new BMapGL.Point(JSON.parse(this.routeList[index].coordinates)[0].lng, JSON.parse(this
						.routeList[index].coordinates)[0].lat); // 创建点坐标
					this.map.centerAndZoom(point, 13);
				},

路线消失

// 清除线路
				routeDataHide() {
					let allOverlay = this.map.getOverlays();
					// console.log('allOverlay[0].toString()', allOverlay)
					for (let i = 0; i < allOverlay.length; i++) {
						if (this.routeListId.includes(allOverlay[i].id)) {
							this.map.removeOverlay(allOverlay[i]);
						}
					}
				},

跳转其他页面使用uni.webView才可以

uni.webView.navigateTo({
						url: ``
					})

初次使用 欢迎大家评论讨论