uni-app中map组件自定义聚合点样式在手机端样式失效

uni-app中map组件自定义聚合点样式在手机端样式失效

示例代码：

<template>  
  <view class="content">  
    <map id="map" class="map" :show-location="true" :latitude="latitude" :longitude="longitude"></map>  
  </view>  
</template>  

<script>  
  const img = '/static/logo.png';  

  export default {  
    data() {  
      return {  
        latitude: 23.099994,  
        longitude: 113.324520,  
      }  
    },  
    onReady() {  
      this._mapContext = uni.createMapContext("map", this);  

      // 仅调用初始化，才会触发 on.("markerClusterCreate", (e) => {})  
      this._mapContext.initMarkerCluster({  
        enableDefaultStyle: false,  
        zoomOnClick: true,  
        gridSize: 60,  
        complete(res) {  
          console.log('initMarkerCluster', res)  
        }  

      });  

      this._mapContext.on("markerClusterCreate", (e) => {  

        debugger  

        let clusterMarkers = []  
            // const clusters = e.clusters // 新产生的聚合簇  
            const clusters = e // 新产生的聚合簇  
            console.log(clusters)  
             clusters.forEach((cluster,index) => {  
                const {  
                    center, // 聚合点的经纬度数组  
                    clusterId, // 聚合簇id  
                    markerIds // 已经聚合了的标记点id数组  
                } = cluster  
                debugger  
                let clusterObj = {clusterId,   
                    width: 50,  
                    height: 50,  
                    iconPath: '',  
                    label: {// 定制聚合簇样式  

                        fontSize: 16,  
                        color: '#fff',  
                        width: 50,  
                        height: 50,  
                        bgColor: '#22ac38',  
                        borderRadius: 25,  
                        textAlign: 'center',  
                        anchorX: -10,  
                        anchorY: -35,  

                    }  
                }  
                clusterMarkers.push(clusterObj)  
            })  
            // 添加聚合簇  
            this._mapContext.addMarkers({  
                markers:clusterMarkers,  
                clear: false, //是否先清空地图上所有的marker  
            })  

            console.log(clusterMarkers)  

        // console.log("markerClusterCreate", e);  
      });  

      this.addMarkers();  
    },  
    methods: {  

      addMarkers() {  
        const marker = {  
          id: 1,  
          iconPath: img,  
          width: 50,  
          height: 50,  
          joinCluster: true, // 指定了该参数才会参与聚合  
          label: {  
            width: 50,  
            height: 30,  
            borderWidth: 1,  
            borderRadius: 10,  
            bgColor: '#ffffff'  
          }  
        };  

        const positions = [{  
          latitude: 23.099994,  
          longitude: 113.324520,  
        }, {  
          latitude: 23.099994,  
          longitude: 113.322520,  
        }, {  
          latitude: 23.099994,  
          longitude: 113.326520,  
        }, {  
          latitude: 23.096994,  
          longitude: 113.329520,  
        }]  

        const markers = []  

        positions.forEach((p, i) => {  
            const newMarker = Object.assign(marker, p)  
            newMarker.id = i + 1  
            newMarker.label.content = `label ${i + 1}`  
            markers.push(newMarker)  
            this._mapContext.addMarkers({  
                markers,  
                clear: false,  
                complete(res) {  
                  console.log('addMarkers', res)  
                }  
            })  
        })  
      }  
    }  
  }  
</script>  

<style>  
  .content {  
    flex: 1;  
  }  

  .map {  
    flex: 1;  
  }  
</style>

操作步骤：

• 在安卓手机上打开地图，聚合点样式会发生改变

预期结果：

• 聚合点样式发生改变

实际结果：

• 样式没变

bug描述：

• uniapp中使用map组件自定义聚合点样式，在APP端nvue页面样式失效