332 lines
8.4 KiB
Vue
332 lines
8.4 KiB
Vue
<template>
|
|
<view>
|
|
<view class="fixedheader">
|
|
<headers :showBack="true">
|
|
<view class="headerName">
|
|
获取当前巡检点位置
|
|
</view>
|
|
</headers>
|
|
</view>
|
|
<view class="content" :style="{paddingTop: mobileTopHeight + fixedHeaderHeight + 'px'}" v-show="showMap">
|
|
<view class="search-box">
|
|
<picker mode="selector" :range="standOptions" @change="handleChangeStandArea" filterable>
|
|
<view class="picker">
|
|
<view class="" style="color: #c0c4cc; font-size: 28rpx;" v-if="!standArea">
|
|
请选择
|
|
<u-icon style="margin-left: 8rpx;" name="arrow-down" color="#c0c4cc"></u-icon>
|
|
</view>
|
|
<view class="" v-else>
|
|
{{standArea}}米
|
|
<u-icon style="margin-left: 8rpx;" name="arrow-down" color="#c0c4cc"></u-icon>
|
|
</view>
|
|
</view>
|
|
</picker>
|
|
<input class="search-input" v-model="searchVal" placeholder="请输入地点" />
|
|
<button class="search-btn" size="mini" type="primary" @click="searchArea">搜索</button>
|
|
</view>
|
|
<map
|
|
id="map"
|
|
:style="{
|
|
width:mapConfig.width+'px',
|
|
height:mapConfig.height+'px',
|
|
margin: 0
|
|
}"
|
|
:show-scale="true"
|
|
:scale="mapConfig.scale"
|
|
:latitude="mapConfig.latitude"
|
|
:longitude="mapConfig.longitude"
|
|
:markers="mapConfig.markers"
|
|
:circles="mapConfig.circles"
|
|
></map>
|
|
<view class="btn-group">
|
|
<button class="save-btn" type="default" @click="mapGetLocation">获取当前位置</button>
|
|
<button class="save-btn" type="primary" @click="saveLocation">保存位置</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
let mapSearch = weex.requireModule('mapSearch');
|
|
export default {
|
|
data() {
|
|
return {
|
|
mobileTopHeight: 0,
|
|
fixedHeaderHeight: 0,
|
|
mapConfig: {
|
|
width: 0,
|
|
height: 0,
|
|
scale: 14,
|
|
latitude: undefined,
|
|
longitude: undefined,
|
|
markers: [], // 定位配置
|
|
circles: [], // 显示圆配置
|
|
address: ""
|
|
},
|
|
showMap: false,
|
|
coordType: "gcj02",
|
|
map: null,
|
|
standOptions: [30, 50, 100, 200, 300],
|
|
standArea: undefined,
|
|
searchVal: ""
|
|
}
|
|
},
|
|
async mounted() {
|
|
let that = this;
|
|
uni.getSystemInfo({
|
|
success(res) {
|
|
that.mobileTopHeight = res.statusBarHeight ? res.statusBarHeight : 0;
|
|
uni.setStorageSync('systemInfo',res)
|
|
console.log(res)
|
|
}
|
|
})
|
|
let info = uni.getWindowInfo();
|
|
this.mapConfig.width = info.windowWidth;
|
|
this.fixedHeaderHeight = await this.getHeight('.fixedheader')
|
|
console.info(this.fixedHeaderHeight,'--------')
|
|
this.mapConfig.height = info.windowHeight - this.mobileTopHeight - this.fixedHeaderHeight -2 - 50;
|
|
// this.mapConfig.height = 450;
|
|
console.log('this.mobileTopHeight',this.mobileTopHeight, this.mapConfig.height)
|
|
this.initMap()
|
|
},
|
|
onLoad(option) {
|
|
this.standArea = option.standArea;
|
|
this.mapConfig.latitude = option.latitude;
|
|
this.mapConfig.longitude = option.longitude;
|
|
this.mapConfig.address = option.addr;
|
|
|
|
// console.info(info, 'info.windowHeight')
|
|
this.showMap = false;
|
|
uni.showLoading({
|
|
title: "加载地图资源中"
|
|
})
|
|
// this.openMonitor()
|
|
},
|
|
methods: {
|
|
async getHeight(name) {
|
|
const query = uni.createSelectorQuery().in(this);
|
|
return new Promise((resolve) => {
|
|
query.select(name).boundingClientRect(data => {
|
|
resolve(data.height);
|
|
}).exec();
|
|
});
|
|
},
|
|
initMap() {
|
|
if(this.mapConfig.latitude && this.mapConfig.longitude) {
|
|
this.map = uni.createMapContext("map",this);
|
|
this.registerEvent()
|
|
this.mapSetLocation()
|
|
this.drawCircle()
|
|
this.showMap = true;
|
|
uni.hideLoading();
|
|
} else {
|
|
this.mapGetLocation()
|
|
}
|
|
},
|
|
mapGetLocation() {
|
|
let that = this
|
|
uni.getLocation({
|
|
type: that.coordType,
|
|
geocode: true,
|
|
isHighAccuracy: "true",
|
|
accuracy: "best", // 精度值为20m
|
|
success: function(res) {
|
|
console.log('当前位置的经度：' + res.longitude);
|
|
console.log('当前位置的纬度：' + res.latitude);
|
|
console.log(res, 'res..')
|
|
that.mapConfig.latitude = res.latitude;
|
|
that.mapConfig.longitude = res.longitude;
|
|
const { country, province, city, district, street, streetNum, poiName } = res.address;
|
|
that.mapConfig.address = country + province + city + district + street + streetNum + poiName;
|
|
that.map = uni.createMapContext("map",that);
|
|
that.registerEvent()
|
|
that.mapSetLocation()
|
|
that.drawCircle()
|
|
that.showMap = true;
|
|
uni.hideLoading();
|
|
},
|
|
fail: function(msg) {
|
|
console.log("获取位置失败", msg)
|
|
}
|
|
});
|
|
},
|
|
// 注册点击事件
|
|
registerEvent() {
|
|
let that = this;
|
|
this.map.$getAppMap().onclick = function(point) {
|
|
console.info(point, 'point')
|
|
that.mapConfig.longitude = point.longitude
|
|
that.mapConfig.latitude = point.latitude
|
|
that.mapSetLocation()
|
|
that.drawCircle()
|
|
that.getAddress()
|
|
}
|
|
},
|
|
// 设置定位
|
|
mapSetLocation() {
|
|
this.mapConfig.markers = [{
|
|
latitude: this.mapConfig.latitude,
|
|
longitude: this.mapConfig.longitude,
|
|
iconPath: '../../static/map/end.png'
|
|
}]
|
|
},
|
|
//画圆
|
|
drawCircle() {
|
|
this.mapConfig.circles = [ // 显示圆配置
|
|
{
|
|
latitude: this.mapConfig.latitude,
|
|
longitude: this.mapConfig.longitude,
|
|
color: '#3C71F2',
|
|
// 填充颜色
|
|
fillColor: '#5181F670',
|
|
fillOpacity: 0.56,
|
|
// 圆半径
|
|
radius: this.standArea,
|
|
// 边
|
|
strokeWidth: 1,
|
|
level: 'aboveroads'
|
|
}
|
|
]
|
|
this.mapConfig.scale = this.standArea >= 200 ? 16 : this.standArea >= 100 ? 17 : 18;
|
|
},
|
|
// handleTapMap(e) {
|
|
// console.info('点击', e)
|
|
// let that = this;
|
|
// const res = that.map.getCenterLocation({
|
|
// success: (res) => {
|
|
// console.info('当前定位', res)
|
|
// that.mapConfig.latitude = res.latitude;
|
|
// that.mapConfig.longitude = res.longitude;
|
|
// that.mapSetLocation()
|
|
// that.drawCircle()
|
|
// }
|
|
// })
|
|
// },
|
|
// 切换范围
|
|
handleChangeStandArea(e) {
|
|
this.standArea = this.standOptions[e.detail.value];
|
|
this.drawCircle()
|
|
},
|
|
// 搜索详细位置
|
|
searchArea() {
|
|
let that = this;
|
|
if(!this.searchVal) return;
|
|
mapSearch.poiKeywordsSearch({
|
|
point: {
|
|
latitude: this.mapConfig.latitude,
|
|
longitude: this.mapConfig.longitude
|
|
},
|
|
key: this.searchVal
|
|
},(res) => {
|
|
console.info('搜索:',res)
|
|
if(res.poiList.length) {
|
|
const { latitude, longitude } = res.poiList[0].location;
|
|
that.mapConfig.latitude = latitude;
|
|
that.mapConfig.longitude = longitude;
|
|
that.mapSetLocation()
|
|
that.drawCircle()
|
|
that.getAddress()
|
|
}
|
|
})
|
|
},
|
|
// 保存位置
|
|
saveLocation() {
|
|
uni.$emit('locationSuccessEvent', {
|
|
latitude: this.mapConfig.latitude,
|
|
longitude: this.mapConfig.longitude,
|
|
standArea: this.standArea,
|
|
address: this.mapConfig.address
|
|
})
|
|
setTimeout(() =>{
|
|
uni.navigateBack()
|
|
},10)
|
|
},
|
|
// 地址逆解析，根据经纬度获取详细位置
|
|
getAddress() {
|
|
mapSearch.reverseGeocode({
|
|
point: {
|
|
latitude: this.mapConfig.latitude,
|
|
longitude: this.mapConfig.longitude
|
|
}
|
|
},
|
|
res => {
|
|
console.info('成功回调', res)
|
|
this.mapConfig.address = res.address || "未知位置"
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.fixedheader{
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
z-index: 2;
|
|
.headerName{
|
|
z-index: 1;
|
|
}
|
|
/deep/ .headerBox {
|
|
background-color: #5181F6;
|
|
color: white;
|
|
.uni-icons{
|
|
color: white !important;
|
|
}
|
|
}
|
|
}
|
|
.content {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
.search-box {
|
|
height: 50px;
|
|
background-color: rgba(16, 16, 16, 0.08);
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.picker {
|
|
width: 140rpx;
|
|
height: 62rpx;
|
|
line-height: 40rpx;
|
|
border-radius: 22rpx;
|
|
background-color: rgba(255, 255, 255, 1);
|
|
color: rgba(51, 51, 51, 0.48);
|
|
font-size: 28rpx;
|
|
display: flex;
|
|
padding: 0 16rpx;
|
|
margin: 0 16rpx;
|
|
align-items: center;
|
|
}
|
|
.search-input {
|
|
flex: 1;
|
|
min-width: 400rpx;
|
|
height: 62rpx;
|
|
line-height: 40rpx;
|
|
border-radius: 22rpx;
|
|
background-color: rgba(255, 255, 255, 1);
|
|
color: rgba(51, 51, 51, 0.48);
|
|
font-size: 28rpx;
|
|
padding: 0 16rpx;
|
|
}
|
|
.search-btn {
|
|
margin: 0 16rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
.save-btn {
|
|
width: 50%;
|
|
z-index: 999;
|
|
border-radius: 0;
|
|
}
|
|
uni-button:after {
|
|
border-radius: 0;
|
|
}
|
|
.btn-group {
|
|
padding: 0;
|
|
margin: 0;
|
|
display: flex;
|
|
// height: 50px;
|
|
}
|
|
</style>
|