<map id="map" :latitude="latitude" :longitude="longitude" :scale="scale" :markers="markers"
@markertap="tapMap" show-location style="width: 100%;height: 100%;">
</map>
- 发布:2024-04-25 14:26
- 更新:2024-04-29 20:25
- 阅读:23
产品分类: uniapp/小程序/阿里
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: 11111111
HBuilderX类型: 正式
HBuilderX版本号: 4.13
第三方开发者工具版本号: 11111
基础库版本号: 11111
项目创建方式: HBuilderX
示例代码:
操作步骤:
<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
// this.longitude = 120.494329
// this.latitude = 30.064957
}
});
},
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;
// margin: 0.35rem;
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>
<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
// this.longitude = 120.494329
// this.latitude = 30.064957
}
});
},
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;
// margin: 0.35rem;
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,同安卓端一样
实际结果:
钉钉小程序页面ios端应该不显示mark,安卓端显示mark,一切正常
钉钉小程序页面ios端应该不显示mark,安卓端显示mark,一切正常
bug描述:
uniapp 运行在钉钉小程序,地图组件中的mark,ios端不显示,安卓端正常
1 个回复
DCloud_UNI_HRK
目前在模拟器上测试正常,初步排查应该是钉钉小程序的官方bug,建议先用钉钉小程序原生代码设置一下marker看看是否会复现