T_T无辜的程序

发布：2022-03-14 10:45
更新：2022-04-27 15:21
阅读：1033

【报Bug】uniapp地图使用点聚合需要自定义样式未生效

分类：uni-app

bug反馈 map nvue

产品分类： uniapp/App

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： windows10

HBuilderX类型：正式

HBuilderX版本号： 3.3.11

手机系统： Android

手机系统版本号： Android 9.0

手机厂商：小米

手机机型：红米note3

页面类型： nvue

vue版本： vue2

打包方式：云端

项目创建方式： HBuilderX

示例代码：

<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: true,    
        zoomOnClick: true,    
        gridSize: 60,    
        complete(res) {    
          console.log('initMarkerCluster', res)    
        }    
      });    

      this._mapContext.on("markerClusterCreate", (res) => {    
        console.log("markerClusterCreate", res);    
        const clusters = res  

        const markers = clusters.map(cluster => {  
            const {  
                center,  
                clusterId,  
                markerIds  
            } = cluster  

            return {  
                ...center,  
                width: 0,  
                height: 0,  
                clusterId, // 必须    
                alpha:0.5,  
                label: {  
                    content: markerIds.length + '',  
                    fontSize: 20,  
                    width: 60,  
                    height: 60,  
                    bgColor: '#ff5500',  
                    borderRadius: 30,  
                    textAlign: 'center',  
                    anchorX: 0,  
                    anchorY: -30,  
                }  
            }  
        })  
        this._mapContext.addMarkers({  
            markers,  
            fail(err){  
                console.log(err)  
            },  
            success(res){  
                console.log('成功',res)  
            },  
            complete(res) {  
                console.log('clusterCreate addMarkers', res)  
            }  
        })  
      });    

      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>

操作步骤：

<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", (res) => {    
        console.log("markerClusterCreate", res);    
        const clusters = res  

        const markers = clusters.map(cluster => {  
            const {  
                center,  
                clusterId,  
                markerIds  
            } = cluster  

            return {  
                ...center,  
                width: 0,  
                height: 0,  
                clusterId, // 必须    
                alpha:0.5,  
                label: {  
                    content: markerIds.length + '',  
                    fontSize: 20,  
                    width: 60,  
                    height: 60,  
                    bgColor: '#ff5500',  
                    borderRadius: 30,  
                    textAlign: 'center',  
                    anchorX: 0,  
                    anchorY: -30,  
                }  
            }  
        })  
        this._mapContext.addMarkers({  
            markers,  
            fail(err){  
                console.log(err)  
            },  
            success(res){  
                console.log('成功',res)  
            },  
            complete(res) {  
                console.log('clusterCreate addMarkers', res)  
            }  
        })  
      });    

      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>

预期结果：

聚合样式enableDefaultStyle要是为true,默认样式到底是蓝色实底还是和js中的默认聚合一样，
enableDefaultStyle如果为false，样式该怎么自定义

实际结果：

不生效，一直为蓝色实底的圆

bug描述：

设置自定义聚合样式不生效

2022-03-14 10:45 负责人:无分享

3 个回复

FullStack - 【插件开发】【专治疑难杂症】【ios上架、马甲包、白包、过审、已成功上架过几百个】【多款插件已上架：https://ext.dcloud.net.cn/publisher?id=22130】【非诚勿扰】QQ：543610866

T_T无辜的程序 (作者)

这个是？

2022-03-14 10:56

1***@qq.com - 不知道说啥

楼主解决了吗

T_T无辜的程序 (作者)

没有，你解决了吗

2022-04-12 09:49

3***@qq.com

聚合样式确实改不掉

T_T无辜的程序 (作者)

ios的目前还是改不掉，安卓的改掉了，但是还是有小问题

2022-04-28 10:03

该问题目前已经被锁定, 无法添加新回复

【报Bug】uniapp地图使用点聚合需要自定义样式未生效

预期结果：

聚合样式enableDefaultStyle要是为true,默认样式到底是蓝色实底还是和js中的默认聚合一样，
enableDefaultStyle如果为false，样式该怎么自定义

实际结果：

不生效，一直为蓝色实底的圆

bug描述：

3 个回复

公告

相关问题

【报Bug】uniapp地图使用点聚合需要自定义样式未生效

预期结果： 聚合样式enableDefaultStyle要是为true,默认样式到底是蓝色实底还是和js中的默认聚合一样， enableDefaultStyle如果为false，样式该怎么自定义

实际结果： 不生效，一直为蓝色实底的圆

bug描述：

相关链接 ：

与内容相关的链接

3 个回复

公告

相关问题

预期结果：

聚合样式enableDefaultStyle要是为true,默认样式到底是蓝色实底还是和js中的默认聚合一样，
enableDefaultStyle如果为false，样式该怎么自定义

实际结果：

不生效，一直为蓝色实底的圆

相关链接：