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

由于公司的业务主要是非洲的，所以做地图功能的时候就需要用到一款国际地图，高德直接不支持，百度的在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-PLUSvar 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><scriptsrc="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)) {// quickappdocument.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>

完成。

uni-app web-view调用谷歌地图相关推荐

python调用谷歌地图_使用Python调用谷歌地图并记录运动轨迹进行可视化
本篇博文主要介绍了如何使用python来调用谷歌地图,并对北京的一个轨迹数据集进行可视化展示.该数据集包含在3年内收集的182个用户的GPS轨迹.我在这个演示中使用了用户001的数据. 博文会给出具体 ...
python调用谷歌地图api_python显示地图与谷歌地图
我找到了一个 googlemaps软件包来从python访问谷歌地图,但没有找到任何演示以在python代码中显示结果. 例如: gmaps = googlemaps.Client(key='Add ...
Leaflet调用谷歌地图、天地图、智图地图、高德题图一键搞定
Leaflet调用各种地图的功能十分复杂,幸好有leaflet.ChineseTmsProviders这个插件,这四种地图直接就可以加载进来,十分方便. 下面是我做的例子: <!DOCTYPE ...
Leaflet调用谷歌地图、天地图、智图地图、高德题图一键搞定（转）
Leaflet调用各种地图的功能十分复杂,幸好有leaflet.ChineseTmsProviders这个插件,这四种地图直接就可以加载进来,十分方便. 下面是我做的例子: <!DOCTYPE ...
Web端调用高德地图-自定义地图-只显示中国区域
1. 通过以下链接注册账号密码高德开放平台 | 高德地图API高德开放平台官网https://lbs.amap.com/?ref=https%3A%2F%2Fgeohub.amap.com%2Fmap ...
C#窗体应用调用谷歌地图经验分享（菜鸟的分享）
先说下,这个东西无需太多JS基础和高深只是,只需要一点面向对象基础+一点C#基础.最近在做毕业设计,项目中需要嵌入谷歌地图,用红色标记(就是想图钉的那个)来显示监测站点的方位.对于我这种没什么项目经验 ...
html5 调用谷歌地图定位,使用html5地理定位的网页不如谷歌地图准确?
使用笔记本电脑上的浏览器Chrome,我打开了一个本地html网页以获取当前位置.返回的位置(1.3238272103.8606336)与我的实际位置不接近.相似性,网站 [1] (1.3238272 ...
qwebkit 服务器调用本地html方法,用qt的QWebkit类调用谷歌地图
先说下,我这悲剧的一天,用qt5.0.2这个版本搞了一个上午都没有搞出来,无赖呀...突然想了下,还是换个版本吧!就用qt4.7.4版本了,哎哟喂,居然就调出来了呢!其实网上的文章大多是复制别人的,作 ...
web页面调用百度地图，在百度页面标注多个标点，为百度地图标点添加标注，点击标点跳转到百度地图进行导航。
一.显示地图配置申请百度地图 AK http://lbsyun.baidu.com/apiconsole/key 有了ak自己上代码注意代码中一定要把自己的ak填入 <%@ page lan ...

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

uni-app web-view调用谷歌地图相关推荐

最新文章

热门文章