uni-app点聚合问题

操作步骤：

点聚合功能页面以组件形式引入到其他页面，功能失效，但是以页面跳转形式，在别的页面跳转过来，功能正常

预期结果：

以组件形式运行到安卓端的时候可以显示点聚合功能

实际结果：

以组件形式运行到安卓端点聚合失效

bug描述：

点聚合功能当以组件形式引入到另一个页面的时候，运行到安卓失效，运行到小程序正常。但是以页面跳转的形式就正常

信息类别	信息内容
产品分类	uniapp/App
PC开发环境操作系统	Windows
PC开发环境操作系统版本号	win10
HBuilderX类型	正式
HBuilderX版本号	3.99
手机系统	Android
手机系统版本号	Android 14
手机厂商	华为
手机机型	荣耀
页面类型	vue
vue版本	vue2
打包方式	云端
项目创建方式	HBuilderX

地图.zip

gougou168 1楼•4 天前

请提供下测试工程

phonegap100 2楼•4 天前

您好测试工程我发到了下方回复里了，希望可以给排查下

itying888 3楼•4 天前

运行下这个吧

caililin 4楼•4 天前作者

参考文档注意事项。initMarkerCluster仅App-nvue 3.1.0+，微信小程序支持。app-vue不支持。

gougou168 5楼•4 天前

改成了mounted 还是没有效果

sinazl 6楼•4 天前

回复 9***@qq.com: 已更新回复

itying888 7楼•4 天前

回复 YUANRJ: 就是这个聚合功能运行在安卓端，没有办法在vue页面展示，只能在nvue页面展示吗

yuanlaile 8楼•4 天前

回复 9***@qq.com: 是的

nodeper 9楼•4 天前

在 Uni-App 中实现点聚合（Marker Clustering）通常用于在地图上展示大量标记点时，将这些标记点根据距离进行聚合，以提高地图的可读性和性能。Uni-App 本身并不直接提供点聚合的功能，但可以通过结合第三方地图 SDK（如高德地图、百度地图等）来实现点聚合。

以下是一个基本的实现思路，以高德地图为例：

1. 引入高德地图 SDK

首先，你需要在 Uni-App 项目中引入高德地图的 SDK。可以通过以下步骤实现：

在 manifest.json 中配置地图的 AppKey。
在页面中引入高德地图的 JavaScript API。

// manifest.json
{
  "mp-weixin": {
    "appid": "your-appid",
    "plugins": {
      "amap": {
        "version": "1.0.0",
        "provider": "wxc6c86e83a6a4c1c1"
      }
    }
  }
}

2. 创建地图并添加标记点

在页面中创建一个地图，并添加多个标记点。

<template>
  <view>
    <map id="myMap" style="width: 100%; height: 100vh;" :latitude="latitude" :longitude="longitude" :markers="markers"></map>
  </view>
</template>

<script>
export default {
  data() {
    return {
      latitude: 39.90469,
      longitude: 116.40717,
      markers: [
        { id: 1, latitude: 39.90469, longitude: 116.40717, title: '北京' },
        { id: 2, latitude: 31.23037, longitude: 121.47370, title: '上海' },
        { id: 3, latitude: 23.12908, longitude: 113.26436, title: '广州' },
        // 更多标记点...
      ]
    };
  }
};
</script>

3. 使用点聚合插件

高德地图提供了 MarkerClusterer 插件来实现点聚合功能。你可以通过以下步骤来使用它：

引入 MarkerClusterer 插件。
创建 MarkerClusterer 实例并传入标记点数据。

<script>
export default {
  data() {
    return {
      latitude: 39.90469,
      longitude: 116.40717,
      markers: [
        { id: 1, latitude: 39.90469, longitude: 116.40717, title: '北京' },
        { id: 2, latitude: 31.23037, longitude: 121.47370, title: '上海' },
        { id: 3, latitude: 23.12908, longitude: 113.26436, title: '广州' },
        // 更多标记点...
      ]
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      const map = new AMap.Map('myMap', {
        zoom: 10,
        center: [this.longitude, this.latitude]
      });

      const markers = this.markers.map(marker => {
        return new AMap.Marker({
          position: [marker.longitude, marker.latitude],
          title: marker.title
        });
      });

      const markerClusterer = new AMap.MarkerClusterer(map, markers, {
        gridSize: 80, // 聚合网格大小
        maxZoom: 18, // 最大聚合级别
        minClusterSize: 2 // 最小聚合数量
      });
    }
  }
};
</script>