caoliancun/MP_XOIL_company_new
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

星油企业版

Browse Source
This commit is contained in:
caolc
2022-08-08 09:17:43 +08:00
commit e3238cb907
517 changed files with 80472 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

306
BagStation/pages/overviewMap/components/addressSelector.vue Normal file
View File

@@ -0,0 +1,306 @@
<template>
<view :style="{top:(styles.top + styles.height + 10 )+'px'}" class="header">
<view class="sele_car">
<view @click="backFn()" class="flex ac">
<uni-icons type="back" size="30"></uni-icons>
<!-- <uni-icond type="back" size="30"></uni-icond> -->
</view>
<view class=" flex sele_car_right">
<view @click="chooseLocation('start')" class=" Padding flex ac flexone">
<view class="yuan" />
<view class="flexone margin size">{{Route.start.title}}</view>
</view>
</view>
</view>
<view class="filter">
<view v-for="(item,index) in menuList" :key='index' class="filter_item">
<view @click="seleFilter(item,index)"> {{ item.value?item.value.split('/')[0]:item.title}} </view>
<view :style="{maxHeight:item.SublistOpen?'200rpx':'0rpx'}" class="conditions">
<view :style="{color:item.value?item.value.split('/')[0] == items.lable?'#666666':'#bbbbbb':'#bbbbbb'}" @click="filterItemSele(index,indexs)" v-for="(items,indexs) in item.Sublist" :key='indexs' style="margin-bottom: 10rpx; font-size: 25rpx;">{{items.lable}}</view>
</view>
</view>
</view>
</view>
</template>
<script>
import oilSiteApi from '@/api/oil-site.js'
export default {
props: {
Route: {
type: Object,
default: () => {
return {}
}
},
polyline: {
type: Array,
default: () => []
}
},
watch: {
polyline: function(n, o) {
if (n.length !== 0) {
this.isShow.conditions = true
} else {
this.isShow.conditions = false
}
}
},
data() {
return {
styles: {},
isShow: {
conditions: false
},
header:null,
menuList: [
// {
// title: '距离',
// value: '5KM/5',
// field: 'juLi',
// SublistOpen: false,
// Sublist: [{
// lable: '5KM',
// value: '5'
// }, {
// lable: '20KM',
// value: '20'
// }, {
// lable: '30KM',
// value: '30'
// },{
// lable: '50KM',
// value: '50'
// }]
// },
{
title: '全类型',
value: '全类型/2',
field: 'highSpeed',
SublistOpen: false,
Sublist: [
{
lable: '全类型',
value: '2'
},
{
lable: '高速',
value: '1'
}, {
lable: '非高速',
value: '0'
}
]
}
]
}
},
mounted() {
this.styles = uni.getMenuButtonBoundingClientRect();
console.log(this.styles);
const query = uni.createSelectorQuery().in(this);
query.select('.header').boundingClientRect(data => {
console.log("得到布局位置信息" + JSON.stringify(data));
this.header = data
console.log("节点离页面顶部的距离为" + data.top);
}).exec();
},
created() {
this.getConditionMenu();
},
methods: {
getElement(){
return this.styles.top + this.styles.height + 10 + this.header.height
},
filterItemSele(index,indexs){
this.menuList[index].value = `${this.menuList[index].Sublist[indexs].lable}/${this.menuList[index].Sublist[indexs].value}`;
this.menuList[index].SublistOpen=false;
console.log(this.datassFn(),'/-/-/');
if(index==1){
this.$emit('mapEventListeners','localScreen',this.datassFn())
}else{
this.$emit('mapEventListeners','apiScreen',this.datassFn())
}
},
getConditionMenu() {
oilSiteApi.getConditionMenu().then(res => {
if (res.code !== 20000) return
Object.keys(res.data).forEach((item,index)=>{
let data = {
title: index==0?'全渠道':'油品',
value: index==0?'全渠道/':'0#/0#',
field: index==0?'siteChannel':'oilProductCode',
SublistOpen: false,
Sublist: []
}
res.data[item].forEach(items=>{
data.Sublist.push({
lable:index==0?items.name:items.id,
value:items.id
})
})
this.menuList.push(data)
})
this.menuList[1].Sublist.unshift({
lable:'全渠道',
value:''
});
[this.menuList[0],this.menuList[1],this.menuList[2]]=[this.menuList[2],this.menuList[0],this.menuList[1]]
// [this.menuList[0],this.menuList[1],this.menuList[2],this.menuList[3]] = [this.menuList[0],this.menuList[3],this.menuList[1],this.menuList[2]];
console.log(this.menuList, '***')
})
},
datassFn(){
let data = {}
this.menuList.forEach((item,index)=>{
data[item.field] = item.value?item.value.split('/')[1]:''
})
console.log(data,'***************')
return data
},
seleFilter(e, w) {
this.menuList.forEach((item,index)=>{
if(w==index) return
item.SublistOpen = false
})
e.SublistOpen = !e.SublistOpen;
this.$emit('closeFooterScroll')
},
chooseLocation(e) {
console.log(this.Route,'******')
// uni.navigateTo({
// url:'/BagStation/pages/newRoutePlanning/chooseLocation=' + `${e}/${this.Route.start.latitude},${this.Route.start.longitude}`
// })
uni.navigateTo({
url: '/BagStation/pages/newRoutePlanning/chooseLocation?type=' +
`${e}/${this.Route.start.latitude},${this.Route.start.longitude}`,
fail(e) {
console.log(e,'****************************')
}
})
},
backFn() {
uni.navigateBack()
}
}
}
</script>
<style scoped>
.conditions {
position: absolute;
background-color: #FFFFFF;
width: 100%;
max-height: 200rpx;
top: 68rpx;
display: flex;
flex-direction: column;
gap: 15rpx;
/* padding: 21rpx 0; */
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
overflow: auto;
transition: max-height 0.3s, opacity 0.3s;
opacity: 1;
}
.filter_item {
flex: 1;
background-color: #FFFFFF;
border-radius: 10px;
margin-top: 30rpx;
padding: 24rpx 0;
text-align: center;
position: relative;
margin-right: 20rpx;
/* border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px; */
}
.filter :last-child{
margin-right: 0;
}
.filter {
font-size: 28rpx;
width: 100%;
display: flex;
/* gap: 20rpx; */
color: #666666;
}
.colorb {
color: #BBBBBB;
}
.Padding {
padding: 0 28rpx;
}
.addressInput {
background: #F0F0F0;
border-radius: 10px;
}
.textoverflow {
overflow: hidden;
text-overflow: ellipsis;
}
.size {
font-size: 28rpx;
color: #666666;
}
.margin {
margin: 0 28rpx;
}
.flexone {
flex: 1;
}
.yuan {
width: 20rpx;
height: 20rpx;
background: #2E8EF7;
border-radius: 50%;
}
.sele_car_right {
flex-direction: column;
flex: 1;
/* padding: 0 27.2rpx; */
padding-left: 27.2rpx;
}
.flex {
display: flex;
}
.jc {
justify-content: center;
}
.ac {
align-items: center;
}
.sele_car {
/* height: 194rpx; */
background: #FFFFFF;
border-radius: 10px;
padding: 18rpx 32rpx;
display: flex;
}
.header {
width: 100vw;
position: absolute;
z-index: 999999;
padding: 0 44rpx;
}
</style>

186
BagStation/pages/overviewMap/components/footer.vue Normal file
View File

@@ -0,0 +1,186 @@
<template>
<view class="footer_body">
<view @click="$emit('reset')" class="myPosition">
<image src="@/static/img/myPosition.png"></image>
</view>
<view v-if="!details" class="selector">
<view class="selector_left" >
<view class="selector_left_d">
<view v-if="isShow.km" class="selector_left_d_popup">
<view @click="seleKm(index)" :style="{color:seleIndex==index?'':'#bbbbbb'}" v-for="(item,index) in kmData" :key="index">{{item.lable}}</view>
</view>
<image style="width: 50rpx;height: 50rpx;" src="../../../static/img/price.png"></image>
<text style="margin: 0 20rpx;" @click="isShow.km=!isShow.km">
{{kmData[seleIndex].lable}}
</text>
<image style="width: 40rpx;height: 25rpx;transform: rotate(180deg);" src="../../../static/img/chevron-up.png"></image>
</view>
</view>
<view @click="upScale" class="screen_bottom">全站 / 区域</view>
</view>
<serviceStation v-if="details" @openMapApp='openMapApp' @dragMap='dragMap' :details='details'></serviceStation>
</view>
</template>
<script>
import serviceStation from '../../newRoutePlanning/components/serviceStation.vue'
export default{
components:{
serviceStation
},
props:{
value:{
type:Number,
default:2000
},
mapScale:{
type:Number,
default:9
},
spareMapScale:{
type:Number,
default:9
},
details:{
type:Object,
default:()=>{
return null
}
}
},
data() {
return {
isShow:{
km:false
},
seleIndex:0,
kmData:[
{
lable:'20KM',
value:20000
},
{
lable:'30KM',
value:30000
},
{
lable:'50KM',
value:50000
}
]
}
},
methods:{
close(){
this.isShow.km=false
},
seleKm(e){
this.seleIndex = e;
setTimeout(()=>{
this.isShow.km=false;
},500);
this.$emit('input',this.kmData[this.seleIndex].value);
},
upScale(){
this.$emit('upScale')
},
openMapApp(){
console.log('导')
let that = this
wx.openLocation({
latitude: that.details.latitude, // 纬度
longitude: that.details.longitude, // 经度
name: that.details.siteName, // 地址名称
address: that.details.siteName, // 详细地址
success: function(r) {
console.log(r)
},
fail: function(res) {
console.log('拉起失败啦', res)
}
})
},
dragMap(e,w){
this.$emit('dragMap',e,w)
},
}
}
</script>
<style scoped>
.selector_left_d_popup{
position: absolute;
width: 100%;
background-color: #FFFFFF;
height: 200rpx;
overflow-y: auto;
top: -220rpx;
border-radius: 10px;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
}
.selector_left_d{
font-size: 36rpx;
color: #666666;
font-weight: 600;
/* gap:20rpx; */
display: flex;
align-items: center;
height: 100%;
width: max-content;
position: relative;
}
.selector_left{
flex: 1;
}
.screen_bottom {
width: 240rpx;
height: 80rpx;
background: #FF6700;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
color: #FFFFFF;
font-size: 36rpx;
font-weight: 600;
}
.myPosition{
display: flex;
background-color: #ffffff;
width: 70rpx;
height: 70rpx;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
margin-left: 85%;
margin-bottom: 20rpx;
}
.myPosition image{
/* background-color: #FFFFFF; */
width: 45rpx;
height: 45rpx;
}
.selector{
width: calc(80% + 50rpx);
background-color: #FFFFFF;
border-radius: 10px;
margin: 0 auto;
margin-bottom: env(safe-area-inset-bottom);
display: flex;
justify-content: flex-end;
padding: 10rpx 25rpx;
}
.footer_body{
position: absolute;
z-index: 999999;
bottom: 0;
width: 100%;
color: #000000;
width: 100vw;
}
</style>

28
BagStation/pages/overviewMap/map.css Normal file
View File

@@ -0,0 +1,28 @@
.map_body{
height: 100vh;
width: 100vw;
}
.map_xx{
width: 100%;
height: 100%;
}
.customCallout{
width: 150rpx;
height: 78rpx;
white-space:nowrap;
overflow:hidden;
text-overflow: ellipsis;
/* background-color: #FF4A4A; */
color: #FFFFFF;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.customCallout_text{
color: #FFFFFF;
font-size: 20rpx;
z-index: 99999;
bottom: 14rpx;
position: relative;
}

837
BagStation/pages/overviewMap/overviewMap.vue Normal file
View File

@@ -0,0 +1,837 @@
<template>
<view style="position: relative;">
<addressSelector @closeFooterScroll='closeFooterScroll' ref='addressSelector'
@mapEventListeners='mapEventListeners' :polyline="polyline" :Route="Route" />
<footerBar ref='footerBar' :spareMapScale='spareMapScale' @reset='reset' v-model="radius" @upScale='upScale'
:mapScale='mapScale' :details='details' />
<view @touchmove='touchmove' class="map_body">
<map :circles='circles' @regionchange='regionchange' @tap='poitap' @updated='mapUpdated' :scale='mapScale'
@callouttap='callouttap' :enable-scroll='enableScroll' @markertap='markertap' :polyline="polyline"
subkey="UTXBZ-BUH6D-TQD44-HCEG4-UKOFT-U2BDN" layer-style='2' id="map_Id" :show-location="true"
:markers="markers" class="map_xx" :latitude="coordinate.latitude" :longitude="coordinate.longitude">
<cover-view v-if="circles[0].radius!==0" class="coverimage"
:style="{width:`${img.width}rpx`,height:`${img.height}rpx`}">
<cover-image :style="{width: `${img.width}rpx` ,height:`${img.height}rpx`}"
src="../../static/img/change_xy.png"></cover-image>
</cover-view>
<!-- <cover-view slot="callout">
<cover-view v-for="(item,index) in markers" :key='index' class="customCallout" :marker-id="item.id">
<cover-image style="width: 150rpx;height: 78rpx;position: absolute;" :src="item.imgCustomCallout">
</cover-image>
<cover-view class="customCallout_text">{{Number(item.price).toFixed(2)||2}}</cover-view>
</cover-view>
</cover-view> -->
</map>
</view>
</view>
</template>
<script>
import amapFile from '@/utils/qqmap-wx-jssdk.js'
import oilSiteApi from '@/api/oil-site.js'
import addressSelector from './components/addressSelector.vue'
import footerBar from './components/footer.vue'
/*
全站地图组件:顶部筛选框 (addressSelector),中间地图 ( map ),底部控制器(footerBar);
为了计算距离新开了一个子线程 : @property {Function} worker ;
map地图的事件及控件:
{
circles:圆，默认当前视野中心点 监听手势缩放视野范围变动完成之后,判断当前缩放比例是否大于9, 大于9，园置空并移动视野时停止计算距离，小于保留并获取屏幕中心点移动
amapFile:腾讯地图sdk,
subkey:腾讯地图个性地图 key,
layer-style:个性地图样式,
@regionchange:视野变动事件,
@markertap:点击点事件
}
*/
export default {
/*
* @property {Object}
* @property {Object}
* @property {Object}
* @property {Array}
* @property {Function}
* @property {Function}
*/
components: {
addressSelector,
footerBar
},
data() {
return {
img: {
width: 40,
height: 50
},
radius: 20000,
LastCoordinate: [],
timer: null,
TXSDK: null,
polyline: [],
circles: [],
//路线规划 起点终点数据 //起点默认是我的位置
Route: {
start: {
longitude: '',
latitude: '',
title: ''
},
end: {
longitude: '',
latitude: '',
title: ''
}
},
myCoordinate: {
longitude: '',
latitude: '',
},
enableScroll: true,
coordinate: {
longitude: '',
latitude: '',
title: '我的位置'
},
markers: [],
mapContext: null,
details: null,
spareMarkers: [],
selePrice: null,
mapScale: 9,
spareMapScale: 9
}
},
onLoad(e) {
uni.getSystemInfo({
success(e) {
console.log('设备信息', e)
}
})
this.initFn();
// this.newMapMoveToLocation(this.circles[0].longitude,this.circles[0].latitude)
},
created() {
this.TXSDK = new amapFile({
key: 'UTXBZ-BUH6D-TQD44-HCEG4-UKOFT-U2BDN'
});
},
watch: {
mapScale: function(n, o) {
if (n < 7) {
setTimeout(() => {
this.colseMarks()
}, 500)
} else if (n >= 7) {
setTimeout(() => {
this.circles[0].radius = this.radius;
this.touchend();
this.woerks({
msg: 'distance',
coordinate: {
latitude: this.coordinate.latitude,
longitude: this.coordinate.longitude
},
radius: this.radius,
markes: this.markers
});
}, 500)
}
},
radius: function(n, o) {
if (this.circles[0].radius == 0) {
uni.showToast({
title: '请打开区域图',
icon: 'none'
})
return
}
this.circles[0].radius = n;
this.touchend()
},
},
methods: {
reset() {
// if(this.mapScale<7){
// return
// }
this.coordinate.latitude = this.myCoordinate.latitude,
this.coordinate.longitude = this.myCoordinate.longitude,
this.newMapMoveToLocation(this.myCoordinate.longitude, this.myCoordinate.latitude);
setTimeout(() => {
this.touchend();
}, 1000)
},
closeLable() {
this.markers.forEach((item, index) => {
item.callout.display = 'BYCLICK'
})
},
openLable() {
this.markers.forEach((item, index) => {
item.callout.display = 'ALWAYS'
})
},
getRegion() {
if (this.timer) {
clearTimeout(this.timer);
}
this.timer = setTimeout(() => {
// this.mapScale==9?this.openLable():this.closeLable()
}, 500);
},
upScale() {
let that = this;
that.mapScale = that.mapScale >= 9 ? 3 : 9;
// that.spareMarkers = that.mapScale;
// this.mapContext.getScale({
// success:function(e){
// setTimeout(()=>{
// that.mapScale = e.scale;
// setTimeout(()=>{
// that.mapScale = that.mapScale>=9?3:9;
// },0)
// },0)
// }
// })
},
colseMarks() {
this.LastCoordinate.forEach((item) => {
this.markers[item].callout.display = 'BYCLICK'
});
},
closeFooterScroll() {
// this.$refs.footerScroll.screenClose();
// this.$refs.footerScroll.mapIconClose();
},
getMarks() {
oilSiteApi.wholeStationMap({
oilProductCode: "",
siteChannel: ""
}).then(res => {
// let list = this.locationProcessing(res.data);
// list.length = 100;
this.markers = this.locationProcessing(res.data);
this.spareMarkers = JSON.parse(JSON.stringify(this.markers));
console.log(this.spareMarkers, '////////////////////////')
// markersArray.forEach((item,index)=>{
// })
// for (let i=0;i<parseInt(list.length/300);i++) {
// setTimeout(()=>{
// this.markers = this.markers.concat(this.asynchronousLoading(i*300,list))
// console.log(i,'********')
// },i*5000)
// }
// this.markers = this.markers.concat(this.asynchronousLoading(0,markersArray))
// console.log(this.markers.length,'////////')
// console.log(this.locationProcessing(res.data), '********')
})
},
asynchronousLoading(index, array) {
return array.slice(index, index + 300)
},
onChange(e) {
console.log(3)
},
//监听地图移动中
touchmove() {
// let that = this
// console.log(2);
// this.mapContext.getCenterLocation({
// success: function(e) {
// // that.circles[0].longitude = e.longitude;
// // that.circles[0].latitude = e.latitude;
// // that.markers.forEach(item => {
// // let juli = that.getDistance(that.coordinate.latitude, that
// // .coordinate.longitude, item.latitude, item.longitude)
// // if (juli < 1000) {
// // item.callout.display = 'ALWAYS'
// // console.log('小于1000米', item, juli)
// // } else {
// // item.callout.display = 'BYCLICK'
// // }
// // })
// }
// })
},
//监听拖动结束 获取地图中心点计算所有点距离屏幕中心点的位置符合条件 显示气泡
touchend() {
let that = this
this.mapContext.getCenterLocation({
success: function(e) {
console.log('拖动结束')
if (that.circles[0].radius == 0) {
return
};
that.circles[0].longitude = e.longitude;
that.circles[0].latitude = e.latitude;
that.woerks({
msg: 'distance',
coordinate: {
latitude: e.latitude,
longitude: e.longitude
},
markes: that.markers,
radius: that.radius
});
}
})
},
//开启线程
woerks(e) {
let that = this
let worker = wx.createWorker('static/workers/request/index.js', {
useExperimentalWorker: true
}) // 文件名指定 worker 的入口文件路径，绝对路径
try {
worker.onMessage(function(res) {
that.LastCoordinate.forEach((item) => {
if (res.msg.includes(item)) return;
if (that.markers[item]) {
that.markers[item].callout.display = 'BYCLICK'
}
});
res.msg.forEach((item) => {
that.markers[item].callout.display = 'ALWAYS'
});
that.LastCoordinate = res.msg;
worker.terminate()
});
// 监听worker被系统回收事件
worker.onProcessKilled(function() {
console.log('系统回收')
// 重新创建一个worker
// wx.createWorker()
});
worker.postMessage({
msg: e,
})
} catch (e) {
console.log(e, '******************')
// uni.showToast({
// title:'********',
// icon:'none'
// });
// this.woerks();
//TODO handle the exception
}
},
//视野变化监听
regionchange(e) {
let that = this;
//如果变化结束并是手势,获取当前缩放比例 赋值
if (e.type == 'end') {
this.mapContext.getScale({
success: function(es) {
that.spareMapScale = es.scale;
if (e.causedBy == 'scale') {
if (es.scale < 7) {
that.circles[0].radius = 0;
that.colseMarks();
}
if (that.circles[0].radius == 0 && es.scale >= 7) {
that.circles[0].radius = that.radius;
that.touchend()
}
}
if (e.causedBy == "update") {
if (es.scale < 7) {
that.circles[0].radius = 0;
that.colseMarks()
}
if (that.circles[0].radius == 0 && es.scale >= 7) {
that.circles[0].radius = that.radius;
that.touchend()
}
}
if (e.causedBy == "drag") {
that.touchend()
}
},
})
}
// else{
// that.coordinate.latitude = e.latitude;
// that.coordinate.longitude = e.longitude;
// }
console.log(e, '视野变化')
},
mapUpdated(e) {
let that = this
console.log('%c 更新', 'font-size:50px;color:red');
console.log(e, '*****************************************')
// that.mapContext.getScale({
// success: function(e) {
// // that.$nextTick(function() {
// // if (points && points.length == 1) {
// // setTimeout(()=>{
// // },1000)
// // }
// // console.log(that.mapScale)
// // })
// // setTimeout(()=>{
// // that.mapScale = e.scale
// // },500)
// console.log(e, '当前缩放比例')
// }
// })
},
//初始化方法
initFn() {
let that = this
this.mapContext = uni.createMapContext("map_Id", this);
this.getCurrentLocation();
this.UpdateAddress();
this.getMarks();
setTimeout(() => {
if (this.markers.length !== 0 && this.Route.start.latitude !== '') {
that.woerks({
msg: 'distance',
coordinate: {
latitude: that.coordinate.latitude,
longitude: that.coordinate.longitude
},
radius: that.radius,
markes: that.markers
});
}
}, 1000)
},
//地图更新事件监听 分发事件
async mapEventListeners(e) {
switch (e) {
case 'updateRoute':
this.mapRoutePlanning(arguments[1] ? arguments[1] : this.Route.start, arguments[2] ? arguments[
2] : this.Route.end, arguments[3] ? arguments[3] : 'LEAST_TIME')
break;
case 'UpdateLocation':
this.UpdateLocation(arguments[1], arguments[2])
break;
case 'cardPlanning':
this.Route = arguments[1]
this.mapRoutePlanning()
break;
case 'details':
this.details = {};
let d = arguments[1]
this.$nextTick(function() {
this.details = d
this.newMapMoveToLocation(this.details.longitude, this.details.latitude)
})
break;
case 'apiScreen':
//接口更新站点
console.log('接口筛选')
let {
oilProductCode, siteChannel
} = arguments[1];
let markerList = await this.mapUpdateMarkers(oilProductCode, siteChannel);
//处理站点数据回显
this.spareMarkers = this.locationProcessing(markerList);
this.filterMarkers(JSON.parse(JSON.stringify(this.spareMarkers)), this.$refs.addressSelector
.datassFn());
break;
case 'localScreen':
// 手动筛选 备份下数据
console.log(this.spareMarkers, '手动筛选')
let markers = JSON.parse(JSON.stringify(this.spareMarkers));
let filterData = this.$refs.addressSelector.datassFn()
this.filterMarkers(markers, filterData)
break;
case 'MoveToLocation':
arguments[1] ? (this.newMapMoveToLocation(this.Route.start.longitude, this.Route.start
.latitude)) : (this.zoomRoutePlanning());
// arguments[1] ? (this.zoomRoutePlanning([this.Route.start])) : (this.zoomRoutePlanning());
break;
}
},
// 更新路线规划
async mapRoutePlanning(start = this.Route.start, end = this.Route.end, strategy = 'LEAST_TIME') {
// 获取路径
let res = await this.getMapRoutePlanning(start, end, strategy);
//处理数据
this.RoutePlanningHandle(res);
//缩放显示所有经纬度
this.zoomRoutePlanning();
// 获取筛选数据 更新油站站点
let {
oilProductCode,
juLi,
siteChannel
} = this.$refs.addressSelector.datassFn();
let markerList = await this.mapUpdateMarkers(this.polyline[0].points, oilProductCode, juLi,
siteChannel);
console.log(markerList, '-*-*更新油站站点*-')
//处理油站站点数据并显示
this.spareMarkers = this.locationProcessing(markerList);
let markers = JSON.parse(JSON.stringify(this.spareMarkers));
let filterData = Object.assign(this.$refs.addressSelector.datassFn(), this.$refs.footerScroll
.filter());
this.filterMarkers(markers, filterData);
},
// 更新最近搜索
UpdateLocation(Route, type) {
let recentSearch = uni.getStorageSync('recentSearch') || [];
let data = {
...Route,
type: type,
id: `${Route.start.latitude}${Route.start.longitude}${Route.end.latitude}${Route.end.longitude}`
};
let key = recentSearch.filter(item => item.id);
if (!key.includes('e.id')) {
console.log('没有重复')
recentSearch.length !== 0 ? recentSearch[0].type == 'lately' ? recentSearch.splice(0, 1, data) :
recentSearch.unshift(data) : recentSearch.push(data);
uni.setStorageSync('recentSearch', recentSearch);
}
},
//监听更新位置事件
UpdateAddress() {
let that = this
uni.$on('UpdateAddress', function(region, type) {
console.log(`%c ${(type=='start'?'起点更新':'终点更新')} 地址→ ${region.title}`,
'color:red;font-size:50px')
that.Route[type].longitude = region.location.lng;
that.Route[type].latitude = region.location.lat;
that.Route[type].title = region.title;
setTimeout(() => {
that.coordinate.latitude = that.Route.start.latitude;
that.coordinate.longitude = that.Route.start.longitude;
that.newMapMoveToLocation(that.Route.start.longitude, that.Route.start.latitude);
if (that.mapScale < 9) {
that.mapScale = 9
// that.spareMarkers = that.mapScale
};
that.$nextTick(function() {
that.touchend()
})
}, 500)
})
},
openMapApp() {
console.log(this.details, '导航')
let that = this
wx.openLocation({
latitude: that.details.latitude, // 纬度
longitude: that.details.longitude, // 经度
name: that.details.siteName, // 地址名称
address: that.details.siteName, // 详细地址
success: function(r) {
console.log(r)
},
fail: function(res) {
console.log('拉起失败啦', res)
}
})
},
//获取路线规划
getMapRoutePlanning(start, end, strategy = 'LEAST_TIME') {
console.log('获取路线规划', start, end, )
var _this = this;
return new Promise(function(res, rej) {
_this.TXSDK.direction({
sig: 'mOPvEv4WmyaxymycTYy00pSiad2jnQil',
mode: 'driving',
from: start,
to: end,
policy: strategy,
success: function(e) {
console.log('获取路线规划成功')
res(e)
},
fail(e) {
rej(e)
console.log('获取路线规划失败', e)
}
})
})
},
//获取到的路线规划数据进行处理
RoutePlanningHandle(res) {
var _this = this;
var ret = res;
var coors = ret.result.routes[0].polyline,
pl = [];
//坐标解压（返回的点串坐标，通过前向差分进行压缩）
var kr = 1000000;
for (var i = 2; i < coors.length; i++) {
coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
}
//将解压后的坐标放入点串数组pl中
for (var i = 0; i < coors.length; i += 2) {
pl.push({
latitude: coors[i],
longitude: coors[i + 1],
lat: coors[i],
lon: coors[i + 1]
})
}
//设置polyline属性，将路线显示出来,将解压坐标第一个数据作为起点
_this.polyline = [{
points: pl,
color: '#FF6700',
width: 4
}]
},
/* 缩放路线规划 includePoints方法 points:经纬度数组 padding:边距 参考 https://uniapp.dcloud.io/api/location/map?id=cdreatemapcontext */
zoomRoutePlanning(points, padding) {
let that = this
try {
let paddingTop = this.$refs.addressSelector.getElement();
console.log(this.$refs.addressSelector.getElement(), '高度')
this.mapContext.includePoints({
points: points ? points : that.polyline[0].points,
padding: padding ? padding : [paddingTop + 40, 105, 75, 10],
// padding: padding ? padding : [50, 10, 50, 10],
success: function(e) {
console.log('-----------')
}
})
} catch (e) {
uni.showToast({
title: e,
icon: 'none'
})
//TODO handle the exception
}
},
// 点击地图
poitap() {
this.enableScroll = true;
this.$refs.addressSelector.menuList.forEach(item => item.SublistOpen = false);
this.$refs.footerBar.close();
this.details = null;
},
//更新markers点
async mapUpdateMarkers(oilProductCode, siteChannel) {
let data = {
oilProductCode: oilProductCode ? oilProductCode : '0#',
siteChannel: siteChannel,
}
let taht = this;
console.log(data, '查询参数')
return new Promise(function(re, rj) {
oilSiteApi.wholeStationMap(data).then(markerList => {
if (markerList.code !== 20000) {
setTimeout(() => {
uni.showToast({
title: 'Error' + markerList.code + markerList.msg,
icon: 'none'
})
}, 500)
rj(markerList.code + markerList.msg)
return
}
// if (markerList.data.length == 0) {
// setTimeout(() => {
// uni.showToast({
// title: '暂无油站信息' + markerList.data.length,
// icon: 'none'
// })
// }, 500)
// rj('暂无油站信息' + markerList.data.length)
// return
// }
console.log(markerList.data, '返回的点')
re(markerList.data)
})
})
},
//定位处理
locationProcessing(markerList) {
let that = this
// markerList.length = 100
console.log(markerList, '----')
markerList.forEach((item, index) => {
let configure = {
siteId: item.id,
id: Number(`${index}`),
imgCustomCallout: this.olitype(item.siteChannel),
// title: `${item.price}`,
iconPath: '../../static/img/tt.png',
width: 20,
height: 20,
// joinCluster: true,
callout: {
content: `${Number(item.price).toFixed(2)}`,
color: '#FFFFFF',
fontSize: '25rpx',
bgColor: '#FF4A4A',
borderRadius: '10px',
padding: 10,
display: 'BYCLICK'
}
// customCallout: {
// anchorX: 0,
// anchorY: 10,
// display: "BYCLICK"
// }
}
item = Object.assign(item, configure);
});
return markerList
},
//地图组件控件
assembly() {},
//点击气泡事件
async callouttap(e) {
console.log(e, this.markers, this.markers[e.detail.markerId], '*****')
let seleMark = this.markers.filter(item => item.id == e.detail.markerId);
console.log(seleMark[0].siteId, '筛选的id')
// this.enableScroll = true
let details = await oilSiteApi.getSiteDetails({
latitude: String(this.myCoordinate.latitude),
longitude: String(this.myCoordinate.longitude),
siteId: seleMark[0].siteId
});
console.log(details, '***')
if (details.code !== 20000) {
uni.showToast({
title: details.msg,
icon: 'none'
})
return
}
this.mapEventListeners('details', Object.assign(details.data, {
id: seleMark[0].siteId
}))
},
//点击定位点事件
markertap(e) {
this.callouttap(e)
console.log(e, '点击了ma')
},
//获取当前位置 绘制⚪ 设置起点位置和我的位置
getCurrentLocation() {
let that = this
uni.getLocation({
type: 'gcj02',
success: function(res) {
({
latitude: that.coordinate.latitude,
longitude: that.coordinate.longitude
} = res);
that.circles.push({
longitude: that.coordinate.longitude,
latitude: that.coordinate.latitude,
fillColor: '#FF670033',
radius: that.radius,
strokeWidth: 2,
color: '#FF670033'
});
that.myCoordinate = {
longitude: that.coordinate.longitude,
latitude: that.coordinate.latitude,
};
that.Route.start = Object.assign(that.Route.start, that.coordinate);
}
});
},
//移动当前中心点 参数:经纬度
newMapMoveToLocation(longitude, latitude) {
let that = this
this.mapContext.moveToLocation({
longitude: longitude,
latitude: latitude,
success(e) {
// that.mapContext.getScale({
// success: function(e) {
// setTimeout(() => {
// that.mapScale = e.scale;
// setTimeout(() => {
// that.mapScale = 15
// }, 500)
// }, 500)
// }
// })
// that.$nextTick(function(){
// that.mapScale = null
// setTimeout(()=>{
// that.mapScale = 16
// },0)
// })
console.log(`%c 移动 坐标→ ${longitude}-${latitude}`, 'color:green;font-size:20px');
},
})
},
addfn(e) {
if (e !== null) {
setTimeout(() => {
this.newMapMoveToLocation(this.markers[e].longitude, this.markers[e].latitude);
this.addfn(e < this.markers.length ? e + 1 : null);
}, 1500)
}
},
//手动筛选
filterMarkers(e, w) {
console.log(e, w, '手动筛选条件')
let filterMarkers = [];
//第一步筛选 是否高速
let highSpeedMarkers = Object.keys(w).includes('highSpeed') && w.highSpeed ? e.filter((item, index) => {
return Number(w.highSpeed) == 2 ? item : item.highSpeedMark == Number(w.highSpeed)
}) : e;
this.markers = highSpeedMarkers;
console.log(this.markers, '***************************')
},
copy(obj) {
let newobj = null // 接受拷贝的新对象
if (typeof(obj) == 'object' && typeof(obj) !== null) { // 判断是否是引用类型
newobj = obj instanceof Array ? [] : {} // 判断是数组还是对象
for (var i in obj) {
newobj[i] = this.copy(obj[i]) // 判断下一级是否还是引用类型
}
} else {
newobj = obj
}
return newobj
},
//拖动辅助控件
dragMap(e, w) {
console.log(e, w, '**')
this.enableScroll = w
this.newMapMoveToLocation(e.longitude, e.latitude)
uni.$on('dragMap', function(e) {
this.enableScroll = e
console.log(e, '////////')
})
}
}
}
</script>
<style scoped>
@import url("./map.css");
.coverimage {
position: absolute;
/* z-index: 999999; */
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
/* background: blanchedalmond; */
border-radius: 50%;
overflow: hidden;
/* opacity: .3; */
/* height: 50rpx; */
}
.map_xx {
width: 100%;
height: 100%;
}
</style>