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必须唯一。latitude和longitude必须是有效的经纬度。iconPath的路径必须是正确的。
示例:
markers: [ { id: 1, latitude: 39.908823, longitude: 116.397470, iconPath: '/static/marker.png', width: 30, height: 30 } ]

