uni-app MAP地图组件闪退

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

uni-app MAP地图组件闪退

开发环境 版本号 项目创建方式
Mac 13.0.1 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Mac

HBuilderX类型：正式

HBuilderX版本号：3.96

手机系统：iOS

手机系统版本号：iOS 16

手机厂商：苹果

手机机型：14pro

页面类型：nvue

vue版本：vue2

打包方式：云端

项目创建方式：HBuilderX

操作步骤：

在APP中打开NVUE页面 直接复现


预期结果：

不闪退

实际结果：

闪退


bug描述：

1、bug
NVUE页面，IOS操作系统，google地图，map组件，自定义气泡，在<cover-view slot="callout">中插入内容，IOS端无论添加什么内容都是闪退，Android没问题。

2、需求
地图组件缺少中心点图标，比如拖动地图时 图标跟随当前视野中心点始终定位到地图中心，并实时返回坐标。该功能是否可以新增，可付费
<template>  
  <view style="flex:1;">  
    <map id="myMap" :style="'width:'+ screenWidth +'px;height:'+ screenHeight +'px;'"   
      scale="13"   
      :latitude="center.latitude"   
      :longitude="center.longitude"   
      :markers="markers"  
      @callouttap="fnOnCallOutTap"   
      @regionchange="fnRegionchange"  
    >  
      <cover-view slot="callout">  
        <cover-view class="customCallout" :markerId="item.id" v-for="(item,index) in markers">  
          <cover-image class="customCalloutImg" :src="item.img"></cover-image>  
          <cover-image class="customCalloutArrow" src="/static/bubble-arrow.png"></cover-image>  
        </cover-view>  
      </cover-view>  
    </map>  

    <view style="position:absolute;top:40px;left:0;padding:20px;box-sizing:border-box;" :style="'width:'+ screenWidth +'px'">  
      <view style="display:flex;flex-direction:row;justify-content:flex-start;">  
        <view style="width:38px;height:38px;display:flex;border-radius:5px;background:rgba(255,255,255,0.95);justify-content:center;align-items:center;flex-shrink:0;box-shadow:0 0 5px #bbb;" @click="fnCloseWin">  
          <u-icon name="arrow-left" size="22px" color="#000"></u-icon>  
        </view>  
        <view style="margin-left:10px;height:38px;border-radius:5px;background:rgba(255,255,255,0.95);flex:1;display:flex;flex-direction:row;justify-content:space-between;align-items:center;box-shadow:0 0 5px #bbb;">  
          <u-search bgColor="rgba(255,255,255,0)" placeholder="搜索" searchIconSize="26" v-model="keywords"   
          :showAction="//ask.dcloud.net.cn/isFocus"  
          :actionStyle="{  
            transitionDuration: '0',  
            paddingRight: '10px',  
            fontSize: '14px',  
            color: '#2843e6'  
          }" actionText="取消" @focus="isFocus = true" @custom="isFocus = false">  
          </u-search>  
        </view>  
      </view>  
      <view class="locationTip" v-if="!isFocus">  
        <u-icon name="map-fill" size="20px" color="#2843e6" label="45.89km 北京市朝阳区大望路" labelColor="#2843e6" labelSize="12px"></u-icon>  
      </view>  
      <view class="searchResult" v-if="isFocus">  
        <u-list showScrollbar :height="safeAreaHeight - 200" @scrolltolower="scrolltolower" style="padding:0 20px;">  
          <u-list-item>  
            <view class="searchResultItem">  
              <text style="font-size:14px;">北京市政府</text>  
            </view>  
          </u-list-item>  
          <u-list-item>  
            <view class="searchResultItem">  
              <text style="font-size:14px;">北京市市委</text>  
            </view>  
          </u-list-item>  
          <u-list-item>  
            <view class="searchResultItem">  
              <text style="font-size:14px;">天安门</text>  
            </view>  
          </u-list-item>  
          <u-list-item>  
            <view class="searchResultItem">  
              <text style="font-size:14px;">东单王府井</text>  
            </view>  
          </u-list-item>  
          <u-list-item>  
            <view class="searchResultItem">  
              <text style="font-size:14px;">西单大悦城</text>  
            </view>  
          </u-list-item>  
          <u-list-item>  
            <view class="searchResultItem">  
              <text style="font-size:14px;">东单王府井</text>  
            </view>  
          </u-list-item>  
        </u-list>  
      </view>  
    </view>  
    <view class="bottomFrame" :style="'width:'+ screenWidth +'px;height:'+ (safeAreaBottom + 70) +'px'" style="">  
      <view class="bottomFrameBtnItem" style="margin-right:7px;background:blue">  
        <u-icon name="info-circle-fill" color="#fff" size="20" label="开通会员" labelColor="#fff" labelSize="14px"></u-icon>  
        <view style="padding-left:24px">  
          <text style="color:rgba(255,255,255,0.95);font-size:10px;">可查看附近所有用户</text>  
        </view>  
      </view>  
      <view class="bottomFrameBtnItem" style="margin-left:7px;background:red">  
        <u-icon name="info-circle-fill" color="#fff" size="20" label="空降定位" labelColor="#fff" labelSize="14px"></u-icon>  
        <view style="padding-left:24px">  
          <text style="color:rgba(255,255,255,0.95);font-size:10px;">让更多人看到你</text>  
        </view>  
      </view>  
    </view>  
  </view>  
</template>  

<script>  
export default {  
  data() {  
    return {  
      // 屏幕宽度  
      screenWidth: 0,  
      //屏幕高度  
      screenHeight: 0,  
      //底部安全距离  
      safeAreaBottom: 0,  
      //安全高度  
      safeAreaHeight: 0,  
      //搜索关键词  
      keywords: '',  
      //搜索框焦点  
      isFocus: false,  
      //搜索列表  
      searchList: [],  
      //地图组件  
      mapContext: null,  
      center:{  
        latitude: 34.667211,  
        longitude: 112.429275  
      },  
      markers: [{  
        id: 1,  
        latitude: 34.666431,  
        longitude: 112.435146,  
        width: 60,  
        height: 65,  
        iconPath: '/static/bubble.png',  
        img: '/static/test.png',  
        customCallout: {  
          anchorY: 70,  
          anchorX: 0,   
          display: 'ALWAYS'  
        }  
      },{  
        id: 2,  
        latitude: 34.667211,  
        longitude: 112.429275,  
        width: 60,  
        height: 65,  
        iconPath: '/static/bubble.png',  
        img: '/static/test.png',  
        customCallout: {  
          anchorY: 70,  
          anchorX: 0,   
          display: 'ALWAYS'  
        }  
      }]  
    }  
  },onLoad() {  
    //初始化页面数据  
    this.screenWidth = this.$store.getters.screenWidth  
    this.screenHeight = this.$store.getters.screenHeight  
    this.safeAreaBottom = this.$store.getters.safeAreaBottom  
    this.safeAreaHeight = this.$store.getters.safeAreaHeight  
  },onReady() {  
    this.mapContext = uni.createMapContext("myMap", this);  
  },  
  methods: {  
    //退出页面  
    fnCloseWin(){  
      uni.navigateBack()  
    },  
    //点击标记点气泡  
    fnOnCallOutTap(e){  
      console.log(JSON.stringify(e))  
    },  
    //视野发生变化  
    fnRegionchange(e){  
      //获取地图中心点坐标值  
      if(e.type == 'end'){  
        //获取移动后地图中心点坐标  
        this.getCenterLanLat()  
      }  
    },  
    // 获取当前地图中心的经纬度  
    getCenterLanLat() {  
      this.mapContext.getCenterLocation({  
        type: 'gcj02',  
        success: (res) => {  
          let address = {  
            latitude: res.latitude,  
            longitude: res.longitude  
          }  
          console.log(JSON.stringify(address))  
        },fail: (err) => {  
          console.log(err);  
        }  
      })  
    },  
  },  
}  
</script>  

<style>  
/*自定义气泡*/  
.customCallout{width:60px;height:64px;padding:5px;display:flex;flex-direction:column;}  
.customCalloutImg{width:50px;height:50px;border-radius:50%;background:#fff;padding:3px;box-shadow:0 0 5px #ccc;box-sizing:border-box;}  
.customCalloutArrow{width:25px;height:11px;position:absolute;left:0;bottom:0;left:30px;margin-left:-12.5px;}  
.customCalloutCenter{width:40px;height:50px;}  
/*当前定位信息*/  
.locationTip{border-radius:5px;background:#d8e0fd;padding:5px 10px;margin-top:10px;}  
/*搜索结果列表*/  
.searchResult{padding:10px 0;background:rgba(255,255,255,0.95);margin-top:10px;border-radius:5px;}  
.searchResultItem{padding:16px 0;border-bottom:1upx solid #efefef;}  
/*底部按钮*/  
.bottomFrame{padding:0 15px;position:fixed;left:0;bottom:0;z-index:99;display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;}  
.bottomFrameBtnItem{height:60px;padding:0 15px 10px;display:flex;flex-direction:row;align-items:center;flex:1;border-radius:5px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;box-shadow:0 0 5px #bbb;}  
</style>

10 回复

问题已修复，重新提交打包即可


第二个问题已解决，自定义一个icon定位到地图尺寸的中心点即可。主要是第一个IOS端闪退

我也一样，兄弟解决没？

没有 这还是开发前对每个模块评测时发现的问题，元旦前解决不了 就准备改flutter了

我下载hbuilder x 3.8.12 用旧版本打包自定义基座，google map没有闪退了。 请官方看看新版本的问题。

发个bug帖子 也@官方技术员了， 一个星期了都不理你。 这谁还敢用？

我也遇到这个bug了，也是谷歌地图。ios闪退。3.98版本

官方也不回应一下，bug很明显啊。是3.98才有的

第一次签到完成后没问题 然后签退后再进入签到 就闪退了


在 uni-app 中使用 MAP 地图组件时，如果出现闪退问题，可能是由于多种原因引起的。以下是一些常见的原因及解决方法：

1. 未正确配置地图 SDK

  • 原因：在 uni-app 中使用地图组件时，需要正确配置地图 SDK（如高德地图、腾讯地图等）。
  • 解决方法：
    • 确保在 manifest.json 中正确配置了地图 SDK。例如，使用高德地图时，需要配置 appKey。
    {
  "mp-weixin": {
    "appid": "your-appid",
    "setting": {
      "urlCheck": false
    },
    "permission": {
      "scope.userLocation": {
        "desc": "你的位置信息将用于小程序位置接口的效果展示"
      }
    },
    "plugins": {
      "chooseLocation": {
        "version": "1.0.10",
        "provider": "wx76a9a06e5b4e693e"
      }
    }
  }
}
    • 如果使用高德地图，还需要在 manifest.json 中配置 appKey：
    {
  "app-plus": {
    "maps": {
      "amap": {
        "appKey": "your-amap-appkey"
      }
    }
  }
}

2. 未获取用户位置权限

  • 原因：地图组件需要获取用户的位置信息，如果未授权或未正确配置权限，可能会导致闪退。
  • 解决方法：
    • 在 manifest.json 中配置位置权限：
    {
  "mp-weixin": {
    "permission": {
      "scope.userLocation": {
        "desc": "你的位置信息将用于小程序位置接口的效果展示"
      }
    }
  }
}
    • 在代码中动态请求用户授权：
    uni.authorize({
  scope: 'scope.userLocation',
  success() {
    console.log('授权成功');
  },
  fail() {
    console.log('授权失败');
  }
});

3. 地图组件初始化问题

  • 原因：地图组件可能未正确初始化，导致闪退。
  • 解决方法：
    • 确保在 onReady 生命周期中初始化地图组件：
    export default {
  onReady() {
    this.mapContext = uni.createMapContext('myMap', this);
  }
}
    • 检查地图组件的 id 是否唯一且正确。

4. 地图组件渲染问题

  • 原因：地图组件可能在某些情况下渲染失败，导致闪退。
  • 解决方法：
    • 确保地图组件的 style 或 class 正确设置，例如设置宽高：
    <map id="myMap" style="width: 100%; height: 300px;"></map>
    • 避免在地图组件中使用过多的子组件或复杂逻辑。

5. 平台兼容性问题

  • 原因：不同平台（如微信小程序、H5、App）对地图组件的支持可能存在差异。
  • 解决方法：
    • 检查当前平台是否支持地图组件。例如，H5 平台可能需要额外配置。
    • 使用条件编译处理不同平台的逻辑：
    // #ifdef MP-WEIXIN
// 微信小程序逻辑
// #endif

// #ifdef H5
// H5 逻辑
// #endif
回到顶部
AI 助手
你好，我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验！