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

前提条件：

谷歌地图需要翻墙，否则无法加载

谷歌地图说明

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

• 设置地图语言

  文档地址：将地图本地化  |  Maps JavaScript API  |  Google for Developers 

  第一种方法(web-view)：

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

  官网说明：web-view | uni-app官网

  • 展示目录结构:

    index.nvue

    222222222/** *  * 请看这里  * source :来源 根据上个界面传来的type值 实现不同的功能   *  * */import Vue from 'vue';export default {data() {return {statusBarHeight: 500, //可视屏幕的高度webUrl: '',isShow: false,lat:'',lng:'' ,source: "",};},onLoad(e) {console.log(e.type)this.source = e.type;// #ifdef APP-PLUSthis.getlocetion();// #endif},methods: {getlocetion() {const self = this;self.lat = '39.906217';self.lng = '116.3912757';self.webUrl = '/hybrid/html/maps/index' + self.source + '.html?lat=' + self.lat +'&lng=' +self.lng;self.isShow = true}}};

     index1.html

    谷歌地图-初始化地图

    index1.js

    var lats = getQueryVariable('lat') * 1;var lngs = getQueryVariable('lng') * 1;console.log(lats,lngs)var zoom = 15; //地图缩放比例var coords = ""/** * 初始化 *  */function initMap() {if (lats && lngs) {coords = {lat: lats,lng: lngs};} else {navigator.geolocation.getCurrentPosition(function(position) {coords = {lat: position.coords.latitude,lng: position.coords.longitude};lats = position.coords.latitude;lngs = position.coords.longitude});}map = new google.maps.Map(document.getElementById('map'), {zoom: zoom,center: coords,mapId: MAPID,animation: 'BOUNCE',language: 'zh-TW'});setTimeout(() => {LoadAnimation(false)}, 1000)}LoadAnimation(true)window.initMap = initMap;

    common.js  ---  公共js

    /** * MapID *  *  * */var MAPID = 'xxxxxxx'/** *  * 获取url地址参数 *  * */function getQueryVariable(variable) {var query = decodeURI(window.location.search.substring(1));var vars = query.split("&");for (var i = 0; i  

    • 是什么

      uni.webview.1.5.2.js 这个 JavaScript 文件为开发者提供了在 Uni-app 中使用 Webview 组件的丰富功能和接口，方便开发者在应用中集成和控制 web 页面

      • 是什么

        在网页中引入 Google Fonts 中的 Roboto 字体。Google Fonts 提供了大量免费的网页字体供开发者使用

        上面代码就可以生成一个谷歌地图示例了

        第二种方法(render.js)

        renderjs是一个运行在视图层的js。它比WXS更加强大。它只支持app-vue和web；

        在视图层操作dom，运行 for web 的 js库

        googleMap.vue

        app繁体语言加载地图，绘制marker，绘制轨迹

        import {get,post} from '@/util/request/request.js'import localStorage from '@/util/commen/localStorage.js'import {onLoad} from "@dcloudio/uni-app"export default {data() {return {markers: [{id: 'begin',latitude: '',longitude: '',iconPath: "../../static/img/map/place.png",width: 30,height: 30}],polylines: [],center_lat: '',center_lng: '',userInfo: JSON.parse(localStorage.get('userInfo')),projInfo: JSON.parse(localStorage.get('projInfo')),getWorkerSignsInformation: {},searchBeginTime: '',searchEndTime: '',workerInfo: null,currLocation: {},currTrace: [],loaderSta: true}},onLoad(options) {let data = JSON.parse(decodeURIComponent(options.data));this.workerInfo = data},mounted() {let _this = thissetTimeout(() => {_this.loaderSta = false}, 1500);this.getWorkerSignsInformationFun()},methods: {getWorkerLocus() {let _this = thisget('/proj/smartBracelet/getWorkerLocus', {'projId': _this.projInfo.proId,'workerId': _this.workerInfo.workerId,'searchBeginTime': _this.searchBeginTime,'searchEndTime': _this.searchEndTime}, {'token': localStorage.get('token'),'uid': _this.userInfo.userId}).then(res => {let data = res.data.resultconst points = data.lon.map((lon, index) => {return {lat: parseFloat(data.lat[index]),lng: parseFloat(lon)}});if (points[0]?.lat == "" || points[0]?.lng == "" ||points[0]?.lat == undefined || points[0]?.lng == undefined) {_this.$refs.messagePopup.showMessage('warn', '未查詢到軌跡', 'top')return}_this.currTrace = points}).catch(err => {console.error(err);});},getWorkerSignsInformationFun() {let _this = thisget('/proj/smartBracelet/getWorkerSignsInformation', {'projId': _this.projInfo.proId,'workerId': _this.workerInfo.workerId}, {'token': localStorage.get('token'),'uid': _this.userInfo.userId}).then(res => {_this.getWorkerSignsInformation = res.data?.resultif (_this.getWorkerSignsInformation?.lat == undefined || _this.getWorkerSignsInformation?.lon == undefined) {_this.$refs.messagePopup.showMessage('warn', '未獲取定位信息', 'top')_this.center_lat = '39.906217';_this.center_lng = '116.3912757';_this.markers[0].latitude = '39.906217';_this.markers[0].longitude = '116.3912757';return}_this.currLocation = res.data.result_this.center_lat = _this.getWorkerSignsInformation.lat;_this.center_lng = _this.getWorkerSignsInformation.lon;_this.markers[0].latitude = _this.getWorkerSignsInformation.lat;_this.markers[0].longitude = _this.getWorkerSignsInformation.lon;}).catch(err => {console.error(err);});}}};var meMarker = []var polylinePath = nullexport default {data() {return {map: {},receiveLocaDate: {lat: '39.906217',lon: '116.3912757'},receiveTraceDate: []};},mounted() {let _this = thisconst script = document.createElement('script')script.src ='https://maps.googleapis.com/maps/api/js?key=xxxxxxxx&language=zh-TW&callback=initMap'window.initMap = function() {setTimeout(() => {console.log('renderScript')_this.initAmap()}, 1500);};document.head.appendChild(script)},methods: {initAmap() {let _this = thisconsole.log('initAmap')_this.map = new google.maps.Map(document.getElementById("renderScript"), {center: {lat: parseFloat(_this.receiveLocaDate.lat),lng: parseFloat(_this.receiveLocaDate.lon)},zoom: 16});_this.setMePositioning()},setMePositioning() {let _this = thisconst marker = new google.maps.Marker({position: {lat: parseFloat(_this.receiveLocaDate.lat),lng: parseFloat(_this.receiveLocaDate.lon)},icon: {url: "https://maps.gstatic.com/mapfiles/ms2/micons/red.png",scaledSize: new google.maps.Size(50, 50)},map: _this.map});meMarker.push(marker)},receiveLoca(newValue, oldValue, ownerInstance, instance) {let _this = thisif (JSON.stringify(newValue) != '{}' && newValue.length != 0) {_this.receiveLocaDate = newValue}},receiveTrace(newValue, oldValue, ownerInstance, instance) {let _this = thisif (JSON.stringify(newValue) != '{}' && newValue.length != 0) {console.log('触发了',newValue,newValue.length)for (let i = 0; i  
        遇到的问题
         

        • manifest.json中不用勾选map模块，否则google地图打包时会模块冲突，导致打包失败

          例如报错日志：

          * What went wrong:Execution failed for task ':app:checkReleaseDuplicateClasses'.> A failure occurred while executing com.android.build.gradle.internal.tasks.CheckDuplicatesRunnable> 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)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)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 插件市场