uni-app Google map 点聚合能力在ios上不生效，除非设置延时添加markers

发布于 1周前 作者 htzhanglong 来自 Uni-App

uni-app Google map 点聚合能力在ios上不生效，除非设置延时添加markers

开发环境 版本号 项目创建方式
Windows w11 HBuilderX

产品分类：uniapp/App
PC开发环境操作系统：Windows
HBuilderX类型：正式
HBuilderX版本号：4.24
手机系统：iOS
手机系统版本号：iOS 17
手机厂商：苹果
手机机型：iphone 14 pro
页面类型：nvue
vue版本：vue3
打包方式：云端
项目创建方式：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: 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.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) => {
console.log(i)
markers.push(
Object.assign({},{
id: i + 1,
iconPath: img,
width: 50,
height: 50,
joinCluster: true, // 指定了该参数才会参与聚合
label: {
width: 50,
height: 30,
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>

Harmonyos Next教程
1 回复

在uni-app中使用Google Maps并遇到点聚合（Clustering）在iOS上不生效的问题，通常是由于标记（markers）的添加时机和渲染机制导致的。为了确保点聚合功能能够正常工作，尤其是在iOS设备上，我们可以通过设置延时来添加markers，给地图足够的时间来初始化并正确渲染聚合效果。

以下是一个基本的代码示例，展示了如何在uni-app中延迟添加markers来实现Google Maps的点聚合功能：

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

<script>
export default {
  data() {
    return {
      longitude: 116.404,
      latitude: 39.915,
      markers: [],
      clusters: {
        // 配置聚合相关属性，如最大聚合点数量、聚合图标等
        enabled: true,
        gridSize: 80,
        maxZoom: 15,
        zoomOnClick: true,
        averageCenter: true,
        clusterIcon: {
          url: 'path/to/cluster_icon.png',
          width: 53,
          height: 53,
          anchor: new google.maps.Point(26, 26),
          textColor: 'red',
          textSize: 12,
        },
      },
    };
  },
  mounted() {
    this.delayedAddMarkers();
  },
  methods: {
    delayedAddMarkers() {
      setTimeout(() => {
        // 模拟一组标记数据
        const markerData = [
          { id: 1, latitude: 39.915, longitude: 116.404 },
          { id: 2, latitude: 39.916, longitude: 116.405 },
          // ...更多标记数据
        ];

        // 将数据转换为map markers格式
        this.markers = markerData.map(item => ({
          id: item.id,
          latitude: item.latitude,
          longitude: item.longitude,
        }));
      }, 1000); // 延迟1秒添加markers
    },
  },
};
</script>

<style scoped>
/* 样式可以根据需要调整 */
</style>

在这个示例中，我们通过setTimeout函数延迟1秒后再添加markers到地图上。这通常可以确保地图有足够的时间来初始化并准备好处理聚合逻辑。如果仍然遇到问题，可能需要检查Google Maps的SDK版本是否与uni-app兼容，或者查看是否有其他iOS特定的限制或bug。

请注意，实际开发中可能需要根据具体情况调整延迟时间或聚合配置。同时，确保你已经在项目中正确引入了Google Maps的SDK，并且遵循了相关的API使用条款。

回到顶部