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

灰太狼 2022-12-23 09:46 1428阅读 0赞

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

uni-app的官方说法是:

![20201124135433135.png][]

这里就选择第一种方案。

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

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

选择[Maps JavaScript API][]：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lfd194X2s_size_16_color_FFFFFF_t_70][]

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

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

注册好后获取秘钥。

然后开始写代码:

按钮界面效果图:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lfd194X2s_size_16_color_FFFFFF_t_70 1][]

相应代码:

<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页面效果图:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lfd194X2s_size_16_color_FFFFFF_t_70 2][]

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>

完成。

[20201124135433135.png]: /images/20221120/62efb91565d9415380f68bf1844c668c.png
[https_developers.google.cn_maps_gmp-get-started]: https://developers.google.cn/maps/gmp-get-started
[Maps JavaScript API]: https://console.cloud.google.com/google/maps-apis/apis/maps-backend.googleapis.com/metrics?project=flowing-tooling-296307
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lfd194X2s_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201124140604277.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lfd194X2s=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lfd194X2s_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201124141131279.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lfd194X2s=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lfd194X2s_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201124141548161.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lfd194X2s=,size_16,color_FFFFFF,t_70