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

前提条件：

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

谷歌地图说明

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

  • 设置地图语言
<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&language=ja&callback=initMap">
</script>

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

第一种方法(web-view)：

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

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

  • 展示目录结构:

index.nvue

<template>
	<view>
		<view style="height: 100rpx;">222222222</view>
		<view class="" v-if="isShow">
			<web-view style="background-color: #fafafa;" ref="webview" :style="{ height: statusBarHeight + 'px'}"
				@onPostMessage="getMessage" :src="webUrl"></web-view>
		</view>
	</view>
</template>

<script>
	/**
	 * 
	 * 请看这里 
	 * 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-PLUS
			this.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
			}
		}
	};
</script>

<style>
	
</style>

 index1.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=0" />
		<link href="http://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet" type="text/css">
		<title>谷歌地图-初始化地图</title>
		<link rel="stylesheet" type="text/css" href="./css/index.css" />
		<script src="./js/lib/common.js"></script>
	</head>
	<body>
		<!-- 地图 -->
		<div id="map"></div>
		<!-- css loading动画 -->
		<div class="loader" id="loader"></div>
	</body>
	<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
	<script
		src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxx&libraries=places&language=zh-TW&callback=initMap"
		async defer></script>
	<script src="./js/index1.js"></script>
</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 < vars.length; i++) {
		var pair = vars[i].split("=");
		if (pair[0] == variable) {
			return pair[1];
		}
	}
	return (false);
}

/**
 * 加载动画
 * 
 */
function LoadAnimation(isFalse) {
	if (isFalse) {
		document.getElementById("loader").style.display = "inline";
	} else {
		document.getElementById("loader").style.display = "none";
	}

}
  • <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，绘制轨迹

<template>
	<view class="trajectory OverallSty">
		<view class="content">
			<view id="container">
				<view class="loader" v-if="loaderSta"></view>
				<view style="width: 750rpx; height:650rpx;" :location="currLocation"
					:change:location="renderScript.receiveLoca" :Trace="currTrace"
					:change:Trace="renderScript.receiveTrace" id="renderScript"></view>
			</view>
		</view>
	</view>
</template>

<script>
	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 = this
			setTimeout(() => {
				_this.loaderSta = false
			}, 1500);
			this.getWorkerSignsInformationFun()
		},
		methods: {
			getWorkerLocus() {
				let _this = this
				get('/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.result
					const 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 = this
				get('/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?.result
					if (_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);
				});
			}
		}
	};
</script>
<script module="renderScript" lang="renderjs">
	var meMarker = []
	var polylinePath = null
	export default {
		data() {
			return {
				map: {},
				receiveLocaDate: {
					lat: '39.906217',
					lon: '116.3912757'
				},
				receiveTraceDate: []
			};
		},
		mounted() {
			let _this = this
			const 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 = this
				console.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 = this
				const 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 = this
				if (JSON.stringify(newValue) != '{}' && newValue.length != 0) {
					_this.receiveLocaDate = newValue
				}
			},
			receiveTrace(newValue, oldValue, ownerInstance, instance) {
				let _this = this
				if (JSON.stringify(newValue) != '{}' && newValue.length != 0) {
					console.log('触发了',newValue,newValue.length)
					for (let i = 0; i < meMarker.length; i++) {
						meMarker[i].setMap(null);
					}
					if(polylinePath != null){
						polylinePath.setMap(null);
					}
					_this.map.setZoom(20);
					const marker1 = new google.maps.Marker({
						position: {
							lat: parseFloat(newValue[0].lat),
							lng: parseFloat(newValue[0].lng)
						},
						icon: {
							url: "static/img/map/icon_start.png",
							scaledSize: new google.maps.Size(20, 20)
						},
						map: _this.map
					});
					meMarker.push(marker1)
					const marker2 = new google.maps.Marker({
						position: {
							lat: parseFloat(newValue[newValue.length - 1].lat),
							lng: parseFloat(newValue[newValue.length - 1].lng)
						},
						icon: {
							url: "static/img/map/icon_end.png",
							scaledSize: new google.maps.Size(20, 20)
						},
						map: _this.map
					});
					meMarker.push(marker2)
					polylinePath = new google.maps.Polyline({
						path: newValue,
						geodesic: false,
						strokeColor: '#41d9b7',
						strokeOpacity: 1,
						strokeWeight: 8,
						editable: false,
						draggable: false,
					});
					polylinePath.setMap(_this.map)
					let pos = {
						lat: parseFloat(newValue[0].lat),
						lng: parseFloat(newValue[0].lng)
					}
					_this.map.setCenter(pos)
				}
			}
		}
	}
</script>

<style scoped>
	/* 动画 */
	.trajectory .loader {
		position: fixed;
		z-index: 99;
		border: 8px solid #f3f3f3;
		border-top: 8px solid #ea4335;
		border-radius: 50%;
		width: 80px;
		height: 80px;
		animation: spin 2s linear infinite;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -90rpx;
		margin-top: 320rpx;
		transform: translate(-50%, -50%);
	}

	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}
</style>

遇到的问题

  • 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 插件市场 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/514024.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

HarmonyOS NEXT应用开发之ForEach：循环渲染

HarmonyOS NEXT应用开发之ForEach：循环渲染

ForEach接口基于数组类型数据来进行循环渲染&#xff0c;需要与容器组件配合使用&#xff0c;且接口返回的组件应当是允许包含在ForEach父容器组件中的子组件。例如&#xff0c;ListItem组件要求ForEach的父容器组件必须为 List组件 。 说明&#xff1a; 从API version 9开始&a…
阅读更多...
vue3+echarts：echarts地图打点显示的样式

vue3+echarts：echarts地图打点显示的样式

colorStops是打点的颜色和呼吸灯、label为show是打点是否显示数据、rich里cnNum是自定义的过滤模板用来改写显示数据的样式 series: [{type: "effectScatter",coordinateSystem: "geo",rippleEffect: {brushType: "stroke",},showEffectOn: &quo…
阅读更多...
外链工具源码版V2

外链工具源码版V2

请将zip文件全部解压缩即可访问&#xff01; 源码全部开源&#xff0c;支持上传二级目录访问 #已更新增加大量高质量外链&#xff08;若需要增加修改其他外链请打开txt文件&#xff09; #修复优化页面端 源码下载地址&#xff1a;外链工具源码版V2
阅读更多...
记录一次官网访问很慢的情况

记录一次官网访问很慢的情况

客户查看云监控,带宽未超限,客户取的是1分钟的原生值,也就是1分钟也是个平均值。 但是客户的原始值&#xff0c;其实就是1分钟内的平均值。所以客户的瞬时超限&#xff0c;其实是看不出来的。但是后端同事从实时监控里面可以看到超限的情况。 客户升带宽后&#xff0c; 发现还…
阅读更多...
二维动画制作软件 Animate 2024 for mac激活版

二维动画制作软件 Animate 2024 for mac激活版

Animate 2024 for Mac是一款功能强大的二维动画制作软件&#xff0c;专为Mac用户打造。它提供了丰富的动画编辑功能&#xff0c;使用户能够轻松创建出生动逼真的动画作品。无论是短片、广告还是游戏等应用领域&#xff0c;Animate 2024都能发挥出出色的表现。 软件下载&#xf…
阅读更多...
Vue和FastAPI实现前后端分离

Vue和FastAPI实现前后端分离

前言 近期接触了一些开源大模型应用服务&#xff0c;发现很多用的都是FastAPI web框架&#xff0c;于是乎研究了一下它的优势&#xff0c;印象最深有两个&#xff1a;一个是它的异步处理性能比较好&#xff0c;二是它可以类似java swagger的API交互文档&#xff0c;这个对应前…
阅读更多...
微服务连接不上rabbitmq解决

微服务连接不上rabbitmq解决

1.把端口port: 15672改成port&#xff1a;5672 2&#xff1a;virtual-host: my_vhost一定对应上
阅读更多...
VSCode安装及Python、Jupyter插件安装使用

VSCode安装及Python、Jupyter插件安装使用

VSCode 介绍 Visual Studio Code&#xff08;简称VSCode&#xff09;是一个由微软开发的免费、开源的代码编辑器。VSCode是一个轻量级但是非常强大的代码编辑器&#xff0c;它支持多种编程语言&#xff08;如C,C#&#xff0c;Java&#xff0c;Python&#xff0c;PHP&#xff0…
阅读更多...
云存储中常用的相同子策略的高效、安全的基于属性的访问控制的论文阅读

云存储中常用的相同子策略的高效、安全的基于属性的访问控制的论文阅读

参考文献为2022年发表的Efficient and Secure Attribute-Based Access Control With Identical Sub-Policies Frequently Used in Cloud Storage 动机 ABE是实现在云存储中一种很好的访问控制手段&#xff0c;但是其本身的计算开销导致在实际场景中应用收到限制。本论文研究了…
阅读更多...
Raven：一款功能强大的CICD安全分析工具

Raven：一款功能强大的CICD安全分析工具

关于Raven Raven是一款功能强大的CI/CD安全分析工具&#xff0c;该工具旨在帮助广大研究人员对GitHub Actions CI工作流执行大规模安全扫描&#xff0c;并将发现的数据解析并存储到Neo4j数据库中。 Raven&#xff0c;全称为Risk Analysis and Vulnerability Enumeration for C…
阅读更多...
4大企业实例解析：为何MongoDB Atlas成为AI服务构建的首选

4大企业实例解析：为何MongoDB Atlas成为AI服务构建的首选

随着人工智能和生成式AI技术的迅猛发展&#xff0c;众多企业和机构正积极利用自然语言处理&#xff08;NLP&#xff09;、大型语言模型&#xff08;LLM&#xff09;等前沿技术&#xff0c;打造出一系列AI驱动的产品、服务和应用程序。 本文将展示四家已在AI创新领域取得显著成…
阅读更多...
鸿蒙实战开发：【实现应用悬浮窗】

鸿蒙实战开发：【实现应用悬浮窗】

如果你要做的是系统级别的悬浮窗&#xff0c;就需要判断是否具备悬浮窗权限。然而这又不是一个标准的动态权限&#xff0c;你需要兼容各种奇葩机型的悬浮窗权限判断。 fun checkPermission(context: Context): Boolean if (Build.VERSION.SDK_INT < Build.VERSION_CODES.M)…
阅读更多...
IDEA 解决 java: 找不到符号 符号: 类 __ （使用了lombok的注解）

IDEA 解决 java: 找不到符号 符号: 类 __ （使用了lombok的注解）

原因IDEA版本太高&#xff0c;在 ProcessingEnvironement 预编译的时候是以代理的方式来执行的&#xff0c;不再是直接 javac方式, lombok依赖的 javac方式的 annotation processors 不再生效了 解决办法&#xff1a;下面这一句&#xff0c;加在下图中 -Djps.track.ap.depen…
阅读更多...
权限提升-Linux系统权限提升篇VulnhubRbash绕过DockerLXD容器History泄漏shell交互

权限提升-Linux系统权限提升篇VulnhubRbash绕过DockerLXD容器History泄漏shell交互

知识点 1、普通用户到Linux-泄漏-History 2、普通用户到Linux-限制-Rbash绕过 3、普通用户到Linux-容器-LXD&Docker 4.Linux系统提权-web/普通用户-docker逃逸&提权&shell交互 章节点&#xff1a; 1、Web权限提升及转移 2、系统权限提升及转移 3、宿主权限提升及…
阅读更多...
[计算机效率] 格式转换工具：格式工厂

[计算机效率] 格式转换工具：格式工厂

3.14 格式转换工具&#xff1a;格式工厂 格式工厂是一款功能强大的多媒体格式转换软件&#xff0c;可以实现音频、视频、图片等多种格式的转换。它支持几乎所有类型的多媒体格式&#xff0c;包括视频、音频、图片、字幕等&#xff0c;可以轻松实现格式之间的转换&#xff0c;并…
阅读更多...
java Web 健身管理系统idea开发mysql数据库LayUI框架java编程计算机网页源码maven项目

java Web 健身管理系统idea开发mysql数据库LayUI框架java编程计算机网页源码maven项目

一、源码特点 java Web健身管理系统是一套完善的信息管理系统&#xff0c;结合java 开发技术和bootstrap完成本系统&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。 前段主要技术 layUI bootst…
阅读更多...
【前端面试3+1】10 npm run dev 发生了什么、vue的自定义指令如何实现、js的数据类型有哪些及其不同、【最长公共前缀】

【前端面试3+1】10 npm run dev 发生了什么、vue的自定义指令如何实现、js的数据类型有哪些及其不同、【最长公共前缀】

一、npm run dev发生了什么 运行npm run dev时&#xff0c;通常是在一个基于Node.js的项目中&#xff0c;用来启动开发服务器或者执行一些开发环境相关的任务。下面是一般情况下npm run dev会执行的步骤&#xff1a; 1. 查找package.json中的scripts字段&#xff1a; npm会在项…
阅读更多...
SQL server 查询数据库中所有的表名及行数

SQL server 查询数据库中所有的表名及行数

SQL server 查询数据库中所有的表名及行数 select a.name,b.rows from sysobjects as ainner join sysindexes as bon a.id b.id where (a.type u)and (b.indid in (0, 1)) and b.rows<50 and b.rows>20 order by a.name, b.rows desc;
阅读更多...
elementui 左侧或水平导航菜单栏与main区域联动

elementui 左侧或水平导航菜单栏与main区域联动

系列文章目录 一、elementui 导航菜单栏和Breadcrumb 面包屑关联 二、elementui 左侧导航菜单栏与main区域联动 三、elementui 中设置图片的高度并支持PC和手机自适应 四、elementui 实现一个固定位置的Pagination&#xff08;分页&#xff09;组件 文章目录 系列文章目录…
阅读更多...
glm2大语言模型服务环境搭建

glm2大语言模型服务环境搭建

一、模型介绍 ChatGLM2-6B 是开源中英双语对话模型 ChatGLM-6B 的第二代版本&#xff0c;在保留了初代模型对话流畅、部署门槛较低等众多优秀特性的基础之上&#xff0c;ChatGLM2-6B 引入了如下新特性&#xff1a; 更强大的性能&#xff1a;基于 ChatGLM 初代模型的开发经验&…
阅读更多...
最新文章

Copyright @ 2022~2023