134 lines
3.1 KiB
Vue
134 lines
3.1 KiB
Vue
<template>
|
|
<view class="page">
|
|
<u-navbar class="u-navbar" title="地图" placeholder @leftClick="leftClick" leftIconColor="#fff" bgColor="#00337A" :titleStyle="{ color: '#FFF', fontSize: '32rpx' }"></u-navbar>
|
|
|
|
<view class="map-box">
|
|
<view class="map" :data="listData" :change:data="allmap.getResData" style="width: 100%;height: 100%;" id="container"></view>
|
|
</view>
|
|
</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: {
|
|
|
|
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: #EFEFEF;
|
|
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>
|