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

由于 uniapp 官方的 map 组件文档中提及谷歌地图Google Map的兼容性问题使得在 App 端会提示如下信息打包时未添加 Maps 模块请参考5App模块配置错误处理 - DCloud问答如图这里附上官网地图组件的兼容性信息也就是说 这破地图只允许你在 nvue 页面中使用所以你要不就换成 nvue 的项目 但是这不是坑爹呢嘛在网上搜寻两天半终于找到了解决方案uniapp开发app使用谷歌地图(ios跟安卓)_uniapp 谷歌地图-CSDN博客由于我的项目包含 微信小程序、支付宝小程序没有别的原因就是老板要这要那的 用 web-view 方案还需要单独去部署 这个 html于是我参考了他的第二种方案 render-js 经过我的试验可以支持到 h5renderjs官方文档renderjs | uni-app官网示例代码template view classcontainer view idmap :currentLatLngcurrentLatLng :change:currentLatLngsetCurrentLatLng :markersmarkers :change:markersputMarkersOnMap / /view /template script modulemap langrenderjs export default { data() { return { googleJSScriptSrc: https://maps.googleapis.com/maps/api/js?keyyour google map keycallbackinitMap, currentLatLng: null, markers: null, markersEle: [], map: null } }, watch: { markers(newValue) { console.log(Markers changed:, newValue) this.putMarkersOnMap(newValue) } }, async mounted() { let _this this const script document.createElement(script) script.src _this.googleJSScriptSrc script.async true window.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) { // 清除现有的标记 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(28, 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 } res this.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 } ] }, 1000) } } } /script style langscss scoped .container { #map { height: 100vh; } } /styleH5 效果展示App端展示效果