9***@qq.com
9***@qq.com
  • 发布:2024-01-04 16:04
  • 更新:2024-03-04 16:29
  • 阅读:248

点聚合不生效

分类:uni-app

官方案例中点聚合运行到安卓真机为什么都不显示?


<template>  
  <view class="content">  
    <map  
      id="map"  
      class="map"  
      :show-location="true"  
      :latitude="latitude"  
      :longitude="longitude"  
      style="width: 100%; height: 100vh"  
    ></map>  
  </view>  
</template>  

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

export default {  
  data() {  
    return {  
      latitude: 23.099994,  
      longitude: 113.32452,  
    };  
  },  
  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) => {  
      console.log("markerClusterCreate", e);  
    });  

    this.addMarkers();  
  },  
  methods: {  
    addMarkers() {  
      const positions = [  
        {  
          latitude: 23.099994,  
          longitude: 113.32452,  
        },  
        {  
          latitude: 23.099994,  
          longitude: 113.32252,  
        },  
        {  
          latitude: 23.099994,  
          longitude: 113.32652,  
        },  
        {  
          latitude: 23.096994,  
          longitude: 113.32952,  
        },  
      ];  

      const markers = [];  

      positions.forEach((p, i) => {  
        markers.push(  
          Object.assign(  
            {},  
            {  
              id: i + 1,  
              iconPath: img,  
              width: 50,  
              height: 50,  
              joinCluster: true, // 指定了该参数才会参与聚合  
              label: {  
                width: 200,  
                height: 100,  
                borderWidth: 1,  
                borderRadius: 10,  
                bgColor: "#ffffff",  
                content: `label ${i + 1}`,  
              },  
            },  
            p  
          )  
        );  
      });  
      this._mapContext.addMarkers({  
        markers,  
        clear: false,  
        complete(res) {  
          console.log("addMarkers", res);  
        },  
      });  
    },  
  },  
};  
</script>  

<style>  
.content {  
  flex: 1;  
}  

.map {  
  flex: 1;  
}  
</style>  
``  
2024-01-04 16:04 负责人:无 分享
已邀请:
爱豆豆

爱豆豆 - 办法总比困难多

你发的代码片我运行后是生效的 你用的是nvue吗?
initMarkerCluster 只支持App-nvue 3.1.0+和微信小程序

1***@qq.com

1***@qq.com

我用点聚合也不生效,加joinCluster: true,点就消失了

  • 1***@qq.com

    搞错了,我用的nvue页面,不能用uni.createMapContext("map", this),用this.$refs.map管用

    2024-03-19 09:46

要回复问题请先登录注册