[移动开发] uniapp h5集成百度地图

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 移动开发 -> uniapp h5集成百度地图 -> 正文阅读

[移动开发]uniapp h5集成百度地图

第一步：创建 map.html文件

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>百度地图</title>
		<style type="text/css">
			html {
				height: 100%
			}

			body {
				height: 100%;
				margin: 0px;
				padding: 0px
			}

			#mapPage {
				height: 100%;
				position: relative;
			}

			#container {
				height: 100%
			}

			.conter {
				width: 30%;
				height: 60px;
				line-height: 60px;
				/* 毛玻璃效果 */
				background: rgba(255, 255, 255, 0.20);
				box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
				backdrop-filter: blur(4.5px);
				-webkit-backdrop-filter: blur(4.5px);
				border-radius: 10px;
				border: 1px solid rgba(255, 255, 255, 0.18);
				position: absolute;
				right: 6px;
				text-align: center;
				font-weight: bold;
				z-index: 1000;
			}

			.normal {
				top: 40px;
				color: #19be6b;
			}

			.warn {
				top: 110px;
				color: #ff9900;
			}

			.error {
				top: 180px;
				color: #fa3534;
			}
		</style>
	</head>
	<body>
		<div id='mapPage'>
			<div id='container'></div>
		</div>
	</body>
	<!-- 微信 JS-SDK 如果不需要兼容小程序，则无需引用此 JS 文件 -->
	<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

	<!-- uni 的 SDK -->
	<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js">
	</script>

	<!-- 百度地图 -->
	<script type="text/javascript"
		src="https://api.map.baidu.com/api?v=3.0&&type=webgl&ak=XxNPnEwtZydqXQyXcNhDXNSOo6WgzZdh"></script>

	<!-- 引入jquery -->
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

	<script type="text/javascript">
		document.addEventListener('UniAppJSBridgeReady', function() {
			//取url中的参数值
			let arr = window.location.href.split('?')
			let data = decodeURIComponent(arr[1]);
			let lng = data.split('&')[0];
			let lat = data.split('&')[1];

			// --------------  配置百度地图  ------------------------------
			var map = new BMapGL.Map("container"); // 创建地图实例
			var point = new BMapGL.Point(lng, lat); // 创建点坐标 
			map.centerAndZoom(point, 17); // 初始化地图，设置中心点坐标和地图级别
			map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

			var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
			map.addControl(scaleCtrl);
			var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
			map.addControl(zoomCtrl);
			var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
			map.addControl(cityCtrl);
			// 添加标注点
			var marker = new BMapGL.Marker(point); // 创建标注   
			map.addOverlay(marker); // 将标注添加到地图中
		});
	</script>
</html>

第二步：创建map.vue文件并将map.html嵌入

<template>
	<view class="alarmManagement">
		<!-- Map -->
		<view class="map"><web-view :src="url"></web-view></view>
	</view>
</template>

<script>
export default {
	data(){
		return{
			url:`/static/html/map.html?`,
		}
	},
	onLoad(option){
		this.url += encodeURIComponent(`${option.longitude}&${option.latitude}`)
	},
}
</script>

<style>
.map {
	width: 90%;
	height: 90%;
}
</style>