uniapp 移动端使用百度地图实现电子围栏

开始想参考使用,百度示例的来实现电子围栏。
百度示例地址: 链接: https://lbsyun.baidu.com/jsdemo.htm#gl_tool_2
但该示例是鼠标方案实现,在手机上显示H5时无法操作.

所以只能换了一种写法。

vue 代码

<template>
	<view>
		<view>
			<slider :min="500" :max="2000" @changing="changeRadius" @change="changeRadius" :value="radius"
				:show-value="showSlider" />
		</view>
		<!--内容部分-->
		<view class="info" style="display: flex;justify-items: flex-start;">
			<button @click="do_circle" size="mini">打开圆形</button>
			<button @click="do_polygon" size="mini">打开多边形</button>
			<button @click="do_clean" size="mini">清空</button>
		</view>
		<view class="maps-container">
			<view id="allmap" style="width: 100%;height: 800px;"></view>
		</view>
		<!-- 新增地址 -->
		<view class="tui-addr-save">
			<button shadow  shape="circle" @click="do_saveFence">+ 保存</button>
		</view>
	</view>
</template>


<script>
	import {
		mymap
	} from "./map.js";
	var bmap = null;
	//圆形围栏
	var fence_circle = null;
	//多边形围栏
	var fence_polygon = null;
	//多边形围栏--辅助marker点
	var polygon_marker = null;

	export default {
		data() {
			return {
				// 百度地图参数
				location: {
					lng: 113.904,
					lat: 22.615,
					address: '',
				},
				zoom: 14,
				showSlider: false,
				radius: 1000,
			}
		},
		onLoad() {

		},
		onReady() {

		},
		async mounted() {
			this.init();
		},
		methods: {
			init: function() {
				mymap().then(() => {
					// 创建百度地图实例				
					bmap = new BMapGL.Map("allmap");
					let point = new BMapGL.Point(this.location.lng, this.location.lat);
					bmap.centerAndZoom(point, this.zoom);
					bmap.clearOverlays();
					//this.initScript();
				})
			},
			initScript: function() {
				var link_1 = document.createElement('script')
				link_1.rel = 'stylesheet'
				link_1.src =
					`https://mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.css`
				document.head.appendChild(link_1)

				var script_1 = document.createElement('script')
				script_1.type = 'text/javascript'
				script_1.src =
					`https://mapopen.bj.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.js`
				document.head.appendChild(script_1)
			},
			detail: function() {},
			async do_saveFence() {},
			do_circle() {
				if (fence_circle) {
					return;
				}
				this.showSlider = true;
				
				//创建圆心点	
				var point = new BMapGL.Point(this.location.lng, this.location.lat);
				var marker = new BMapGL.Marker(point, {
					enableDragging: true
				});
				bmap.addOverlay(marker);
				//创建圆形围栏	
				fence_circle = new BMapGL.Circle(point, this.radius, {
					strokeColor: 'blue',
					strokeWeight: 2,
					strokeOpacity: 0.5,
					enableEditing: false,
				});
				bmap.addOverlay(fence_circle);
				//可通过拖动圆心点，调整围栏的位置	
				marker.addEventListener('dragging', function(e) {
					const nowPoint = marker.getPosition()
					fence_circle.setCenter(nowPoint);
				})
			},
			changeRadius: function(e) {
				if (fence_circle) {
					//可通过顶部滑块，调整圆形围栏的大小
					fence_circle.setRadius(e.detail.value);
				}
			},
			do_clean(e) {
				//清空数据
				bmap.clearOverlays();
				this.showSlider = false;
				fence_circle = null;
				fence_polygon = null;
				polygon_marker = new Array();
				bmap.removeEventListener('click',function(e){
					console.log(e);
					alert(e);
				})
			},
			do_polygon: function() {
				var that = this;
				polygon_marker = new Array();
				//绑定地图点击事件,通过设定多个marker 连线形成多边线围栏
				bmap.addEventListener('click', function(e) {
					var point = new BMapGL.Point(e.latlng.lng, e.latlng.lat);
					var marker = new BMapGL.Marker(point, {
						enableDragging: true
					});
					polygon_marker.push(marker);
					bmap.addOverlay(marker);
					//可通过拖动marker，调整围栏的位置	
					marker.addEventListener('dragging', function(e) {
						that.show_polygon();
					})
					that.show_polygon();
				})
			},
			show_polygon: function() {
				if (polygon_marker.length >= 3) {
					var points = new Array();
					//取到所有makrer的点
					polygon_marker.map((item, index) => {
						points.push(item.getPosition());
					})
					
					if (fence_polygon) {
						//已经存在多边形,进行更新
						fence_polygon.setPath(points);
						return
					} else {
						//创建多边形围栏
						fence_polygon = new BMapGL.Polygon(points, {
							strokeColor: 'blue',
							strokeWeight: 2,
							strokeOpacity: 0.5
						});
						bmap.addOverlay(fence_polygon);
					}
				}
			}
		}
	}
</script>

<style>
	.maps-container {
		width: 100%;
		margin-top: 10rpx;
		overflow: hidden;
	}
</style>

js代码块

因为uniapp的index.html中，无法加载百度地图。
所以使用document append script块的办法处理.

map.js

export function mymap() {

    return new Promise(function(resolve, reject) {
        window.init = function() {
            resolve(mymap)
        }
        var script = document.createElement('script')
        script.type = 'text/javascript'
        script.src =
            `https://api.map.baidu.com/api?type=webgl&v=1.0&ak=你的ak&callback=init`
        script.onerror = reject
        document.head.appendChild(script)
    })
}

效果图1，圆形围栏

可通过滑块，和红点 调整

效果图1，多边形围栏

先打开多边开，点击地图至少创建三个红点，形成面。