快捷導(dǎo)航

uniapp使用webview調(diào)用谷歌地圖的完整過程(小程序+app端)

更新時(shí)間：2025年07月09日 10:22:08 作者：蔡一一

最近在做uni-app的項(xiàng)目,由于是海外市場(chǎng),所以在APP中需要使用到谷歌地圖,這篇文章主要介紹了uniapp使用webview調(diào)用谷歌地圖(小程序+app端)的相關(guān)資料,需要的朋友可以參考下

前言

適用小程序和app端；具體功能可以搜索地址，選中地址返回。

一.前期準(zhǔn)備

1.谷歌地圖需要科學(xué) 上網(wǎng)，否則無法加載。需要的軟件自己備好，后續(xù)在模擬器測(cè)試也可以用到。

2.申請(qǐng)谷歌地圖密鑰

平臺(tái)地址：https://developers.google.cn/maps/gmp-get-started

選擇Maps JavaScript API

如需使用搜索地址則需開啟，啟用Places API（原先舊的api,在H5使用可能出現(xiàn)跨域問題，如后端可以解決，可直接使用這個(gè)）和Places API（New）（新的api，返回報(bào)錯(cuò)403）

二.相關(guān)代碼

1.uniapp代碼

點(diǎn)擊選擇地址頁(yè)面

跳轉(zhuǎn)地圖顯示頁(yè)面

這里我看別人可以使用放置在本項(xiàng)目的html文件（例如/hybrid/html/map.html），但是我引用本地的沒效果，后面就替換成線上的了。

但是這里你可以在本地運(yùn)行html文件，然后使用本地ip調(diào)用可以做調(diào)試用

注意：
1.這里的@message="postMessageFun"方法是接收來自html頁(yè)面的返回值。
2.如果需要在模擬器校驗(yàn)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"  rel="external nofollow" >
		<!-- 引入組件庫(kù) -->
		<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() {
			//頁(yè)面?zhèn)鬟^來的參數(shù)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參數(shù)
		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 "";
			}
		}

		// 定位(這里如果需要搜索選中地址后定位到選中位置，可以調(diào)用這個(gè)方法)
		// 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: {
				// 關(guān)閉地圖
				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('確定選中地址回調(diào)', 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('請(qǐng)先選中地址?。。?)
					}
				},

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

					// 可以調(diào)用，但是返回的信息不完整（這里沒有返回具體的地址）
					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 = '請(qǐng)求失敗，請(qǐng)稍后再試';
							console.error('請(qǐng)求失敗', error);
						});
				},

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

			}
		})
	</script>
</html>

注意的點(diǎn):

1.需要和uniapp頁(yè)面通信的話，必須引入這兩個(gè)SDK，并且需要放在body后面，而且微信SDK必須在前面。

2.谷歌搜索api問題

這里后續(xù)我讓后端給我處理了。

https://maps.googleapis.com/maps/api/place/textsearch/json?key=你的密鑰&query=搜索地址&language=en
這個(gè)是舊的api，但是在H5頁(yè)面使用會(huì)出現(xiàn)跨域問題，最好是讓后端給解決一下，直接給你一個(gè)接口。

https://places.googleapis.com/v1/places:searchText是新的api，這里調(diào)用會(huì)出現(xiàn)403報(bào)錯(cuò)。這里確定配置平臺(tái)已啟用了Places API（New），不曉得是哪里不行，求知道的大佬告知。
以下為調(diào)用的代碼片段和報(bào)錯(cuò)信息

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 = '請(qǐng)求失敗，請(qǐng)稍后再試';
		console.error('請(qǐng)求失敗', error);
	});

三.效果圖

網(wǎng)頁(yè)端

小程序

app

四.其他

這里如果想在模擬器測(cè)試，需要在模擬器安裝跨域工具（和在真機(jī)安裝配置一樣）。

這里配置自己搜索下進(jìn)行配置就好。

開啟后，就能進(jìn)去app校驗(yàn)地圖效果了。

到此這篇關(guān)于uniapp使用webview調(diào)用谷歌地圖(小程序+app端)的文章就介紹到這了,更多相關(guān)uniapp webview調(diào)用谷歌地圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: