uni-app web-view调用谷歌地图

由于公司的业务主要是非洲的，所以做地图功能的时候就需要用到一款国际地图，高德直接不支持，百度的在uni-app上配置了没效果，苹果地图也找过，但是在indentifiers下面没有找到map IDS选项，故放弃，那就是谷歌地图了；uni-app的官方说法是:这里就选择第一种方案。调用谷歌地图，首先需要翻墙，翻墙软件自己找吧，然后需要去谷歌地图平台注册账号，申请秘钥:平台地址：https://dev

y_w_x_k

11391人浏览 · 2020-11-24 14:19:07

y_w_x_k · 2020-11-24 14:19:07 发布

由于公司的业务主要是非洲的，所以做地图功能的时候就需要用到一款国际地图，高德直接不支持，百度的在uni-app上配置了没效果，苹果地图也找过，但是在indentifiers下面没有找到map IDS选项，故放弃，那就是谷歌地图了；

uni-app的官方说法是:

这里就选择第一种方案。

调用谷歌地图，首先需要翻墙，翻墙软件自己找吧，然后需要去谷歌地图平台注册账号，申请秘钥:

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

选择Maps JavaScript API：

平台注册需要填写国家,姓名，地址，还有一张国际银行卡号等信息,这里需要注意的地方:

国家里面没有中国，那就选香港好了，不要选其他国家，如果选了其他国家还要填写当地的邮箱，非常麻烦。

注册好后获取秘钥。

然后开始写代码:

按钮界面效果图:

相应代码:

<template>
	<view class="cont">
		<button @click="start">Start GoogleMap</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				prePath : this.settings.prePath,
				obj :{},
			}
		},
		methods: {
			lodaData(){
				uni.showLoading({
					title: "Loading...",
					mask: true,
				});
				
				uni.request({
				    url: this.prePath+'app/gpsinfo/station', //仅为示例，并非真实接口地址。
					method : 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded', 
					},
				    data: {
						StationID: uni.getStorageSync('StationID'),
				    },
				    success: (res) => {
						if(res.data.error_code=='0'){
							this.obj=res.data.data
						}else{
							uni.showToast({
							    icon: 'none',
								position: 'bottom',
							    title: res.data.message
							});
						}
				    },
					complete:()=>{
						uni.hideLoading();
					}
				});
			},
			start(){
				uni.navigateTo({
					url: '../map?lat='+this.obj.Latitude+'&log='+this.obj.Longitude
				})
			}
		},
		mounted(){
			this.lodaData()
		},
		
	}
</script>

<style>
	.cont{
		width: 100vw;
		height: 90vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	#map {
	  height: 100%;
	}
	
	/* Optional: Makes the sample page fill the window. */
	html,
	body {
	  height: 100%;
	  margin: 0;
	  padding: 0;
	}
</style>

我是用一个页面单独加载webview:

<template >
	<view>
		<web-view :src="url"></web-view>
	</view>
</template>

<script>
	var wv;
	export default {
		data() {
			return {
				url:'/hybrid/html/map.html?'
			}
		},
		methods: {
		},
		mounted(){
			
		},
		onLoad(option) {
			this.url+="log="+option.log+"&lat="+option.lat
		},
		onReady() {
			// #ifdef APP-PLUS
			var currentWebview = this.$scope.$getAppWebview() //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效，非v3编译模式使用this.$mp.page.$getAppWebview()
			// #endif
		}
	}
</script>

<style scoped>

</style>

web-view页面效果图:

web-view页面代码:

<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>Google Map</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>
		<style type="text/css">
			#map {
				height:calc(100% - 50px);
			}

			html,body {
				height:calc(100% - 50px);
				margin: 0;
				padding: 0;
			}
		</style>
	</head>
	<body>
		<div class="btn-list" style="display: flex;align-items: center;">
			<image @click="" data-action="navigateBack" style="width: 20px;padding: 5px 0 5px 10px;position: absolute;left: 0;" src="./img/back.png"></image>
			<div style="width: 100%;text-align: center;height: 50px;line-height: 50px;">
				<h4 style="margin: 0 0;">Map</h4>
			</div>
		</div>
		<div id="map"></div>
	</body>
</html>
<script>
	function getQuery(name) {
		// 正则：[找寻'&' + 'url参数名字' = '值' + '&']（'&'可以不存在）
		let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
		let r = window.location.search.substr(1).match(reg);
		if(r != null) {
			// 对参数值进行解码
			return decodeURIComponent(r[2]);
		}
		return null;
	}

	let map;
	
	function initMap() {
		const uluru = { lat: Number(getQuery('lat')), lng: Number(getQuery('log')) };
		map = new google.maps.Map(document.getElementById("map"), {
			center: { lat: Number(getQuery('lat')) , lng:  Number(getQuery('log')) },
			zoom: 16,
			center: uluru,
		});
		const marker = new google.maps.Marker({
			position: uluru,
			map: map,
		});
	}
	  
	var userAgent = navigator.userAgent;
	if (userAgent.indexOf('AlipayClient') > -1) {
	  // 支付宝小程序的 JS-SDK 防止 404 需要动态加载，如果不需要兼容支付宝小程序，则无需引用此 JS 文件。
	  document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
	} else if (/QQ/i.test(userAgent) && /miniProgram/i.test(userAgent)) {
	  // QQ 小程序
	  document.write(
		'<script type="text/javascript" src="https://qqq.gtimg.cn/miniprogram/webview_jssdk/qqjssdk-1.0.0.js"><\/script>'
	  );
	} else if (/miniProgram/i.test(userAgent) && /micromessenger/i.test(userAgent)) {
	  // 微信小程序 JS-SDK 如果不需要兼容微信小程序，则无需引用此 JS 文件。
	  document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>');
	} else if (/toutiaomicroapp/i.test(userAgent)) {
	  // 头条小程序 JS-SDK 如果不需要兼容头条小程序，则无需引用此 JS 文件。
	  document.write(
		'<script type="text/javascript" src="https://s3.pstatp.com/toutiao/tmajssdk/jssdk-1.0.1.js"><\/script>');
	} else if (/swan/i.test(userAgent)) {
	  // 百度小程序 JS-SDK 如果不需要兼容百度小程序，则无需引用此 JS 文件。
	  document.write(
		'<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.18.js"><\/script>'
	  );
	} else if (/quickapp/i.test(userAgent)) {
	  // quickapp
	  document.write('<script type="text/javascript" src="https://quickapp/jssdk.webview.min.js"><\/script>');
	}
	
	// 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。
	document.addEventListener('UniAppJSBridgeReady', function() {
		document.querySelector('.btn-list').addEventListener('click', function(evt) {
			var target = evt.target;
			uni.navigateBack({
			  delta: 1
			});
		});
	});
	
</script>
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>

完成。