uniapp接入BMapGL百度地图

下面代码兼容安卓APP和H5

百度地图官网:控制台 | 百度地图开放平台 应用类别选择《浏览器端》

/utils/map.js 需要设置你自己的key

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

页面代码

<template>
	<view class="baiduMap">
		<view class="map" v-bind:style="{ height: windowHeight * 2 + 'rpx'}" id="container"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				windowHeight: "",
			}
		},
		methods: {

		},
		mounted() {
			uni.getSystemInfo({
				success: res => {
					this.windowHeight = res.windowHeight;
				}
			});
		}
	}
</script>

<script module="allmap" lang="renderjs">
	import {
		myBMapGL1
	} from "@/utils/map.js";
	
	let bmap;
	export default {
		data() {
			return {}
		},
		methods: {
			//获取地图信息
			initMap() {
				myBMapGL1().then((res) => {
					// 创建地图实例
					bmap = new BMapGL.Map("container");
					
					//  设置个性化地图
					// bmap.setMapStyleV2({
					// 	styleId: '',
					// });
					
					// 地图初始化,设置中心点坐标和地图缩放比例
					bmap.centerAndZoom(new BMapGL.Point(113.88308, 22.55329), 5);

					// 开启鼠标滚轮缩放
					bmap.enableScrollWheelZoom(true);

					// 地图缩放事件
					bmap.addEventListener('zoomend', (e) => {
						console.log("zoomend--", e);
					});
					// 地图拖拽事件
					bmap.addEventListener('dragend', (e) => {
						console.log("dragend--", e);
					});
				})
			},
		},
		mounted() {
			this.initMap()
		},
		beforeDestroy() {
			// 离开页面销毁地图
			bmap && bmap.destroy();
			bmap = null
		}
	}
</script>

<style lang="scss" scoped>
</style>

效果图

相关推荐
new出一个对象2 小时前
uniapp接入高德地图
uni-app
你挚爱的强哥3 小时前
✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本
javascript·vue.js·jquery
dccose4 小时前
vue3 uniapp 扫普通链接或二维码打开小程序并获取携带参数
小程序·uni-app
前端Hardy4 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189114 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
小镇程序员7 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
疯狂的沙粒7 小时前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript
瑞雨溪7 小时前
AJAX的基本使用
前端·javascript·ajax
力透键背7 小时前
display: none和visibility: hidden的区别
开发语言·前端·javascript