uni- app 百度地图 多边形展示

引入map.js 文件 使用百度地图

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

页面上使用

<template>

	<view class="allmap-container">
		<view :prop="mapList" :change:prop="allmap.updateinitMap" id="allmap"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mapList: []
			}
		},
		onShow() {
			this.getMapList()
		},
		methods: {
			getMapList() {
				let arr = [{
						latitude: 41.685194477182144,
						longitude: 123.46942230885678
					},
					{
						latitude: 41.68046812508657,
						longitude: 123.47052030960228
					},
					{
						latitude: 41.68364294390573,
						longitude: 123.47144287112062
					},
					{
						latitude: 41.685194477182144,
						longitude: 123.46942230885678
					}
				]
				this.$nextTick(() => {
					this.mapList = arr
				})
			}
		}
	}
</script>
<script module="allmap" lang="renderjs">
	import {
		mymap
	} from "static/map.js";

	export default {
		data() {
			return {
				map: null,
				ak: 'xVb6kivIHNKabK0IVFItFFs0HfOvMTdj'
			}
		},


		methods: {

			updateinitMap(newValue, oldValue, ownerInstance, instance) {
				// 监听 service 层数据变更  
				this.initMap(newValue)

			},
			initMap(mapList) {
				this.$nextTick(() => {
					let _this = this;
					mymap(_this.ak).then((mymap) => {
						let list = mapList
						let map = new BMapGL.Map("allmap");
						let arrs = _this.calculateCenter(list)
						let point = new BMapGL.Point(arrs.lng * 1, arrs.lat * 1);
						map.centerAndZoom(point, 16);
						map.setTilt(0);
						map.setHeading(0);
						map.enableScrollWheelZoom();
						let arr = []
						list.map(v => {
							arr.push(new BMapGL.Point(v.longitude * 1, v.latitude * 1))
						})
						setTimeout(() => {

							let polygon = new BMapGL.Polygon(arr, {
								strokeColor: "blue",
								fillColor: 'blue',
								fillOpacity: 0.2,
								strokeWeight: 2,
								strokeOpacity: 0.5
							});
							map.addOverlay(polygon);
						}, 500)
					});
				});
			},
			// 计算中心点
			calculateCenter(lnglatarr) {
				var total = lnglatarr.length;
				var X = 0,
					Y = 0,
					Z = 0;
				lnglatarr.forEach((lnglat, index) => {
					var lng = lnglat.longitude * Math.PI / 180;
					var lat = lnglat.latitude * Math.PI / 180;
					var x, y, z;
					x = Math.cos(lat) * Math.cos(lng);
					y = Math.cos(lat) * Math.sin(lng);
					z = Math.sin(lat);
					X += x;
					Y += y;
					Z += z;
				})


				X = X / total;
				Y = Y / total;
				Z = Z / total;

				var Lng = Math.atan2(Y, X);
				var Hyp = Math.sqrt(X * X + Y * Y);
				var Lat = Math.atan2(Z, Hyp);
				return {
					lng: Lng * 180 / Math.PI,
					lat: Lat * 180 / Math.PI
				};
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.allmap-container .amap-logo {
		right: 0 !important;
		left: auto !important;
		display: none !important;
	}


	#allmap {
		width:100vw;
		height: 100vh;
	}
</style>