uni-app 安卓中nvue地图组件map使用点聚合功能时会出现闪退问题

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

uni-app 安卓中nvue地图组件map使用点聚合功能时会出现闪退问题

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

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：3.7.3

手机系统：Android

手机系统版本号：Android 11

手机厂商：小米

手机机型：小米9

页面类型：nvue

vue版本：vue2

打包方式：云端

App下载地址或H5网址：https://www.pgyer.com/4jh2Lt

示例代码：

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();  

this.markers = [];  
// 优先绘制地图轮廓  
let mapDatas = new Array;  
// 整理数据  
mapData.mapData.features[0].geometry.coordinates[0][0].forEach(item=>{  
    mapDatas.push({  
        latitude: item[1],  
        longitude: item[0]  
    })  
})  
this.polygons = [{  
    points: mapDatas,  
    strokeWidth: 2, // 描边的宽度  
    dottedLine: true, // 是否为虚线  
    strokeColor: '#7497f7', // 描边的颜色  
    fillColor: '#a9b5f894', // 填充颜色  
}];  

res.data.lists.forEach((item, index) => {  
    // 添加标记点位  
    this.markers.push({  
        ...item,  
        id: item.id,  
        longitude: Number(item.point_info.lng),  
        latitude: Number(item.point_info.lat),  
        iconPath: '/static/img/logo.png',  
        size: '30',  
        height: '30',  
        title: item.point_info.point || item.point_info.point_name,  
        joinCluster: true, // 指定了该参数才会参与聚合  
        type: 'AUTO',  
        customCallout: {  
            anchorY: 0, // Y轴偏移量  
            anchorX: 0, // X轴偏移量  
            display: 'ALWAYS', // 一直展示  
        }  
    })  
})  

this._mapContext.addMarkers({  
    markers: this.markers,  
    clear: false,  
    complete(res) {  

    }  
})

Harmonyos Next教程
2 回复

一年了还是没修好


针对您提到的uni-app在安卓平台上使用nvue的map组件进行点聚合功能时出现的闪退问题，这通常可能是由于性能瓶颈、内存泄漏或者组件本身的一些bug导致的。由于无法直接获取具体的错误日志或代码实现，我将提供一个基本的点聚合功能实现示例，并指出一些可能导致闪退的常见原因和检查点。

基本点聚合功能实现

首先，确保您已经正确引入了地图组件并启用了聚合功能。以下是一个简化的示例：

<template>
  <view>
    <map 
      id="map" 
      :longitude="longitude" 
      :latitude="latitude" 
      :scale="scale"
      show-location
      style="width: 100%; height: 100%;"
      @tap="onMapTap"
      :markers="markers"
      :clusters="clusters"
      :cluster-style="clusterStyle"
    ></map>
  </view>
</template>

<script>
export default {
  data() {
    return {
      longitude: 116.404,
      latitude: 39.915,
      scale: 14,
      markers: [], // 初始化标记点
      clusters: true, // 启用点聚合
      clusterStyle: {
        // 聚合点的样式配置
        width: 50,
        height: 50,
        url: '/static/cluster.png', // 聚合图标路径
        anchor: { x: 0.5, y: 0.5 },
        textSize: 12,
        textColor: '#fff'
      }
    };
  },
  methods: {
    onMapTap(e) {
      // 处理地图点击事件
      console.log(e);
    },
    loadMarkers() {
      // 加载标记点数据，这里应动态获取数据
      this.markers = [
        // 示例数据，实际应包含多个点
        {id: 1, latitude: 39.915, longitude: 116.404},
        // ...更多点
      ];
    }
  },
  mounted() {
    this.loadMarkers();
  }
};
</script>

检查点

  1. 内存管理：确保在添加大量标记点时，应用没有因为内存不足而崩溃。可以尝试分批加载标记点或使用懒加载技术。

  2. 性能优化：如果标记点非常多，考虑减少每个标记点的渲染复杂度，比如减小图标大小或使用简单的图标。

  3. 错误处理：在添加标记点或配置地图时，加入错误处理逻辑，捕获并处理可能的异常。

  4. 组件版本：检查uni-app和nvue地图组件的版本，确保使用的是最新稳定版本，有时候问题可能由旧版本的bug导致。

  5. 日志分析：如果可能，获取并分析应用的崩溃日志，这将提供导致闪退的具体原因。

由于问题可能涉及多个方面，上述代码和检查点仅作为参考，实际解决还需结合具体的应用场景和错误日志进行深入分析。

回到顶部