在APP中打开NVUE页面 直接复现
- 发布:2023-11-15 16:55
- 更新:2024-01-09 18:06
- 阅读:578
产品分类: uniapp/App
PC开发环境操作系统: Mac
PC开发环境操作系统版本号: 13.0.1
HBuilderX类型: 正式
HBuilderX版本号: 3.96
手机系统: iOS
手机系统版本号: iOS 16
手机厂商: 苹果
手机机型: 14pro
页面类型: nvue
vue版本: vue2
打包方式: 云端
项目创建方式: HBuilderX
操作步骤:
预期结果:
不闪退
不闪退
实际结果:
闪退
闪退
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>
7 个回复
最佳回复
DCloud_iOS_XHY
问题已修复,重新提交打包即可
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
我也遇到这个bug了,也是谷歌地图。ios闪退。3.98版本
青木物联
官方也不回应一下,bug很明显啊。是3.98才有的
5***@qq.com
第一次签到完成后没问题 然后签退后再进入签到 就闪退了