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

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

news 2025/7/9 8:47:08

由于 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 效果展示：