uniapp开发app使用谷歌地图(ios跟安卓)

伤心客  金牌会员 | 2024-7-21 11:00:31 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 798|帖子 798|积分 2394

条件条件：

谷歌地图必要翻墙，否则无法加载
谷歌地图说明

   文档地点：概览  |  Maps JavaScript API  |  Google for Developers
  

  • 设置地图语言
  1. <script async
  2.     src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&language=ja&callback=initMap">
  3. </script>
复制代码
  文档地点：将地图本地化  |  Maps JavaScript API  |  Google for Developers 
  第一种方法(web-view)：

web-view 是一个 web 浏览器组件，可以用来承载网页的容器，会主动铺满整个页面（nvue 使用必要手动指定宽高）,一般都会用nvue，否则默认占满页面
   官网说明：web-view | uni-app官网
  

  • 展示目录结构:

index.nvue
  1. <template>
  2.         <view>
  3.                 <view style="height: 100rpx;">222222222</view>
  4.                 <view class="" v-if="isShow">
  5.                         <web-view style="background-color: #fafafa;" ref="webview" :style="{ height: statusBarHeight + 'px'}"
  6.                                 @onPostMessage="getMessage" :src="webUrl"></web-view>
  7.                 </view>
  8.         </view>
  9. </template>
  11. <script>
  12.         /**
  13.          *
  14.          * 请看这里
  15.          * source :来源 根据上个界面传来的type值 实现不同的功能  
  16.          *
  17.          * */
  18.         import Vue from 'vue';
  19.         export default {
  20.                 data() {
  21.                         return {
  22.                                 statusBarHeight: 500, //可视屏幕的高度
  23.                                 webUrl: '',
  24.                                 isShow: false,
  25.                                 lat:'',
  26.                                 lng:'' ,
  27.                                 source: "",
  28.                         };
  29.                 },
  30.                 onLoad(e) {
  31.                         console.log(e.type)
  32.                         this.source = e.type;
  33.                         // #ifdef APP-PLUS
  34.                         this.getlocetion();
  35.                         // #endif
  36.                 },
  37.                 methods: {
  38.                         getlocetion() {
  39.                                 const self = this;
  40.                                 self.lat = '39.906217';
  41.                                 self.lng = '116.3912757';
  42.                                 self.webUrl = '/hybrid/html/maps/index' + self.source + '.html?lat=' + self.lat +
  43.                                         '&lng=' +
  44.                                         self.lng;
  45.                                 self.isShow = true
  46.                         }
  47.                 }
  48.         };
  49. </script>
  51. <style>
  52.        
  53. </style>
复制代码
 index1.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <meta name="viewport"
  6.                         content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=0" />
  7.                 <link href="http://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet" type="text/css">
  8.                 <title>谷歌地图-初始化地图</title>
  9.                 <link rel="stylesheet" type="text/css" href="./css/index.css" />
  10.                 <script src="./js/lib/common.js"></script>
  11.         </head>
  12.         <body>
  13.                 <!-- 地图 -->
  14.                 <div id="map"></div>
  15.                 <!-- css loading动画 -->
  16.                 <div class="loader" id="loader"></div>
  17.         </body>
  18.         <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
  19.         <script
  20.                 src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxx&libraries=places&language=zh-TW&callback=initMap"
  21.                 async defer></script>
  22.         <script src="./js/index1.js"></script>
  23. </html>
复制代码
index1.js
  1. var lats = getQueryVariable('lat') * 1;
  2. var lngs = getQueryVariable('lng') * 1;
  3. console.log(lats,lngs)
  4. var zoom = 15; //地图缩放比例
  5. var coords = ""
  7. /**
  8. * 初始化
  9. *
  10. */
  11. function initMap() {
  13.         if (lats && lngs) {
  14.                 coords = {
  15.                         lat: lats,
  16.                         lng: lngs
  17.                 };
  18.         } else {
  19.                 navigator.geolocation.getCurrentPosition(function(position) {
  20.                         coords = {
  21.                                 lat: position.coords.latitude,
  22.                                 lng: position.coords.longitude
  23.                         };
  24.                         lats = position.coords.latitude;
  25.                         lngs = position.coords.longitude
  26.                 });
  27.         }
  28.         map = new google.maps.Map(document.getElementById('map'), {
  29.                 zoom: zoom,
  30.                 center: coords,
  31.                 mapId: MAPID,
  32.                 animation: 'BOUNCE',
  33.                 language: 'zh-TW'
  34.         });
  35.         setTimeout(() => {
  36.                 LoadAnimation(false)
  37.         }, 1000)
  39. }
  40. LoadAnimation(true)
  41. window.initMap = initMap;
复制代码
common.js  ---  公共js
  1. /**
  2. * MapID
  3. *
  4. *
  5. * */
  6. var MAPID = 'xxxxxxx'
  8. /**
  9. *
  10. * 获取url地址参数
  11. *
  12. * */
  14. function getQueryVariable(variable) {
  15.         var query = decodeURI(window.location.search.substring(1));
  16.         var vars = query.split("&");
  17.         for (var i = 0; i < vars.length; i++) {
  18.                 var pair = vars[i].split("=");
  19.                 if (pair[0] == variable) {
  20.                         return pair[1];
  21.                 }
  22.         }
  23.         return (false);
  24. }
  26. /**
  27. * 加载动画
  28. *
  29. */
  30. function LoadAnimation(isFalse) {
  31.         if (isFalse) {
  32.                 document.getElementById("loader").style.display = "inline";
  33.         } else {
  34.                 document.getElementById("loader").style.display = "none";
  35.         }
  37. }
复制代码


  • <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>是什么
uni.webview.1.5.2.js 这个 JavaScript 文件为开发者提供了在 Uni-app 中使用 Webview 组件的丰富功能和接口，方便开发者在应用中集成和控制 web 页面


  • <link href="http://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet" type="text/css"> 是什么
在网页中引入 Google Fonts 中的 Roboto 字体。Google Fonts 提供了大量免费的网页字体供开发者使用
上面代码就可以天生一个谷歌地图示例了
第二种方法(render.js)

renderjs是一个运行在视图层的js。它比WXS更加强盛。它只支持app-vue和web；
在视图层操作dom，运行 for web 的 js库
googleMap.vue
app繁体语言加载地图，绘制marker，绘制轨迹
  1. <template>
  2.         <view class="trajectory OverallSty">
  3.                 <view class="content">
  4.                         <view id="container">
  5.                                 <view class="loader" v-if="loaderSta"></view>
  6.                                 <view style="width: 750rpx; height:650rpx;" :location="currLocation"
  7.                                         :change:location="renderScript.receiveLoca" :Trace="currTrace"
  8.                                         :change:Trace="renderScript.receiveTrace" id="renderScript"></view>
  9.                         </view>
  10.                 </view>
  11.         </view>
  12. </template>
  14. <script>
  15.         import {
  16.                 get,
  17.                 post
  18.         } from '@/util/request/request.js'
  19.         import localStorage from '@/util/commen/localStorage.js'
  20.         import {
  21.                 onLoad
  22.         } from "@dcloudio/uni-app"
  23.         export default {
  24.                 data() {
  25.                         return {
  26.                                 markers: [{
  27.                                         id: 'begin',
  28.                                         latitude: '',
  29.                                         longitude: '',
  30.                                         iconPath: "../../static/img/map/place.png",
  31.                                         width: 30,
  32.                                         height: 30
  33.                                 }],
  34.                                 polylines: [],
  35.                                 center_lat: '',
  36.                                 center_lng: '',
  37.                                 userInfo: JSON.parse(localStorage.get('userInfo')),
  38.                                 projInfo: JSON.parse(localStorage.get('projInfo')),
  39.                                 getWorkerSignsInformation: {},
  40.                                 searchBeginTime: '',
  41.                                 searchEndTime: '',
  42.                                 workerInfo: null,
  43.                                 currLocation: {},
  44.                                 currTrace: [],
  45.                                 loaderSta: true
  46.                         }
  47.                 },
  48.                 onLoad(options) {
  49.                         let data = JSON.parse(decodeURIComponent(options.data));
  50.                         this.workerInfo = data
  51.                 },
  52.                 mounted() {
  53.                         let _this = this
  54.                         setTimeout(() => {
  55.                                 _this.loaderSta = false
  56.                         }, 1500);
  57.                         this.getWorkerSignsInformationFun()
  58.                 },
  59.                 methods: {
  60.                         getWorkerLocus() {
  61.                                 let _this = this
  62.                                 get('/proj/smartBracelet/getWorkerLocus', {
  63.                                         'projId': _this.projInfo.proId,
  64.                                         'workerId': _this.workerInfo.workerId,
  65.                                         'searchBeginTime': _this.searchBeginTime,
  66.                                         'searchEndTime': _this.searchEndTime
  67.                                 }, {
  68.                                         'token': localStorage.get('token'),
  69.                                         'uid': _this.userInfo.userId
  70.                                 }).then(res => {
  71.                                         let data = res.data.result
  72.                                         const points = data.lon.map((lon, index) => {
  73.                                                 return {
  74.                                                         lat: parseFloat(data.lat[index]),
  75.                                                         lng: parseFloat(lon)
  76.                                                 }
  77.                                         });
  78.                                         if (points[0]?.lat == "" || points[0]?.lng == "" ||
  79.                                                 points[0]?.lat == undefined || points[0]?.lng == undefined) {
  80.                                                 _this.$refs.messagePopup.showMessage('warn', '未查詢到軌跡', 'top')
  81.                                                 return
  82.                                         }
  83.                                         _this.currTrace = points
  84.                                 }).catch(err => {
  85.                                         console.error(err);
  86.                                 });
  87.                         },
  88.                         getWorkerSignsInformationFun() {
  89.                                 let _this = this
  90.                                 get('/proj/smartBracelet/getWorkerSignsInformation', {
  91.                                         'projId': _this.projInfo.proId,
  92.                                         'workerId': _this.workerInfo.workerId
  93.                                 }, {
  94.                                         'token': localStorage.get('token'),
  95.                                         'uid': _this.userInfo.userId
  96.                                 }).then(res => {
  97.                                         _this.getWorkerSignsInformation = res.data?.result
  98.                                         if (_this.getWorkerSignsInformation?.lat == undefined || _this.getWorkerSignsInformation
  99.                                                 ?.lon == undefined) {
  100.                                                 _this.$refs.messagePopup.showMessage('warn', '未獲取定位信息', 'top')
  101.                                                 _this.center_lat = '39.906217';
  102.                                                 _this.center_lng = '116.3912757';
  103.                                                 _this.markers[0].latitude = '39.906217';
  104.                                                 _this.markers[0].longitude = '116.3912757';
  105.                                                 return
  106.                                         }
  107.                                         _this.currLocation = res.data.result
  108.                                         _this.center_lat = _this.getWorkerSignsInformation.lat;
  109.                                         _this.center_lng = _this.getWorkerSignsInformation.lon;
  110.                                         _this.markers[0].latitude = _this.getWorkerSignsInformation.lat;
  111.                                         _this.markers[0].longitude = _this.getWorkerSignsInformation.lon;
  112.                                 }).catch(err => {
  113.                                         console.error(err);
  114.                                 });
  115.                         }
  116.                 }
  117.         };
  118. </script>
  119. <script module="renderScript" lang="renderjs">
  120.         var meMarker = []
  121.         var polylinePath = null
  122.         export default {
  123.                 data() {
  124.                         return {
  125.                                 map: {},
  126.                                 receiveLocaDate: {
  127.                                         lat: '39.906217',
  128.                                         lon: '116.3912757'
  129.                                 },
  130.                                 receiveTraceDate: []
  131.                         };
  132.                 },
  133.                 mounted() {
  134.                         let _this = this
  135.                         const script = document.createElement('script')
  136.                         script.src =
  137.                                 'https://maps.googleapis.com/maps/api/js?key=xxxxxxxx&language=zh-TW&callback=initMap'
  138.                         window.initMap = function() {
  139.                                 setTimeout(() => {
  140.                                         console.log('renderScript')
  141.                                         _this.initAmap()
  142.                                 }, 1500);
  143.                         };
  144.                         document.head.appendChild(script)
  145.                 },
  146.                 methods: {
  147.                         initAmap() {
  148.                                 let _this = this
  149.                                 console.log('initAmap')
  150.                                 _this.map = new google.maps.Map(document.getElementById("renderScript"), {
  151.                                         center: {
  152.                                                 lat: parseFloat(_this.receiveLocaDate.lat),
  153.                                                 lng: parseFloat(_this.receiveLocaDate.lon)
  154.                                         },
  155.                                         zoom: 16
  156.                                 });
  157.                                 _this.setMePositioning()
  158.                         },
  159.                         setMePositioning() {
  160.                                 let _this = this
  161.                                 const marker = new google.maps.Marker({
  162.                                         position: {
  163.                                                 lat: parseFloat(_this.receiveLocaDate.lat),
  164.                                                 lng: parseFloat(_this.receiveLocaDate.lon)
  165.                                         },
  166.                                         icon: {
  167.                                                 url: "https://maps.gstatic.com/mapfiles/ms2/micons/red.png",
  168.                                                 scaledSize: new google.maps.Size(50, 50)
  169.                                         },
  170.                                         map: _this.map
  171.                                 });
  172.                                 meMarker.push(marker)
  173.                         },
  174.                         receiveLoca(newValue, oldValue, ownerInstance, instance) {
  175.                                 let _this = this
  176.                                 if (JSON.stringify(newValue) != '{}' && newValue.length != 0) {
  177.                                         _this.receiveLocaDate = newValue
  178.                                 }
  179.                         },
  180.                         receiveTrace(newValue, oldValue, ownerInstance, instance) {
  181.                                 let _this = this
  182.                                 if (JSON.stringify(newValue) != '{}' && newValue.length != 0) {
  183.                                         console.log('触发了',newValue,newValue.length)
  184.                                         for (let i = 0; i < meMarker.length; i++) {
  185.                                                 meMarker[i].setMap(null);
  186.                                         }
  187.                                         if(polylinePath != null){
  188.                                                 polylinePath.setMap(null);
  189.                                         }
  190.                                         _this.map.setZoom(20);
  191.                                         const marker1 = new google.maps.Marker({
  192.                                                 position: {
  193.                                                         lat: parseFloat(newValue[0].lat),
  194.                                                         lng: parseFloat(newValue[0].lng)
  195.                                                 },
  196.                                                 icon: {
  197.                                                         url: "static/img/map/icon_start.png",
  198.                                                         scaledSize: new google.maps.Size(20, 20)
  199.                                                 },
  200.                                                 map: _this.map
  201.                                         });
  202.                                         meMarker.push(marker1)
  203.                                         const marker2 = new google.maps.Marker({
  204.                                                 position: {
  205.                                                         lat: parseFloat(newValue[newValue.length - 1].lat),
  206.                                                         lng: parseFloat(newValue[newValue.length - 1].lng)
  207.                                                 },
  208.                                                 icon: {
  209.                                                         url: "static/img/map/icon_end.png",
  210.                                                         scaledSize: new google.maps.Size(20, 20)
  211.                                                 },
  212.                                                 map: _this.map
  213.                                         });
  214.                                         meMarker.push(marker2)
  215.                                         polylinePath = new google.maps.Polyline({
  216.                                                 path: newValue,
  217.                                                 geodesic: false,
  218.                                                 strokeColor: '#41d9b7',
  219.                                                 strokeOpacity: 1,
  220.                                                 strokeWeight: 8,
  221.                                                 editable: false,
  222.                                                 draggable: false,
  223.                                         });
  224.                                         polylinePath.setMap(_this.map)
  225.                                         let pos = {
  226.                                                 lat: parseFloat(newValue[0].lat),
  227.                                                 lng: parseFloat(newValue[0].lng)
  228.                                         }
  229.                                         _this.map.setCenter(pos)
  230.                                 }
  231.                         }
  232.                 }
  233.         }
  234. </script>
  236. <style scoped>
  237.         /* 动画 */
  238.         .trajectory .loader {
  239.                 position: fixed;
  240.                 z-index: 99;
  241.                 border: 8px solid #f3f3f3;
  242.                 border-top: 8px solid #ea4335;
  243.                 border-radius: 50%;
  244.                 width: 80px;
  245.                 height: 80px;
  246.                 animation: spin 2s linear infinite;
  247.                 position: absolute;
  248.                 top: 50%;
  249.                 left: 50%;
  250.                 margin-left: -90rpx;
  251.                 margin-top: 320rpx;
  252.                 transform: translate(-50%, -50%);
  253.         }
  255.         @keyframes spin {
  256.                 0% {
  257.                         transform: rotate(0deg);
  258.                 }
  260.                 100% {
  261.                         transform: rotate(360deg);
  262.                 }
  263.         }
  264. </style>
复制代码
遇到的问题



  • manifest.json中不用勾选map模块，否则google地图打包时会模块冲突，导致打包失败
例如报错日志：
  1. * What went wrong:
  2. Execution failed for task ':app:checkReleaseDuplicateClasses'.
  3. > A failure occurred while executing com.android.build.gradle.internal.tasks.CheckDuplicatesRunnable
  4. > Duplicate class com.google.android.gms.actions.ItemListIntents found in modules jetified-play-services-basement-18.0.0-runtime (com.google.android.gms:play-services-basement:18.0.0) and jetified-play-services-basement-18.0.0-runtime (play-services-basement-18.0.0.aar)
  5. Duplicate class com.google.android.gms.actions.NoteIntents found in modules jetified-play-services-basement-18.0.0-runtime (com.google.android.gms:play-services-basement:18.0.0) and jetified-play-services-basement-18.0.0-runtime (play-services-basement-18.0.0.aar)
  6. Duplicate class com.google.android.gms.actions.ReserveIntents found in modules jetified-play-services-basement-18.0.0-runtime (com.google.android.gms:play-services-basement:18.0.0) and jetified-play-services-basement-18.0.0-runtime (play-services-basement-18.0.0.aar)   
复制代码


  • InvalidValueError: at index 0: not a LatLng or LatLngLiteral with finite coordinates: in property lat: not a number a
经纬度坐标格式不正确，导致 Google 地图 API 无法识别，确保提供的经纬度值是有用的数字，确保经纬度值的类型是 number
其他

   UNiAPP中使用render.js绘制高德地图文章推荐：
  UNiAPP中使用render.js绘制高德地图 - 掘金 (juejin.cn)
  
   HBuilderX汗青版本：汗青版本 - HBuilderX 文档 (dcloud.net.cn) 
    谷歌地图插件：谷歌示例大全、各种谷歌地图案例 - DCloud 插件市场 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

伤心客

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表