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>

效果图

相关推荐
一斤代码1 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
coderlin_3 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
2501_915918413 小时前
Fiddler中文版全面评测:功能亮点、使用场景与中文网资源整合指南
android·ios·小程序·https·uni-app·iphone·webview
布兰妮甜3 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD3 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding3 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js