uniapp使用webview调用谷歌地图的完整过程(小程序+app端)

更新时间：2025年07月09日 10:22:08 作者：蔡一一

最近在做uni-app的项目,由于是海外市场,所以在APP中需要使用到谷歌地图,这篇文章主要介绍了uniapp使用webview调用谷歌地图(小程序+app端)的相关资料,需要的朋友可以参考下

前言

适用小程序和app端；具体功能可以搜索地址，选中地址返回。

一.前期准备

1.谷歌地图需要科学上网，否则无法加载。需要的软件自己备好，后续在模拟器测试也可以用到。

2.申请谷歌地图密钥

平台地址：https://developers.google.cn/maps/gmp-get-started

选择Maps JavaScript API

如需使用搜索地址则需开启，启用Places API（原先旧的api,在H5使用可能出现跨域问题，如后端可以解决，可直接使用这个）和Places API（New）（新的api，返回报错403）

二.相关代码

1.uniapp代码

点击选择地址页面

跳转地图显示页面

这里我看别人可以使用放置在本项目的html文件（例如/hybrid/html/map.html），但是我引用本地的没效果，后面就替换成线上的了。

但是这里你可以在本地运行html文件，然后使用本地ip调用可以做调试用

注意：
1.这里的@message="postMessageFun"方法是接收来自html页面的返回值。
2.如果需要在模拟器校验app效果，需要换成线上地址。

2.html文件

这里引入了vue，有些是vue写法的

<!DOCTYPE html>
<html style="width: 100vw;height: 100vh;">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<!-- 引入vue -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

		<!-- 引入样式element组件 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="external nofollow" >
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>

		<!-- 引入less处理器 -->
		<link rel="stylesheet/less" type="text/css" href="./css/map.less" rel="external nofollow"  />
		<script src="https://cdn.jsdelivr.net/npm/less"></script>

		<!-- 引入axios -->
		<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
	</head>
	<body>
		<div id="app" class="popup">
			<div class="tools">
				<i class="el-icon-circle-close close-icon" @click="close"></i>
				<el-button type="primary" class="tools-btn" @click="confirm">Confirm</el-button>
			</div>
			<div class="map">
				<div id="googleMap"></div>
			</div>
			<div class="box">
				<div class="label">
					<i class="el-icon-search search-icon"></i>
					<input v-model="searchAddress" type="text" placeholder="search place"
						placeholder-style="color:#b8b8b8;" />
				</div>
				<div class="lists">
					<div class="list" v-for="(item, index) in list">
						<div class="radio-box">
							<span class="radio-name">{{ item.name }}</span>
							<span class="radio-text">{{ item.formatted_address }}</span>
						</div>
						<el-radio v-model="current" :label="index.toString()" @input="radioChange"> </el-radio>
					</div>
				</div>
			</div>
		</div>
	</body>

	<!-- 微信 JS-SDK  -->
	<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>
		// 初始化地图
		var map;

		function initMap() {
			//页面传过来的参数arr
			var mapPointResult = GetUrlParam('arr') ? JSON.parse(decodeURIComponent(GetUrlParam('arr'))) : [{
				lng: 103.53028,
				lat: 10.62592
			}];

			var centerPoint = {
				lat: mapPointResult[0].lat,
				lng: mapPointResult[0].lng,
			};

			map = new google.maps.Map(document.getElementById('googleMap'), {
				center: centerPoint,
				zoom: 16
			});

			var marker = new google.maps.Marker({
				position: centerPoint,
				map: map,
				icon: {
					url: 'https://now.guua.com/attachs/default/location_shop.png',
					scaledSize: new google.maps.Size(30, 30),
					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 "";
			}
		}

		// 定位(这里如果需要搜索选中地址后定位到选中位置，可以调用这个方法)
		// function searchAddress() {
		// 	var address = '北京';
		// 	var geocoder = new google.maps.Geocoder();
		// 	geocoder.geocode({
		// 		'address': address
		// 	}, function(results, status) {
		// 		if (status === 'OK') {
		// 			var latlng = results[0].geometry.location;
		// 			var map = new google.maps.Map(document.getElementById('googleMap'), {
		// 				zoom: 15,
		// 				center: latlng
		// 			});
		// 			var marker = new google.maps.Marker({
		// 				position: latlng,
		// 				map: map,
		// 				title: 'Address Location'
		// 			});
		// 		} else {
		// 			alert('Geocode was not successful for the following reason: ' + status);
		// 		}
		// 	});
		// }
	</script>

	<!-- 引入谷歌地图 -->
	<script src="https://maps.googleapis.com/maps/api/js?key=你的秘钥&callback=initMap"
		async defer></script>

	<script>
		new Vue({
			el: '#app',
			data: {
				googleKey: '你的秘钥',
				searchAddress: '',
				current: -1,
				list: [],
				curPlace: false
			},

			watch: {
				searchAddress: {
					handler(newV) {
						if (newV) {
							this.searchFindAddress();
						} else {
							this.list = [];
						}
					},
					deep: true
				}
			},

			methods: {
				// 关闭地图
				close() {
					uni.navigateBack({
						delta: 1
					});
				},

				// 选中地址
				confirm() {
					let thar = this;
					if (this.curPlace) {
						let curPlace = JSON.parse(this.curPlace);
						let latlng = {
							lat: curPlace.geometry.location.lat,
							lng: curPlace.geometry.location.lng
						};

						let url =
							`https://maps.googleapis.com/maps/api/geocode/json?key=${this.googleKey}&latlng=${latlng.lat},${latlng.lng}&language=en`;

						axios.get(url).then(res => {
							console.log('确定选中地址回调', res)
							if (res.status == 200) {
								let resData = res.data;
								let compound_code = resData.plus_code.compound_code;
								compound_code = compound_code.split(' ');
								let obj = {
									compound_code: compound_code[1],
									latlng: latlng,
									// name: curPlace.name
									name: curPlace.formatted_address
								};
								
								//选中返回uniapp的值
								uni.postMessage({
									data: obj
								});
								
								thar.close();
							}
						}).catch(err => {
							console.log(err)
						})
					} else {
						alert('请先选中地址！！！')
					}
				},

				//搜索
				searchFindAddress() {
					let thar = this;
					this.current = -1;
					this.list = [];
					// 原有的接口出现跨域问题(新的api需要注册才可以用)
					// let url =
					// 	`https://maps.googleapis.com/maps/api/place/textsearch/json?key=${this.googleKey}&query=${encodeURIComponent(this.searchAddress)}&language=en`;

					// 可以调用，但是返回的信息不完整（这里没有返回具体的地址）
					let url =
						`https://maps.googleapis.com/maps/api/geocode/json?address=${encodeURIComponent(this.searchAddress)}&key=${this.googleKey}`;

					axios.get(url)
						.then(response => {
							console.log('搜索地址', response);
							if (response.data.status === 'OK') {
								let resData = response.data.results;
								thar.list = resData;
							} else {
								thar.list = [];
							}
						})
						.catch(error => {
							// this.errorMessage = '请求失败，请稍后再试';
							console.error('请求失败', error);
						});
				},

				//列表选中地址
				radioChange(e) {
					this.current = e;
					this.curPlace = JSON.stringify(this.list[this.current]);
				},

			}
		})
	</script>
</html>

注意的点:

1.需要和uniapp页面通信的话，必须引入这两个SDK，并且需要放在body后面，而且微信SDK必须在前面。

2.谷歌搜索api问题

这里后续我让后端给我处理了。

https://maps.googleapis.com/maps/api/place/textsearch/json?key=你的密钥&query=搜索地址&language=en
这个是旧的api，但是在H5页面使用会出现跨域问题，最好是让后端给解决一下，直接给你一个接口。

https://places.googleapis.com/v1/places:searchText是新的api，这里调用会出现403报错。这里确定配置平台已启用了Places API（New），不晓得是哪里不行，求知道的大佬告知。
以下为调用的代码片段和报错信息

let url = `https://places.googleapis.com/v1/places:searchText`;
axios.post(url, {
	textQuery: this.searchAddress,
	'X-Goog-FieldMask': '*',
	'X-Goog-Api-Key': '你的密钥'
}).then(response => {
	console.log('搜索地址', response);
	if (response.data.status === 'OK') {
		let resData = response.data.results;
		thar.list = resData;
	} else {
		thar.list = [];
	}}).catch(error => {
		// this.errorMessage = '请求失败，请稍后再试';
		console.error('请求失败', error);
	});

三.效果图

网页端

小程序

app

四.其他

这里如果想在模拟器测试，需要在模拟器安装跨域工具（和在真机安装配置一样）。

这里配置自己搜索下进行配置就好。

开启后，就能进去app校验地图效果了。

到此这篇关于uniapp使用webview调用谷歌地图(小程序+app端)的文章就介绍到这了,更多相关uniapp webview调用谷歌地图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Bootstrap缩略图的创建方法
这篇文章主要介绍了Bootstrap缩略图的创建方法，教大家如何实现Bootstrap缩略图，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-03-03
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
本篇文章主要介绍了微信小程序-图片、录音、音频播放、音乐播放、视屏、文件代码实例，有兴趣的可以了解一下。
2016-11-11
原生javascript实现图片按钮切换
这篇文章主要介绍了原生javascript实现图片按钮切换,需要的朋友可以参考下
2015-01-01
DropDownList控件绑定数据源的三种方法
本文给大家分享web 中 DropDownList绑定数据源的几种方式以及DropdownList控件动态绑定数据源的两种方法，下面通过本文给大家详细介绍，感兴趣的朋友一起看看
2016-12-12
微信小程序onShareTimeline()实现分享朋友圈
这篇文章主要给大家介绍了关于微信小程序onShareTimeline()实现分享朋友圈的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-01-01
webpack5 常用插件使用问题小结
webpack 是一个模块打包器,这篇文章主要介绍了webpack5 常用插件使用问题小结,每次打包完都需要手动删除掉dist文件目录,使用CleanWebpackPlugin就可自动清除dist目录,感兴趣的朋友跟随小编一起看看吧
2024-02-02
uni-app多环境部署解决方案详解
uni-app可通过process.env.NODE_ENV判断当前环境是开发环境还是生产环境,下面这篇文章主要给大家介绍了关于uni-app多环境部署的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-11-11
javascript实现十六进制颜色值（HEX）和RGB格式相互转换
这篇文章主要介绍了javascript实现十六进制颜色值（HEX）和RGB格式之间的转换,使用正则的方法实现RGB颜色转换为16进制,需要的朋友可以参考下
2014-06-06
Echarts如何重新渲染实例详解
这篇文章主要给大家介绍了关于Echarts重新渲染的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2022-05-05
Next.js15图片查看网站之图片右键菜单的兼容优化与坑
Next.js 提供了内置的图片和字体优化功能,旨在提升应用性能和用户体验,下面这篇文章主要介绍了Next.js15图片查看网站之图片右键菜单的兼容优化与坑的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2026-03-03