153 lines
3.7 KiB
Vue
153 lines
3.7 KiB
Vue
<template>
|
||
<view class="page">
|
||
<u-navbar class="u-navbar" title="地图" placeholder @leftClick="leftClick" leftIconColor="#fff" rightIcon="list" @rightClick="rightClick" bgColor="#00337A" :titleStyle="{ color: '#FFF', fontSize: '32rpx' }">
|
||
<view class="u-nav-slot" slot="right">
|
||
<u-icon name="list" size="24" color="#FFF"></u-icon>
|
||
</view>
|
||
</u-navbar>
|
||
|
||
<view class="map-box">
|
||
<view class="map" :data="listData" :change:data="allmap.getResData" style="width: 100%;height: 100%;" id="container"></view>
|
||
</view>
|
||
|
||
<u-popup :show="show" mode="top" @close="close" :safeAreaInsetTop="false" :duration="0" :overlayOpacity="0">
|
||
<view style="width: 94%;height: auto;background-color: #fff;padding:20rpx;">
|
||
<u-list height="12vh">
|
||
<u-list-item v-for="(item, index) in listData" :key="index">
|
||
<view style="margin: 10rpx;font-size: 28rpx;">考勤点：{{item.rangeName}}，距离：{{item.distance}}KM</view>
|
||
</u-list-item>
|
||
</u-list>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { pathToBase64, base64ToPath } from 'image-tools';
|
||
import config from '@/config'
|
||
export default {
|
||
data() {
|
||
return {
|
||
listData:[],
|
||
show:false
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
setTimeout(()=>{
|
||
this.listData=JSON.parse(option.teamList)
|
||
},1000)
|
||
},
|
||
onShow() {
|
||
|
||
},
|
||
methods: {
|
||
rightClick(){
|
||
this.show=true;
|
||
},
|
||
close(){
|
||
this.show=false;
|
||
},
|
||
leftClick() {
|
||
console.log('返回')
|
||
uni.navigateBack({
|
||
delta: 1 // 返回
|
||
});
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<script module="allmap" lang="renderjs">
|
||
import { myBMapGL1 } from "../../util/map.js";
|
||
import no_warn from "../../../../static/realName/coor.png";
|
||
var bmap;
|
||
export default {
|
||
data() {
|
||
return {
|
||
latitude: 31.877608,
|
||
longitude: 117.150204,
|
||
}
|
||
},
|
||
mounted() {
|
||
this.initMap()
|
||
},
|
||
beforeDestroy() {
|
||
bmap && bmap.destroy();
|
||
bmap = null
|
||
},
|
||
methods: {
|
||
//获取地图信息
|
||
initMap() {
|
||
myBMapGL1().then((res) => {
|
||
// 创建地图实例
|
||
bmap = new BMapGL.Map("container");
|
||
bmap.centerAndZoom(new BMapGL.Point(this.longitude, this.latitude), 12);
|
||
// 这里边写加载完成之后的执行操作
|
||
bmap.enableScrollWheelZoom(true);
|
||
})
|
||
},
|
||
getResData(newValue, oldValue, ownerVm, vm) {
|
||
console.log(newValue,"newList---------")
|
||
if(newValue.length>0){
|
||
const lon = Number(newValue[0].lon);
|
||
const lat = Number(newValue[0].lat);
|
||
bmap.centerAndZoom(new BMapGL.Point(lon, lat), 12);
|
||
for(let index = 0; index < newValue.length; index++) {
|
||
let item = newValue[index];
|
||
if (item.lon && item.lat) {
|
||
// 中心点
|
||
let point = new BMapGL.Point(item.lon,item.lat)
|
||
let marker = "", myIcon = "";
|
||
myIcon = new BMapGL.Icon(no_warn, new BMapGL.Size(20,20))
|
||
myIcon.setImageSize(new BMapGL.Size(20, 20));
|
||
marker = new BMapGL.Marker(point, { icon: myIcon });
|
||
marker.id = "center"+item.rangeName;
|
||
bmap.addOverlay(marker);
|
||
//圈
|
||
// const point = new BMapGL.Point(item.lon, item.lat);
|
||
let circle = new BMapGL.Circle(point, 6000, {
|
||
strokeColor: "#06E7A3",
|
||
strokeWeight: 2,
|
||
strokeOpacity: 1,
|
||
fillOpacity: 0.1,
|
||
zIndex: 999
|
||
});
|
||
circle.id = "circle"+item.rangeName;
|
||
bmap.addOverlay(circle);
|
||
}
|
||
}
|
||
}
|
||
},
|
||
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
/deep/.u-popup .u-transition {
|
||
top: 10vh!important;
|
||
}
|
||
|
||
.page {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background-color: #f8f8f8;
|
||
box-sizing: border-box;
|
||
// padding: 0 20px;
|
||
.map-box{
|
||
width: 100%;
|
||
height: 90vh;
|
||
z-index: 9;
|
||
position: absolute;
|
||
top:10vh;
|
||
background: #fff;
|
||
.map{
|
||
display: inline-block;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
</style>
|