当前位置: 首页 > news >正文

uniapp使用 renderjs 多平台谷歌地图(Google Map)的适配

由于 uniapp 官方的 map 组件文档中提及,谷歌地图(Google Map)的兼容性问题,使得在 App 端会提示如下信息:

打包时未添加 Maps 模块,请参考:5+App模块配置错误处理 - DCloud问答

如图:

 这里附上官网地图组件的兼容性信息:

也就是说: 这破地图只允许你在 nvue 页面中使用

所以你要不就换成 nvue 的项目  (但是这不是坑爹呢嘛)

在网上搜寻两天半,终于找到了解决方案:

uniapp开发app使用谷歌地图(ios跟安卓)_uniapp 谷歌地图-CSDN博客

由于我的项目包含 微信小程序、支付宝小程序(没有别的原因,就是老板要这要那的)  用 web-view 方案还需要单独去部署 这个 html

于是我参考了他的第二种方案 render-js (经过我的试验,可以支持到 h5)

renderjs官方文档:renderjs | uni-app官网

示例代码:

<template><view class="container"><view id="map" :currentLatLng="currentLatLng" :change:currentLatLng="setCurrentLatLng" :markers="markers":change:markers="putMarkersOnMap" /></view>
</template><script module="map" lang="renderjs">export default {data() {return {//key也给你们用了,反正是公司的googleJSScriptSrc: 'https://maps.googleapis.com/maps/api/js?key=AIzaSyAD-F01MB1EqVwXRHnZQ9DN34jIlLYGzno&callback=initMap',currentLatLng: null,markers: null,markersEle: [],map: null}},watch: {markers(newValue) {console.log('Markers changed:', newValue)this.putMarkersOnMap(newValue)}},async mounted() {let _this = thisconst script = document.createElement('script')script.src = _this.googleJSScriptSrcscript.async = truewindow.initMap = () => setTimeout(() => _this.initAmap());document.head.appendChild(script)await _this.$ownerInstance.callMethod("queryLocation")await _this.$ownerInstance.callMethod("queryMarkers")},destroyed() {// 移除在mounted中添加的Google Maps脚本const script = document.querySelector(`script[src="${this.googleJSScriptSrc}"]`);if (script) {document.head.removeChild(script);}// 清除全局的initMap函数if (window.initMap) {delete window.initMap;}},methods: {setCurrentLatLng(newValue, oldValue, ownerInstance, instance) {this.currentLatLng = newValue},initAmap() {if (this.currentLatLng) {let _this = this_this.map = new google.maps.Map(document.getElementById("map"), {center: {lat: parseFloat(_this.currentLatLng.lat),lng: parseFloat(_this.currentLatLng.lng)},zoom: 13});const currentLocationMarker = new google.maps.Marker({position: {lat: parseFloat(_this.currentLatLng.lat),lng: parseFloat(_this.currentLatLng.lng)},icon: {url: "https://maps.gstatic.com/mapfiles/ms2/micons/red.png",scaledSize: new google.maps.Size(50, 50)},map: _this.map})}},putMarkersOnMap(newValue) {console.log('putMarkersOnMap called', newValue)if (Array.isArray(newValue) && newValue.length > 0) {// if(this.map == null) {// 	console.warn('Map not initialized yet, cannot add markers:', this.map)// 	this.putMarkersOnMap(newValue)// 	return// }// 清除现有的标记this.markersEle.forEach(marker => marker.setMap(null))this.markersEle = []newValue.forEach(markerData => {const lat = parseFloat(markerData.latitude)const lng = parseFloat(markerData.longitude)if (isNaN(lat) || isNaN(lng)) {console.error('Invalid latitude or longitude:', markerData)return}const marker = new google.maps.Marker({position: { lat, lng },icon: {url: "https://api.brightengo.net/static/charge.png",scaledSize: new google.maps.Size(24, 36)},map: this.map})console.log(marker);this.markersEle.push(marker)console.log('Marker added:', lat, lng)})} else {console.warn('Invalid newValue or map not initialized:', newValue, this.map)}},}}
</script><script>export default {data() {return {currentLatLng: null,markers: null}},methods: {async queryLocation() {const res = await uni.getLocation()const {latitude,longitude} = resthis.currentLatLng = {lat: latitude,lng: longitude}},async queryMarkers() {setTimeout(() => {this.markers = [{"id": 1,"store_id": 1,"device_number": "11843004","name": "融信中心-杭州","address": "中国浙江省杭州市上城区新塘融信中心","longitude": "120.2085","latitude": "30.2765","unit_duration": 60,"unit_price": 5,"business_hours": "8:00-23:00","picture": "/upload/file/20250623/567572be31d4eda06392ac36963c5162.jpg","status": 1,"region_code": "SG","create_time": 1744795894,"online_status": 2,"free_minutes": 5,"capping": 25,"store_name": "(杭州)融信中心","store_number": "Store_20250619161116","distance": null,"distance_text": "Unknown Distance","can_borrow": true,"can_return": true,"available_powerbanks": 1,"empty_slots": 3,"total_slots": 4},{"id": 2,"store_id": 4,"device_number": "ChIJR3bnzBMBBDQRrodrPnMlcVg","name": "NetSuite Inc.","address": "香港中環皇后大道中99號, The Center","longitude": "114.1546096","latitude": "22.2845144","unit_duration": 60,"unit_price": 5,"business_hours": "111","picture": "/upload/file/20250620/e789497713bd7787cff07cab5bb773cc.png","status": 1,"region_code": "SG","create_time": 1744795894,"online_status": 2,"free_minutes": 3,"capping": 25,"store_name": "香港","store_number": "Store_20250620134717","distance": null,"distance_text": "Unknown Distance","can_borrow": false,"can_return": false,"available_powerbanks": 0,"empty_slots": 0,"total_slots": 0},{"id": 3,"store_id": 1,"device_number": "0x35f052bd31a5060d:0x","name": "正阳门","address": "中国北京市大兴区北京大兴国际机场","longitude": "116.4105069","latitude": "39.509805","unit_duration": 60,"unit_price": 10,"business_hours": "8:00-23:00","picture": "/upload/file/20250620/ae8714a87921bafe2be1cb3d1a121e29.png","status": 1,"region_code": "SG","create_time": 1744795894,"online_status": 2,"free_minutes": 3,"capping": 25,"store_name": "(杭州)融信中心","store_number": "Store_20250619161116","distance": null,"distance_text": "Unknown Distance","can_borrow": false,"can_return": false,"available_powerbanks": 0,"empty_slots": 0,"total_slots": 0}]}, 1000)}}}
</script><style lang="scss" scoped>
.container {#map {height: 100vh;}
}
</style>

H5 效果展示:

App端展示效果:

http://www.dtcms.com/a/269741.html

相关文章:

  • 力扣-31.下一个排列
  • React Native安卓刘海屏适配终极方案:仅需修改 AndroidManifest.xml!
  • 【openGLES】安卓端EGL的使用
  • Javafx教程(1)——初始Javafx
  • 工业HMI的智能化转型:边缘计算与预测性维护的深度融合
  • 自定义RecyclerView的ItemDecoration,用于处理网格布局间距装饰器(支持边缘间距独立控制)
  • ubuntu vscode 点击变量链接进去后 怎么返回原来的位置
  • LocalStorage和SessionStorage的区别和应用
  • 马尔可夫决策过程
  • python办公自动化----使用pandas和os合并多个订单表
  • 【python】 `parse_time_to_seconds` 在功能及健壮性上有以下主要区别
  • ​扣子Coze飞书多维表插件添加数据记录
  • 【UE5】虚幻引擎小百科
  • std::function
  • coze平台AI Agent开发入门之工作流的基本使用方法
  • Redis 缓存机制 及问题场景 及解决方案
  • 接口自动化工具-SoapUI
  • kotlin
  • Ubuntu22.04下微星B850M主板 无wifi模块
  • AR 双缝干涉实验亮相:创新科技实验范式,开拓 AR 技术新局​
  • 传输层协议TCP、UDP
  • SpringBoot+Mybatis+MySQL+Vue+ElementUI前后端分离版:整体布局、架构调整(二)
  • 基于FPGA的累加算法实现
  • 2. 两数相加
  • 从零实现一个GPT 【React + Express】--- 【1】初始化前后端项目,实现模型接入+SSE
  • 领域驱动设计(DDD)重塑金融系统架构
  • Qt 与Halcon联合开发九:算法类设计与实现讲解(附源码)
  • AlphaEvolve:谷歌的算法进化引擎 | 从数学证明到芯片设计的AI自主发现新纪元
  • 告别“电量焦虑”,BLE如何提升可穿戴设备续航能力?
  • Flutter基础(前端教程④-组件拼接)