KeithTsui
KeithTsui
  • 发布:2023-11-15 16:55
  • 更新:2024-01-09 18:06
  • 阅读:578

【报Bug】MAP地图组件闪退

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: 13.0.1

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>
2023-11-15 16:55 负责人:DCloud_iOS_XHY 分享
已邀请:

最佳回复

DCloud_iOS_XHY

DCloud_iOS_XHY

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

KeithTsui

KeithTsui (作者)

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

青木物联

青木物联

我也一样,兄弟解决没?

  • KeithTsui (作者)

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

    2023-11-24 17:09

青木物联

青木物联

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

  • KeithTsui (作者)

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

    2023-11-24 17:18

y***@163.com

y***@163.com

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

青木物联

青木物联

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

5***@qq.com

5***@qq.com

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

要回复问题请先登录注册