838 lines
24 KiB
Vue
838 lines
24 KiB
Vue
<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(); /oilSiteInfo/getSiteByGeoHashNewA
|
||
// 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: `${this.moneyIntercept(item.price) }`,
|
||
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>
|