You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
837 lines
24 KiB
837 lines
24 KiB
<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>
|
|
|