uni-app 中如何使用谷歌地图 !?

最新推荐文章于 2025-03-28 16:11:16 发布

fail-request

最新推荐文章于 2025-03-28 16:11:16 发布

阅读量8.2k

点赞数 1

分类专栏： uni-app跨端开发文章标签： app uni-app google maps vue

本文链接：https://blog.youkuaiyun.com/jz_jingzhen/article/details/119391472

版权

uni-app跨端开发专栏收录该内容

3 篇文章

订阅专栏

最近在做uni-app的项目，由于是海外市场，所以在APP中需要使用到谷歌地图，本文主要是记录一下如何在uni-app中正确引入并使用我们的谷歌地图。（刨除微信小程序，微信小程序中还是使用uni.openLocation）

关于此问题，UNI官方给的说法是：
在这里插入图片描述
这里我选择第一种方法。

1.在引用我们的谷歌地图之前，是需要先注册谷歌地图账号并申请密钥，由于需要翻墙，这里只附录一下链接地址，具体操作注册进入谷歌地图开发者平台之后按照文档操作即可：
Google Map DOC

选择MAP JavaScript API
在这里插入图片描述

开始撸代码：

①.使用一个独立页面承载我们的webview。
在这里插入图片描述
注意：这里的link为我们的html文件地址，可以是网络地址也可以是本地html文件。如果是本地HTML文件的话，需要注意的是文件必须放在与pages文件夹同级别的hybrid文件的html文件夹下，这一点官方文档上有所说明

②.google-map.html（用来承载我们谷歌地图代码的页面）
这里直接就不做阐述，直接上代码了。需要注意的地方就是script标签中引入谷歌地图文件的那个key一定要写对，同时，我们在测试的时候必须是墙外环境，国内是无法访问谷歌地图的。

<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
		<script
			src="https://maps.googleapis.com/maps/api/js?key=你的密钥&callback=initMap&libraries=&v=weekly"
			defer>
		</script>
		<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js">
		</script>
		<style type="text/css">
			#map {
				height: 100%;
				width: 100%;
			}

			html,
			body {
				height: 100%;
				width: 100%;
				margin: 0;
				padding: 0;
			}
		</style>
	</head>
	<body>
		<div id="map"></div>
	</body>
</html>
<script>
	document.addEventListener('UniAppJSBridgeReady', function() {
		uni.postMessage({
			data: {
				action: 'message'
			}
		});
		uni.getEnv(function(res) {
			console.log('当前环境：' + JSON.stringify(res));
		});
	});
</script>
<script>
	var map = null
	function initMap() {
		var centerPoint = {
			lat: Number(GetUrlParam('lat')),
			lng: Number(GetUrlParam('log'))
		};
		var covers = GetUrlParam('covers')?JSON.parse(decodeURIComponent(GetUrlParam('covers'))):null
		if (covers) {
			//https://now.guua.com/attachs/default/location_shop.png  location_staff.png
			covers[0].iconPath = covers[0] ? 'https://now.guua.com/attachs/default/location_shop.png' : ''
			
		}
		document.title = decodeURIComponent(GetUrlParam('title'))
		
		//新建map
		map = new google.maps.Map(document.getElementById("map"), {
			zoom: 16,
			center: centerPoint,
		});
		if (covers && covers[0]) {
			//标记点
			const shopMarker = new google.maps.Marker({
				position: {
					lat: Number(covers[0].lat),
					lng: Number(covers[0].lng),
				},
				map,
				icon:{
					url: covers[0].iconPath || '',
					scaledSize: new google.maps.Size(50, 50), 
					origin: new google.maps.Point(0,0),
					anchor: new google.maps.Point(0, 0) 
				}
			});
		}
	}

	// 处理URL参数
	function GetUrlParam(paraName) {
		var url = window.location.href;
		var arrObj = url.split("?");
		if (arrObj.length > 1) {
			var arrPara = arrObj[1].split("&");
			var arr;
			for (var i = 0; i < arrPara.length; i++) {
				arr = arrPara[i].split("=");
				if (arr != null && arr[0] == paraName) {
					return arr[1];
				}
			}
			return "";
		} else {
			return "";
		}
	}
</script>