星油企业版
This commit is contained in:
caolc
837
BagStation/pages/overviewMap/overviewMap.vue
Normal file
837
BagStation/pages/overviewMap/overviewMap.vue
Normal 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>
|
||||
Reference in New Issue
Block a user