uni-app 在钉钉小程序中地图组件的mark在ios端不显示,安卓端正常

uni-app 在钉钉小程序中地图组件的mark在ios端不显示,安卓端正常

产品分类:

uniapp/小程序/阿里

PC开发环境操作系统:

Windows

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

11111111

HBuilderX类型:

正式

HBuilderX版本号:

4.13

第三方开发者工具版本号:

11111

基础库版本号:

11111

项目创建方式:

HBuilderX

示例代码:

<map id="map" :latitude="latitude" :longitude="longitude" :scale="scale" :markers="markers"
@markertap="tapMap" show-location style="width: 100%;height: 100%;">
</map>

操作步骤:

<template>
<view class="main">
<view class="M_box">
<view class="map">
<map id="map" :latitude="latitude" :longitude="longitude" :scale="scale" :markers="markers"
@markertap="tapMap" show-location style="width: 100%;height: 100%;">
</map>
</view>
<view class="Scan">
<view class="box1">
<image src="../../static/img/Inspection.png">
</image>
<view style="margin-top: 0.1rem;">
点击扫码打卡
</view>
</view>
<view class="box2">
<image src="../../static/img/scan.png" @click="handleScan">
</image>
<view style="margin-top: 0.1rem;">
请在9:00前扫码巡检
</view>  
</view>
<view class="box3" @click="toDetail">  
今日事项:共有2件代办业务 >
</view>  
</view>  
</view>  
</view>
</template>

<script>
const img = 'https://huanjing.t.hzseek.cn/images/mark_bs.png';
export default {
data() {
return {
latitude: '',
longitude: '',
scale: 14,
markers: [{
id: 0,
latitude: 30.060753,
longitude: 120.51265,
markerLevel: 999,
width: 19,
height: 31,
iconPath: img,
callout: {
content: '打卡点一',
},
},
{
id: 1,
latitude: 30.070114,
longitude: 120.508456,
width: 19,
height: 31,
iconPath: img,
callout: {
content: '打卡点二',
},
},
{
id: 2,
latitude: 30.073362,
longitude: 120.5217,
width: 19,
height: 31,
iconPath: img,
callout: {
content: '打卡点三',
},
},
{
id: 3,
latitude: 30.064957,
longitude: 120.494329,
width: 19,
height: 31,
iconPath: img,
callout: {
content: '打卡点四',
},
},
],
show: false,
_mapContext: '',
}
},
onReady() {
this.demoMarkerLabel()
uni.getLocation({
type: 'wgs84',
success: (res) => {
this.longitude = res.longitude
this.latitude = res.latitude
}
});
},
methods: {
tapMap(e) {
uni.showModal({
title: '提示',
content: '确认导航到巡查点',
confirmText: '确定',
cancelText: '取消',
success: function(res) {
if (res.confirm) {
uni.getLocation({
success: res => {
uni.openLocation({
latitude: parseFloat(e.latitude),
longitude: parseFloat(e.longitude),
name: '巡检地址', //地址名称
address: '巡检一', //详细地址名称
scale: 18
})
}
})
} else if (res.cancel) {
return;
}
}
})
},
handleScan() {
uni.scanCode({
scanType: ["qrCode"],
success: async (res) => {
try {
uni.navigateTo({
url: '/pages/Inspection/taskDetails'
})
} catch (e) {
uni.$u.toast('请扫描有效的二维码')
} finally {}
},
fail: (res) => {
uni.$u.toast('未识别到二维码')
}
}),
toDetail() {
uni.navigateTo({
url: '/pages/Inspection/equipment'
})
}
}
}
}
</script>

<style lang="scss">
page {
background-color: #F2F2F4;
}

.M_box {
background: #FFFFFF;
height: 100vh;
border-radius: 0.2rem;

.map {
height: 55%;
width: 100%;
}

.Scan {
height: 45%;
}

.box1 {
display: flex;
flex-direction: column;
color: #6D893E;
padding-top: 10rpx;
font-size: 40rpx;
align-items: center;
justify-content: center;
font-weight: 500;

image {
width: 0.8rem;
height: 0.8rem;
}
}

.box2 {
display: flex;
flex-direction: column;
color: #898989;
align-items: center;
justify-content: center;
margin-top: 0.2rem;

image {
width: 2.7rem;
height: 2.7rem;
}
}

.box3 {
color: #898989;
margin-top: 0.25rem;
text-align: center;
}
}
</style>

预期结果:

在钉钉小程序页面ios端应该显示mark,同安卓端一样

实际结果:

钉钉小程序页面ios端应该不显示mark,安卓端显示mark,一切正常

bug描述:

uniapp 运行在钉钉小程序,地图组件中的mark,ios端不显示,安卓端正常


更多关于uni-app 在钉钉小程序中地图组件的mark在ios端不显示,安卓端正常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

目前在模拟器上测试正常,初步排查应该是钉钉小程序的官方bug,建议先用钉钉小程序原生代码设置一下marker看看是否会复现

更多关于uni-app 在钉钉小程序中地图组件的mark在ios端不显示,安卓端正常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


uni-app 中,钉钉小程序的地图组件 mark 在 iOS 端不显示,而安卓端正常,可能是由于以下原因之一:

1. iOS 端和安卓端的差异

  • iOS 和安卓系统的底层实现不同,可能会导致某些功能在 iOS 上表现不一致。特别是地图组件,可能会受到系统版本、渲染机制等因素的影响。

2. 地图组件的兼容性问题

  • 钉钉小程序的地图组件可能存在 iOS 端的兼容性问题。可以检查钉钉小程序的官方文档,查看是否有相关的已知问题或更新提示。

3. markers 配置问题

  • 确保 markers 的配置是正确的。iOS 端可能对某些配置项的要求更加严格。例如:

    • id 必须唯一。
    • latitudelongitude 必须是有效的经纬度。
    • iconPath 的路径必须是正确的。

    示例:

    markers: [
      {
        id: 1,
        latitude: 39.908823,
        longitude: 116.397470,
        iconPath: '/static/marker.png',
        width: 30,
        height: 30
      }
    ]
回到顶部