uniapp中使用第三方百度地图

要使用第三方百度地图，首先要去百度地图官方申请一个密钥，之后引入百度地图的API文件，参考使用文档即可开发使用。而在uniapp中是没法直接引入百度地图API文件的，我们要结合uniapp中的web-view组件来使用。web-view 是一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面（nvue 使用需要手动指定宽高）。各小程序平台，web-view 加载的 url 需要在后

小笑残虹

13487人浏览 · 2021-03-28 10:15:57

小笑残虹 · 2021-03-28 10:15:57 发布

要使用第三方百度地图，首先要去百度地图官方申请一个密钥，之后引入百度地图的API文件，参考使用文档即可开发使用。而在uniapp中是没法直接引入百度地图API文件的，我们要结合uniapp中的web-view组件来使用。

web-view 是一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面（nvue 使用需要手动指定宽高）。

各小程序平台，web-view 加载的 url 需要在后台配置域名白名单，包括内部再次iframe内嵌的其他url。

在这里插入图片描述

经过我多次实验web-view要引入的.HTML文件放到hybrid/html目录下面一直存在问题，然而放到static目录下面是正常的。

在用到地图的页面，通过web-view组件引入开发百度地图的静态页面

<template>
	<view class="alarmManagement">
		<!-- Map -->
		<view class="map" :style="[{height: winHeight + 'px'}]">
			<web-view src="/static/html/map.html"></web-view>
		</view>
	</view>
</template>

在/static/html/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 class='normal conter'>正常：90</div>
			<div class='warn conter'>报警：90</div>
			<div class='error conter'>故障：90</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=您的密钥"></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() {
			$('.normal').click(function(){
				goDetailPage('normal');
			})
			
			$('.warn').click(function(){
				goDetailPage('warn');
			})
			
			$('.error').click(function(){
				goDetailPage('error');
			})
			
			// 跳转到列表详情页面
			function goDetailPage(type){
				uni.navigateTo({
					url: `/pages/alarmListDetail/alarmListDetail?type=${type}`
				})
			}	
			
			// ------------------------------------  配置百度地图  --------------------------------------------------------------------------------
			
			var map = new BMapGL.Map("container"); // 创建地图实例
			var point = new BMapGL.Point(113.567845, 34.824952); // 创建点坐标 
			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); // 将标注添加到地图中
			// 监听标注事件
			marker.addEventListener("click", function() {
				console.log("您点击了标注");
				// 跳转到厂区地图页面
				uni.navigateTo({
					url: '/pages/factoryMap/factoryMap'
				})
			});

			// 向地图中添加文本标注
			var content = "国家863软件园";
			var label = new BMapGL.Label(content, { // 创建文本标注
				position: point, // 设置标注的地理位置
				offset: new BMapGL.Size(0, 0) // 设置标注的偏移量
			})
			// map.addOverlay(label); // 将标注添加到地图中
			// label.setStyle({ // 设置label的样式
			// 	color: '#000',
			// 	fontSize: '30px',
			// 	border: '2px solid #1E90FF'
			// })
			// 监听标注事件
			label.addEventListener("click", function() {
				alert("您点击了标注");
			});
		});
	</script>
</html>