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>

效果图

相关推荐
Asort14 分钟前
JavaScript 从零开始(六):控制流语句详解——让代码拥有决策与重复能力
前端·javascript
EMT35 分钟前
在 Vue 项目中使用 URL Query 保存和恢复搜索条件
javascript·vue.js
艾小码36 分钟前
还在被超长列表卡到崩溃?3招搞定虚拟滚动,性能直接起飞!
前端·javascript·react.js
前端康师傅41 分钟前
JavaScript 作用域常见问题及解决方案
前端·javascript
Mintopia1 小时前
🚀 Next.js 全栈 E2E 测试:Playwright vs Cypress
前端·javascript·next.js
原生高钙1 小时前
JS设计模式指南
前端·javascript
Mintopia1 小时前
⚡ WebAssembly 如何加速 AIGC 模型在浏览器中的运行效率?
前端·javascript·aigc
断竿散人1 小时前
乾坤微前端框架的沙箱技术实现原理深度解析
前端·javascript·前端框架
uhakadotcom1 小时前
在python中,使用conda,使用poetry,使用uv,使用pip,四种从效果和好处的角度看,有哪些区别?
前端·javascript·面试
鹏多多1 小时前
深入解析vue的keep-alive缓存机制
前端·javascript·vue.js