详细问题描述
（DCloud产品不会有明显的bug，所以你遇到的问题大都是在特定环境下才能重现的问题，请仔细描述你的环境和重现方式，否则DCloud很难排查解决你的问题）
[内容]
重现步骤
- 加载页面
- 把markers 初始化位置
[步骤]
[结果]
无法出现marker数组内的覆盖物 地图上不显示 console.log后ｄａｔａ中 markers内的覆盖物 位置赋值后 输出还是空值
[期望]
调取接口得到 覆盖物位置 动态改变覆盖物位置 能显示在地图上
[如果语言难以表述清晰，拍一个视频或截图，有图有真相]
IDE运行环境说明
[HBuilder 或 HBuilderX。如果你用其他工具开发uni-app，也需要在此说明]
[IDE版本号]
2.2.2.20190816
[windows版本号]
win10
[mac版本号]
uni-app运行环境说明
[运行端是h5或app或某个小程序？]
支付宝小程序
[运行端版本号]
[项目是cli创建的还是HBuilderX创建的？如果是cli创建的，请更新到最新版cli再试]
[编译模式是老模板模式还是新的自定义组件模式？]
自定义组件模式
App运行环境说明
[Android版本号]
android 9.0
[iOS版本号]
[手机型号]
onePlus
[模拟器型号]
附件
[IDE问题请提供HBuilderX运行日志。菜单帮助-查看运行日志，点右键打开文件所在目录，将log文件压缩成zip包上传]
[App问题请提供可重现问题的代码片段，你补充的细一点，问题就解决的快一点]
[App安装包或H5地址]
[可重现代码片段] <template> <view> <map :id="'myMap'" :show-location="true" style="width: 100%; height: 854upx;" :latitude="latitude" scale="14" :longitude="longitude"markers="covers">
</map>
<view class="orderinfo">
<view :key="info.status" class="content" v-if="info.status == 100">
<view class="status">
<view class="status-text">等待司机接单</view>
<image src='../../static/status.png' class="status-img"></image>
</view>
<view class="time">{{timehtml}}</view>
<view class="tips">正在通知附近司机</view>
<view class="btn-wrap">
<view @click="toCancel(info.id)" class="big-btn">
取消订单
</view>
</view>
</view>
<view :key="info.status" class="content mt10" v-if="info.status == 200">
<view class="title" >司机正在赶来</view>
<view class="min" v-show="distance>0&&duration>0">司机距离收货点还有 {{distanceTitle}} 预计 {{durationTitle}}后到达 </view>
</view>
<view :key="info.status" class="content mt10" v-if="info.status == 300">
<view class="title">正在前往目的地</view>
<view class="title min" v-show="distance>0&&duration>0">司机距离目的地还有 {{distanceTitle}} 预计 {{durationTitle}}后到达 </view>
</view>
<view v-if="info.driverId" class="content mt10 ">
<image :src="info.avatar" class="head"></image>
<view class="ordere-info">
<view class="ml80">
<text class="leb">订单车型:</text> <text class="val">{{info.carName}}</text>
</view>
<view class="mt20 ml80">
<text class="leb">司机:</text> <text class="val">{{info.driverName}}</text>
</view>
<view class="mt20 ml80">
<text class="leb">车牌:</text> <text class="val">{{info.carNumber}}</text>
</view>
<view class="btn-content">
<view @click="call(info.driverPhone)" class="btn">
联系司机
</view>
<view @click="toCancel(info.id)" class="btn ml60" v-show="info!=null&&(info.status==100||info.status==200)">
取消订单
</view>
<view @click="tocomplaints(info.id,info.driverId)" class="btn ml500">
投诉司机
</view>
</view>
<view class="mt66">已在线支付</view>
<view class="money">￥{{info.price}}</view>
<view class="mx">价格明细</view>
</view>
</view>
<view class="content mt10 height468">
<view class="order">
<view class="flex1">{{info.createTime}}</view>
</view>
<view class="order">
<view class="flex1">订单号: {{info.orderNumber}}</view>
</view>
<view class="address-wrap">
<view class="key">
<view class="send"></view>
</view>
<view class="val">
{{info.startDetail}}{{info.startContent}}
</view>
<view class="key mt20">
<view class="get"></view>
</view>
<view class="val">
{{info.endDetail}}{{info.endContent}}
</view>
</view>
</view>
<view class="botm">
若产生高速费、停车费和搬运费、需用户按实际支
</view>
<view class="botm">
若涉及逾时等候费,请与司机按<text class="blue">收费标准</text>结算
</view>
<view class="botm">
如有问题,请联系今日速运客服400-965-9119
</view>
</view> </view>
</template>
<script>
import uniCard from "@/components/uni-card/uni-card"
export default {
components: {
uniCard
},
data() {
return {
timehtml: '',
id: '',
map: '',
djs: '',
info: {},
latitude:null,
longitude:null,
covers: [{
id: 1,
latitude: 0,
longitude: 0,
iconPath: '../../static/van.png',
width: 22,
height: 70
}, {
id: 2,
latitude: 0,
longitude:0,
iconPath: '../../static/myps.png',
width: 160,
height: 160
}, {
id: 3,
latitude: 0,
longitude: 0,
iconPath: '../../static/myps.png',
width: 160,
height: 160
}],
distance: 0,
duration: 0,
distanceTitle: null,
durationTitle: null,
}
},
beforeMount() {
this.getInfo(this.id)
},
onLoad(option) {
this.id = option.id
//this.covers[0].iconPath=uni.getStorageSync("avatar");
},
mounted() {
this.djs = setInterval(() => {
this.getCarPos()
this.getInfo(this.id)
}, 10000)
},
onUnload() {
console.log('隐藏了')
clearInterval(this.djs)
},
methods: {
call(phone) {
uni.makePhoneCall({
phoneNumber: ${phone} //仅为示例
});
},
timeago(timestamp) {
let start = timestamp.replace(/-/g, "/")
var leftTime = (new Date().getTime()) - (new Date(start).getTime()); //计算已用的毫秒数
// console.log(leftTime)
var days = parseInt(leftTime / 1000 / 60 / 60 / 24, 10); //计算剩余的天数
var hours = parseInt(leftTime / 1000 / 60 / 60 % 24, 10); //计算剩余的小时
var minutes = parseInt(leftTime / 1000 / 60 % 60, 10); //计算剩余的分钟
var seconds = parseInt(leftTime / 1000 % 60, 10); //计算剩余的秒数
days = this.checkTime(days);
hours = this.checkTime(hours);
minutes = this.checkTime(minutes);
seconds = this.checkTime(seconds);
var timehtml = ''
if (days == '00') {
timehtml = hours + "小时:" + minutes + "分钟:" + seconds + "秒";
}
if (days == '00' && hours == '00') {
timehtml = minutes + "分钟:" + seconds + "秒";
}
if (days == '00' && hours == '00' && seconds == '00') {
timehtml = seconds + "秒";
}
return timehtml;
},
checkTime(i) {
//将0-9的数字前面加上0，例1变为01
if (i < 10) {
i = "0" + i;
}
return i;
},
getpos() {
if (this.info.status === 200) {
let {
lat,
lon
} = this.info
if(this.covers[0].longitude!=null&&this.covers[0].longitude>0){
this.covers[0].longitude = Number(lon)
this.covers[0].latitude = Number(lat)
}
this.map.translateMarker({
markerId: 1,
autoRotate: false,
rotate: 0,
destination: {
latitude: Number(lat),
longitude: Number(lon),
}
})
} else if (this.info.status === 300) {
let {
lat,
lon
} = this.info
if(this.covers[0].longitude!=null&&this.covers[0].longitude>0){
this.covers[0].longitude = Number(lon)
this.covers[0].latitude = Number(lat)
}
this.map.translateMarker({
markerId:1,
autoRotate: false,
rotate: 0,
destination: {
latitude: Number(lat),
longitude: Number(lon),
}
})
}
},
getCarPos() {
if (!this.info.driverId) return
this.$http.get('/api/user/getUserLocation', {
id: this.info.driverId
}).then(({
data
}) => {
if (this.latitude && this.longitude) {
let {
latitude,
longitude
} = data
let lat=0;
let lon=0;
if(this.info.status == 300){
lat=this.info.latEnd;
lon=this.info.lonEnd;
}
if (this.info.status == 200) {
lat = this.info.lat;
lon = this.info.lon;
}
if(this.covers[0].longitude==0&&this.covers[0].latitude==0){
this.covers[0].longitude = Number(longitude)
this.covers[0].latitude = Number(latitude)
}else{
this.map.translateMarker({
markerId:1,
autoRotate: false,
rotate: 0,
destination: {
latitude: Number(latitude),
longitude: Number(longitude),
}
})
}
this.$http.get('/api/order/distance', {
start: longitude + "," + latitude,
end: lon + "," + lat
}).then(({
data
}) => {
let {
distance,
duration
} = data;
this.distance = distance;
this.duration = duration;
if (distance >= 1000) {
this.distanceTitle = (distance / 1000) + " 公里";
} else {
this.distanceTitle = distance + " 米";
}
this.durationTitle = (duration / 60) + " 分";
})
}
})
},
getInfo(id) {
let than=this;
this.$http.get(`/api/order/info/${id}`).then(({
data
}) => {
console.log(data)
than.info = data
if((than.latitude==null&&than.longitude==null)||(than.latitude==''&&than.longitude=='')){
than.latitude = Number(than.info.lat)
than.longitude = Number(than.info.lon)
for(let i=0;i<than.covers.length;i++){
let obj=than.covers[i];
if(obj.id==2){
than.covers[i].longitude = Number(data.lon)
than.covers[i].latitude = Number(data.lat)
}else if(obj.id==3){
than.covers[i].longitude = Number(data.lonEnd)
than.covers[i].latitude = Number(data.latEnd)
}
}
console.log(than.covers);
than.map = uni.createMapContext('myMap', than)
}
console.log(than.latitude+" "+than.longitude);
than.getCarPos()
let djs = ''
//this.getpos()
if (than.info.status == 100) {
djs = setInterval(() => {
than.timehtml = than.timeago(than.info.createTime)
}, 1000)
} else {
clearInterval(djs)
}
})
},
tocomplaints(id,driverId) {
clearInterval(this.djs)
uni.navigateTo({
url: `/pages/complaints/index?id=${id}&driverId=${driverId}`
})
},
toCancel(id) {
clearInterval(this.djs)
uni.navigateTo({
url: `/pages/cancel/index?id=${id}`
})
}
}, }
</script>
<style src="./index.scss" lang="scss">
</style>
联系方式
[QQ]121203654
0 个回复