暂时提交三轮车游走,定位问题

This commit is contained in:
weipengfei 2023-09-20 20:09:43 +08:00
parent 53e6582892
commit 66d6ba723e
4 changed files with 429 additions and 342 deletions

12
App.vue
View File

@ -21,11 +21,15 @@
// uni.showModal({ // uni.showModal({
// content: info.referrerInfo.extraData // content: info.referrerInfo.extraData
// }) // })
if (info.referrerInfo?.extraData?.uniMP) { if (info.referrerInfo?.extraData?.uniMP) {
//宿App
uni.onHostEventReceive((event, data) => {
if(event=='getLocation') uni.$emit('uniMP_getLocation', data);
});
uni.setStorageSync('uniMP', info.referrerInfo?.extraData?.uniMP); uni.setStorageSync('uniMP', info.referrerInfo?.extraData?.uniMP);
uni.setStorageSync('APP_token', info.referrerInfo?.extraData?.token); uni.setStorageSync('APP_token', info.referrerInfo?.extraData?.token);
try{ try {
let res = await loginShopAccount({ let res = await loginShopAccount({
shop_token: info.referrerInfo?.extraData?.token shop_token: info.referrerInfo?.extraData?.token
}); });
@ -40,8 +44,8 @@
this.$store.commit('setUserInfo', data); this.$store.commit('setUserInfo', data);
this.$isResolve() this.$isResolve()
// uni.$emit('home_initUserInfo', data); // uni.$emit('home_initUserInfo', data);
return ; return;
}catch(e){ } catch (e) {
this.$isResolve() this.$isResolve()
console.log(e); console.log(e);
} }

View File

@ -25,7 +25,8 @@
"Barcode" : {}, "Barcode" : {},
"Camera" : {}, "Camera" : {},
"Maps" : {}, "Maps" : {},
"VideoPlayer" : {} "VideoPlayer" : {},
"Geolocation" : {}
}, },
/* */ /* */
"distribute" : { "distribute" : {
@ -70,8 +71,17 @@
"maps" : { "maps" : {
"amap" : { "amap" : {
// "appkey_ios" : "0799f37420c0784f1e6cba230a68bdb1", // "appkey_ios" : "0799f37420c0784f1e6cba230a68bdb1",
// "appkey_android" : "0799f37420c0784f1e6cba230a68bdb1" // "appkey_android" : "0799f37420c0784f1e6cba230a68bdb1",
"appkey_ios" : "048d9f3f323eea894b49c3a7edbc8d87", "appkey_ios" : "82af93ec51139c712c4118d84ba684ee",
"appkey_android" : "048d9f3f323eea894b49c3a7edbc8d87"
// "appkey_ios" : "4f8f55618010007147aab96fc72bb408",
// "appkey_android" : "4f8f55618010007147aab96fc72bb408"
}
},
"geolocation" : {
"amap" : {
"__platform__" : [ "ios", "android" ],
"appkey_ios" : "82af93ec51139c712c4118d84ba684ee",
"appkey_android" : "048d9f3f323eea894b49c3a7edbc8d87" "appkey_android" : "048d9f3f323eea894b49c3a7edbc8d87"
} }
} }

View File

@ -580,6 +580,12 @@ export default {
}, },
}, },
async onPullDownRefresh () { async onPullDownRefresh () {
uni.sendHostEvent('test', '测试', (ret) => {
// uni.showModal({
// title:'',
// content:JSON.stringify(ret)
// })
});
await this.getOrderList(); await this.getOrderList();
await this.$store.dispatch('initConfig'); await this.$store.dispatch('initConfig');
await this.getApproveList(); await this.getApproveList();

View File

@ -1,63 +1,67 @@
<template> <template>
<view> <view>
<!-- <view v-if='showLoading'> <!-- <view v-if='showLoading'>
<u-loading-page :loading="showLoading"></u-loading-page> <u-loading-page :loading="showLoading"></u-loading-page>
</view> --> </view> -->
<view> <view>
<view class="content"> <view class="content">
<u-toast ref="uToast"></u-toast> <u-toast ref="uToast"></u-toast>
<view class="map" style="position: relative;"> <view class="map" style="position: relative;">
<map :class="mapClass" id="map" @markertap='mapFun' :enable-zoom="true" :polyline="polyline" <map :class="mapClass" id="map" @markertap='mapFun' :enable-zoom="true" :polyline="polyline"
:markers='markers' :scale="scale" style="width:100%;height: 100%;" :markers='markers' :scale="scale" style="width:100%;height: 100%;" :latitude="markers[0].latitude"
:latitude="markers[0].latitude" :enable-scroll="true" :longitude="markers[0].longitude"> :enable-scroll="true" :longitude="markers[0].longitude">
</map> </map>
<!-- <cover-view v-show="modelShow" style="background-color: rgba(#000, 0.9);height: 100px;width: 100px;position: absolute;top: 0;left: 0;"></cover-view> --> <!-- <cover-view v-show="modelShow" style="background-color: rgba(#000, 0.9);height: 100px;width: 100px;position: absolute;top: 0;left: 0;"></cover-view> -->
</view> </view>
<view class="map_address"> <view class="map_address">
<view class="li"> <view class="li">
<view style="display: flex;justify-content: left;"> <view style="display: flex;justify-content: left;">
<view style="flex-shrink: 0;margin-right: 14rpx;"> <view style="flex-shrink: 0;margin-right: 14rpx;">
<text class="cir" style="background-color: #40BC5E;"></text> <text class="cir" style="background-color: #40BC5E;"></text>
中转站: 中转站:
</view> </view>
<view v-if="address.transfer">{{address.transfer.address}}</view> <view v-if="address.transfer">{{address.transfer.address}}</view>
</view>
<view v-if="status!=5||address.transfer.status==2" :class="{lg_status1:address.transfer.status==2,lg_status2:address.transfer.status==1}" style="margin-top: 10rpx;">
<text class="cir" style="background-color: transparent;"></text>
<text>车辆状态</text>
<text v-if="address.transfer.status==2">已完成</text>
<text v-else style="color: #FF7C32;">进行中</text>
</view>
<view v-else class="red" style="margin-top: 10rpx;">
<text class="cir" style="background-color: transparent;"></text>
<text>车辆状态</text>
<text>未完成</text>
</view> </view>
</view> <view v-if="status!=5||address.transfer.status==2"
<view class="li"> :class="{lg_status1:address.transfer.status==2,lg_status2:address.transfer.status==1}"
<view style="display: flex;justify-content: left;"> style="margin-top: 10rpx;">
<view style="flex-shrink: 0;margin-right: 14rpx;"> <text class="cir" style="background-color: transparent;"></text>
<text class="cir" style="background-color: #40BC5E;"></text> <text>车辆状态</text>
&emsp;: <text v-if="address.transfer.status==2">已完成</text>
</view> <text v-else style="color: #FF7C32;">进行中</text>
<view v-if="address.terminus">{{address.terminus.address}}</view> </view>
</view> <view v-else class="red" style="margin-top: 10rpx;">
<view :class="{red: address.terminus.status!=2&&address.transfer.status==1,yellow:address.transfer.status!=1&&address.terminus.status!=2, green: address.terminus.status==2}" style="margin-top: 10rpx;"> <text class="cir" style="background-color: transparent;"></text>
<text class="cir" style="background-color: transparent;"></text> <text>车辆状态</text>
<text :class="{red: status==5}">车辆状态</text> <text>未完成</text>
</view>
</view>
<view class="li">
<view style="display: flex;justify-content: left;">
<view style="flex-shrink: 0;margin-right: 14rpx;">
<text class="cir" style="background-color: #40BC5E;"></text>
&emsp;:
</view>
<view v-if="address.terminus">{{address.terminus.address}}</view>
</view>
<view
:class="{red: address.terminus.status!=2&&address.transfer.status==1,yellow:address.transfer.status!=1&&address.terminus.status!=2, green: address.terminus.status==2}"
style="margin-top: 10rpx;">
<text class="cir" style="background-color: transparent;"></text>
<text :class="{red: status==5}">车辆状态</text>
<text v-if="address.terminus.status==2">已完成</text> <text v-if="address.terminus.status==2">已完成</text>
<text v-else-if="address.transfer.status==1">未开始</text> <text v-else-if="address.transfer.status==1">未开始</text>
<text v-else-if="status!=5">进行中</text> <text v-else-if="status!=5">进行中</text>
<text v-else :class="{red: status==5}">未完成</text> <text v-else :class="{red: status==5}">未完成</text>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<mybtn v-if="status==1" @click="modelShow=true" text="抵达地点(中转站) 1/2"></mybtn> <mybtn v-if="status==1" @click="modelShow=true" text="抵达地点(中转站) 1/2"></mybtn>
<mybtn v-else-if="status==2" @click="modelShow=true" text="抵达地点(终点) 2/2"></mybtn> <mybtn v-else-if="status==2" @click="modelShow=true" text="抵达地点(终点) 2/2"></mybtn>
<mybtn v-else-if="status==3" text="任务已完成" my_btn_disabled></mybtn> <mybtn v-else-if="status==3" text="任务已完成" my_btn_disabled></mybtn>
<mybtn v-else-if="status==5" text="任务已关闭" my_btn_disabled></mybtn> <mybtn v-else-if="status==5" text="任务已关闭" my_btn_disabled></mybtn>
<cover-view v-show="modelShow" class="cover"> <cover-view v-show="modelShow" class="cover">
<cover-view class="cover_model"> <cover-view class="cover_model">
<cover-view class="model_title">标题</cover-view> <cover-view class="model_title">标题</cover-view>
@ -74,266 +78,320 @@
</cover-view> </cover-view>
<!-- <u-modal :show="modelShow" title="提示" content='确认您已到达目标地点' closeOnClickOverlay showCancelButton <!-- <u-modal :show="modelShow" title="提示" content='确认您已到达目标地点' closeOnClickOverlay showCancelButton
@close="modelShow=false" @cancel="modelShow=false" @confirm="getFn();modelShow=false"></u-modal> --> @close="modelShow=false" @cancel="modelShow=false" @confirm="getFn();modelShow=false"></u-modal> -->
</view> </view>
</template> </template>
<script> <script>
import mybtn from "@/components/mybtn/mybtn.vue" import mybtn from "@/components/mybtn/mybtn.vue"
import { import {
taskTricycleDetail, taskTricycleDetail,
taskAddTricycleCoordinate taskAddTricycleCoordinate
} from "@/api/task.js" } from "@/api/task.js"
import { import {
Toast Toast
} from "../../libs/uniApi"; } from "../../libs/uniApi";
export default { export default {
components: { components: {
mybtn mybtn
}, },
data() { data() {
return { return {
modelShow: false, modelShow: false,
status: 1, status: 1,
mapClass: 'custom-map', mapClass: 'custom-map',
showLoading: true, showLoading: true,
showPop: false, showPop: false,
goodsDetil: undefined, goodsDetil: undefined,
scale: 17, scale: 17,
nowAddress: "无", nowAddress: "无",
markers: [ markers: [
// //
{ {
id: 1, id: 1,
latitude: 28.8733, latitude: 28.8733,
longitude: 105.445717, longitude: 105.445717,
iconPath: '../../static/img/logistics/WZ.png', // iconPath: '../../static/img/logistics/WZ.png', //
}, },
// //
{ {
id: 2, id: 2,
latitude: undefined, latitude: undefined,
longitude: undefined, longitude: undefined,
iconPath: '../../static/img/logistics/SL.png', // iconPath: '../../static/img/logistics/SL.png', //
} }
], ],
polyline: [], polyline: [],
task_id: -1, task_id: -1,
address: { address: {
transfer: { transfer: {
status: 1 status: 1
}, },
terminus: { terminus: {
status: 1 status: 1
} }
} }
} }
}, },
onLoad(options) { onLoad(options) {
this.task_id = options.task_id; this.task_id = options.task_id;
this.locationFn(); this.locationFn();
this.initPosition(); this.initPosition();
}, },
methods: { methods: {
// //
async initPosition() { async initPosition() {
let res = await taskTricycleDetail({ let res = await taskTricycleDetail({
id: this.task_id id: this.task_id
}); });
this.address = res.data.extend; this.address = res.data.extend;
if (res.data.extend?.update?.transfer?.lnglat[0]) { //, if (res.data.extend?.update?.transfer?.lnglat[0]) { //,
this.markers[0].latitude = +res.data.extend.terminus.lnglat[1]; this.markers[0].latitude = +res.data.extend.terminus.lnglat[1];
this.markers[0].longitude = +res.data.extend.terminus.lnglat[0]; this.markers[0].longitude = +res.data.extend.terminus.lnglat[0];
this.status = 2; this.status = 2;
this.address.transfer['status'] = 2; this.address.transfer['status'] = 2;
} else { // , } else { // ,
this.markers[0].latitude = +res.data.extend.transfer.lnglat[1]; this.markers[0].latitude = +res.data.extend.transfer.lnglat[1];
this.markers[0].longitude = +res.data.extend.transfer.lnglat[0]; this.markers[0].longitude = +res.data.extend.transfer.lnglat[0];
this.address.transfer['status'] = 1; this.address.transfer['status'] = 1;
} }
if (res.data.extend?.update?.terminus?.lnglat[0]||res.data.status==3) { if (res.data.extend?.update?.terminus?.lnglat[0] || res.data.status == 3) {
this.address.terminus['status'] = 2; this.address.terminus['status'] = 2;
this.status = 3; this.status = 3;
} else this.address.terminus['status'] = 1; } else this.address.terminus['status'] = 1;
if(res.data.status==5){ if (res.data.status == 5) {
this.status = 5; this.status = 5;
} }
}, },
// //
locationFn() { locationFn() {
let that = this; let that = this;
uni.getLocation({ // uni.showLoading({
type: 'gcj02', // title: ''
geocode: true, // })
isHighAccuracy: true, uni.getLocation({
success: function async (res) { type: 'gcj02',
that.markers[1].latitude = res.latitude; geocode: true,
that.markers[1].longitude = res.longitude; isHighAccuracy: true,
that.getDriverLine(); success: function async (res) {
that.$u.sleep(500).then(()=>{ that.markers[1].latitude = res.latitude;
uni.hideLoading(); that.markers[1].longitude = res.longitude;
}) that.getDriverLine();
}, // uni.hideLoading();
fail() { uni.showModal({
that.$u.sleep(1000).then(()=>{ title: '成功',
uni.hideLoading(); content: JSON.stringify(res)
Toast('获取位置失败');
}) })
},
fail(e) {
// uni.hideLoading();
Toast('获取位置失败');
console.log(e);
// uni.showModal({
// title: '',
// content: JSON.stringify(e)
// })
try {
plus.geolocation.getCurrentPosition(function(position) {
console.log('经度:' + position.coords.longitude);
console.log('纬度:' + position.coords.latitude);
that.markers[1].latitude = position.coords.longitude;
that.markers[1].longitude = position.coords.longitude;
that.getDriverLine();
uni.hideLoading();
uni.showModal({
title: 'plus成功',
content: JSON.parse(position)
})
}, function(error) {
console.error('获取位置失败:', error.message);
uni.showModal({
title: 'plus失败',
content: JSON.parse(error)
})
uni.sendHostEvent('getLocation', '获取位置', (ret) => {
uni.$on('uniMP_getLocation', (res) => {
try {
that.markers[1].latitude = res.latitude;
that.markers[1].longitude = res.longitude;
that.getDriverLine();
uni.hideLoading();
uni.showModal({
title: 'uniMP成功',
content: JSON.parse(res)
})
} catch (e) {
Toast('获取位置失败');
uni.showModal({
title: 'uniMP失败',
content: JSON.parse(e)
})
}
})
});
});
} catch (e) {
uni.showModal({
title: '没有plus',
content: JSON.parse(e)
})
}
} }
}); });
},
showToast() {
this.$refs.uToast.show({ },
type: 'success', showToast() {
title: '成功主题(带图标)', this.$refs.uToast.show({
message: "操作成功", type: 'success',
iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png' title: '成功主题(带图标)',
}) message: "操作成功",
}, iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
mapFun() { })
uni.openLocation({ },
latitude: Number(this.goodsDetil.logistics.shop_lat), mapFun() {
longitude: Number(this.goodsDetil.logistics.shop_long), uni.openLocation({
address: this.goodsDetil.logistics.shop_address, latitude: Number(this.goodsDetil.logistics.shop_lat),
name: this.goodsDetil.logistics.shop_name, longitude: Number(this.goodsDetil.logistics.shop_long),
scale: 15, address: this.goodsDetil.logistics.shop_address,
}); name: this.goodsDetil.logistics.shop_name,
}, scale: 15,
showToast() { });
this.$refs.uToast.show({ },
type: 'success', showToast() {
title: '成功主题(带图标)', this.$refs.uToast.show({
message: "操作成功", type: 'success',
iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png' title: '成功主题(带图标)',
}) message: "操作成功",
}, iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
// })
getDistance(point1, point2) { },
const rad = Math.PI / 180.0; //
const lat1 = point1.latitude; getDistance(point1, point2) {
const lng1 = point1.longitude; const rad = Math.PI / 180.0;
const lat2 = point2.latitude; const lat1 = point1.latitude;
const lng2 = point2.longitude; const lng1 = point1.longitude;
const dlat = lat2 - lat1; const lat2 = point2.latitude;
const dlng = lng2 - lng1; const lng2 = point2.longitude;
const a = const dlat = lat2 - lat1;
Math.sin(dlat / 2 * rad) * Math.sin(dlat / 2 * rad) + const dlng = lng2 - lng1;
Math.cos(lat1 * rad) * Math.cos(lat2 * rad) * const a =
Math.sin(dlng / 2 * rad) * Math.sin(dlng / 2 * rad); Math.sin(dlat / 2 * rad) * Math.sin(dlat / 2 * rad) +
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); Math.cos(lat1 * rad) * Math.cos(lat2 * rad) *
const distance = 6378137 * c; Math.sin(dlng / 2 * rad) * Math.sin(dlng / 2 * rad);
return distance; const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
}, const distance = 6378137 * c;
// return distance;
getFn() { },
uni.showLoading({ //
title: '上传中', getFn() {
mask: true uni.showLoading({
}) title: '上传中',
this.locationFn() mask: true
// console.log(this.getDistance(this.markers[0], this.markers[1])) })
if ((this.getDistance(this.markers[0], this.markers[1]) >> 0) > 10000) { this.locationFn()
return Toast('距离目标位置过远'); // console.log(this.getDistance(this.markers[0], this.markers[1]))
} else { if ((this.getDistance(this.markers[0], this.markers[1]) >> 0) > 10000) {
let data; return Toast('距离目标位置过远');
if (this.status == 1) data = { } else {
id: this.task_id, let data;
transfer: { if (this.status == 1) data = {
lnglat: [ id: this.task_id,
this.markers[1].longitude, transfer: {
this.markers[1].latitude lnglat: [
] this.markers[1].longitude,
} this.markers[1].latitude
}; ]
else data = { }
id: this.task_id, };
terminus: { else data = {
lnglat: [ id: this.task_id,
this.markers[1].longitude, terminus: {
this.markers[1].latitude lnglat: [
] this.markers[1].longitude,
} this.markers[1].latitude
}; ]
taskAddTricycleCoordinate(data).then(() => { }
uni.hideLoading() };
Toast('上传成功!') taskAddTricycleCoordinate(data).then(() => {
this.initPosition(); uni.hideLoading()
this.locationFn(); Toast('上传成功!')
}) this.initPosition();
} this.locationFn();
}, })
getDriverLine() { }
const that = this; },
const key = "997c9a3d88154fa78f4d28bebc1dd84f"; getDriverLine() {
const origin = `${this.markers[1].longitude},${this.markers[1].latitude}`; const that = this;
const destination = `${this.markers[0].longitude},${this.markers[0].latitude}`; const key = "997c9a3d88154fa78f4d28bebc1dd84f";
uni.request({ const origin = `${this.markers[1].longitude},${this.markers[1].latitude}`;
// url: `https://restapi.amap.com/v3/direction/walking?key=${key}&origin=105.43639400000002,28.908854&destination=105.439304,28.908447`, const destination = `${this.markers[0].longitude},${this.markers[0].latitude}`;
url: `https:restapi.amap.com/v4/direction/bicycling?key=${key}&origin=${origin}&destination=${destination}`, uni.request({
success: (res) => { // url: `https://restapi.amap.com/v3/direction/walking?key=${key}&origin=105.43639400000002,28.908854&destination=105.439304,28.908447`,
const data = res.data.data; url: `https:restapi.amap.com/v4/direction/bicycling?key=${key}&origin=${origin}&destination=${destination}`,
var points = []; success: (res) => {
if (data.paths && data.paths[0] && data.paths[0].steps) { const data = res.data.data;
var steps = data.paths[0].steps; var points = [];
for (var i = 0; i < steps.length; i++) { if (data.paths && data.paths[0] && data.paths[0].steps) {
//points var steps = data.paths[0].steps;
var poLen = steps[i].polyline.split(";"); for (var i = 0; i < steps.length; i++) {
for (var j = 0; j < poLen.length; j++) { //points
points.push({ var poLen = steps[i].polyline.split(";");
longitude: parseFloat(poLen[j].split(",")[0]), for (var j = 0; j < poLen.length; j++) {
latitude: parseFloat(poLen[j].split(",")[1]), points.push({
}); longitude: parseFloat(poLen[j].split(",")[0]),
} latitude: parseFloat(poLen[j].split(",")[1]),
} });
that.runningRoute = data.paths[0].steps[0].instruction; }
} }
that.runningRoute = data.paths[0].steps[0].instruction;
}
uni.getSystemInfo({ uni.getSystemInfo({
success: function(e){ success: function(e) {
if (e.platform == 'ios') { if (e.platform == 'ios') {
that.polyline = [{ that.polyline = [{
points: points, points: points,
color: "#0091ff", color: "#0091ff",
dottedLine: true, dottedLine: true,
width: 10, width: 10,
}, ]; }, ];
} } else {
else {
that.polyline = [{ that.polyline = [{
points: points, points: points,
color: "#0091ff", color: "#0091ff",
dottedLine: true, dottedLine: true,
width: 15, width: 15,
}, ]; }, ];
} }
} }
}) })
},
fail: function(res) {
console.log("获取路线失败", res);
},
});
},
}, },
onPullDownRefresh() { fail: function(res) {
// this.getOrderList(); console.log("获取路线失败", res);
// this.getIndexList() },
uni.stopPullDownRefresh(); });
}, },
} },
onPullDownRefresh() {
// this.getOrderList();
// this.getIndexList()
uni.stopPullDownRefresh();
},
}
</script> </script>
<style lang='scss' scoped> <style lang='scss' scoped>
.cover{ .cover {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background-color: rgba(#000, 0.3); background-color: rgba(#000, 0.3);
.cover_model{ .cover_model {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
@ -345,93 +403,102 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
.model_title{
.model_title {
height: 92rpx; height: 92rpx;
line-height: 92rpx; line-height: 92rpx;
text-align: center; text-align: center;
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
} }
.model_content{
.model_content {
margin: 12px 25px 25px 25px; margin: 12px 25px 25px 25px;
font-size: 15px; font-size: 15px;
} }
.model_btn{
.model_btn {
display: flex; display: flex;
height: 96rpx; height: 96rpx;
font-size: 16px; font-size: 16px;
.item{
.item {
flex: 1; flex: 1;
text-align: center; text-align: center;
line-height: 96rpx; line-height: 96rpx;
} }
.model_confirm{
.model_confirm {
color: #0122c7; color: #0122c7;
} }
} }
} }
} }
.red{
.red {
color: #ff0000; color: #ff0000;
} }
.green{
.green {
color: #40bc5e; color: #40bc5e;
} }
.yellow{
.yellow {
color: #ff7c32; color: #ff7c32;
} }
.custom-map /deep/ .polyline {
stroke-width: 20px;
}
.content { .custom-map /deep/ .polyline {
padding: 2vh 3vw; stroke-width: 20px;
background-color: #F5F5F5; }
height: 100vh;
box-sizing: border-box;
}
.map { .content {
height: 60vh; padding: 2vh 3vw;
border-radius: 2vw; background-color: #F5F5F5;
overflow: hidden; height: 100vh;
} box-sizing: border-box;
}
.map_address { .map {
background-color: white; height: 60vh;
padding: 20rpx 10rpx; border-radius: 2vw;
overflow: hidden;
}
.map_address {
background-color: white;
padding: 20rpx 10rpx;
border-radius: 0 0 14rpx 14rpx; border-radius: 0 0 14rpx 14rpx;
.li { .li {
margin: 20rpx 0; margin: 20rpx 0;
line-height: 40rpx; line-height: 40rpx;
} }
.cir { .cir {
display: inline-block; display: inline-block;
width: 2vw; width: 2vw;
height: 2vw; height: 2vw;
border-radius: 2vw; border-radius: 2vw;
margin: 0 20rpx; margin: 0 20rpx;
} }
} }
.map_btn { .map_btn {
width: 50px; width: 50px;
height: 50px; height: 50px;
position: absolute; position: absolute;
bottom: 0px; bottom: 0px;
right: 0; right: 0;
z-index: 9999999; z-index: 9999999;
} }
.btn { .btn {
position: fixed; position: fixed;
bottom: 20rpx; bottom: 20rpx;
width: 90vw; width: 90vw;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
} }
</style> </style>