340 lines
8.1 KiB
Vue
340 lines
8.1 KiB
Vue
<template>
|
|
<view>
|
|
<view class="fixedheader">
|
|
<headers :showBack="true">
|
|
<view class="headerName">
|
|
获取当前巡检点位置
|
|
</view>
|
|
</headers>
|
|
</view>
|
|
<view class="content" :style="{paddingTop: (mobileTopHeight + 50) * 1.5 + 'rpx'}">
|
|
<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>
|
|
<view class="">
|
|
<input class="search-input" v-model="searchVal" @blur="onBlur" @input="changeInput" placeholder="请输入地点" id="tipinput" />
|
|
<!-- 搜索出来的地址 -->
|
|
<view v-show="showListView">
|
|
<cover-view :class="{'display-none': !showListView}" class="search-address bg-white">
|
|
<cover-view v-for="(item,index) in addressList" :key="item.id" class="addres_item bg-white"
|
|
@click="chooseIs(index,item)">
|
|
{{item.name}}
|
|
</cover-view>
|
|
</cover-view>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
<button class="search-btn" size="mini" type="primary" @click="searchArea">搜索</button>
|
|
</view>
|
|
<map id="map" :style="{
|
|
width:mapConfig.width+'px',
|
|
height:mapConfig.height+'px'
|
|
}" :show-scale="true" :scale="mapConfig.scale" :latitude="mapConfig.latitude" :longitude="mapConfig.longitude"
|
|
:markers="mapConfig.markers" :circles="mapConfig.circles"></map>
|
|
<button class="save-btn" type="primary" @click="saveLocation">保存位置</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
let mapSearch = weex.requireModule('mapSearch');
|
|
export default {
|
|
data() {
|
|
return {
|
|
mobileTopHeight: 0,
|
|
mapConfig: {
|
|
width: 0,
|
|
height: 0,
|
|
scale: 14,
|
|
latitude: undefined,
|
|
longitude: undefined,
|
|
markers: [], // 定位配置
|
|
circles: [], // 显示圆配置
|
|
address: ""
|
|
},
|
|
showMap: false,
|
|
coordType: "gcj02",
|
|
map: null,
|
|
standOptions: [5, 10, 20, 30, 50, 100, 200, 300],
|
|
standArea: undefined,
|
|
searchVal: "",
|
|
addressList: [],
|
|
showListView: false,
|
|
}
|
|
},
|
|
mounted() {
|
|
let that = this;
|
|
uni.getSystemInfo({
|
|
success(res) {
|
|
that.mobileTopHeight = res.statusBarHeight ? res.statusBarHeight : 0;
|
|
uni.setStorageSync('systemInfo', res)
|
|
console.log(res)
|
|
}
|
|
})
|
|
console.log('this.mobileTopHeight', this.mobileTopHeight)
|
|
this.initMap()
|
|
},
|
|
onLoad(option) {
|
|
let info = uni.getWindowInfo();
|
|
this.standArea = option.standArea;
|
|
this.mapConfig.latitude = option.latitude;
|
|
this.mapConfig.longitude = option.longitude;
|
|
this.mapConfig.address = option.addr;
|
|
|
|
this.mapConfig.width = info.windowWidth;
|
|
this.mapConfig.height = info.windowHeight - 170;
|
|
|
|
console.info(info.windowHeight, 'info.windowHeight')
|
|
// uni.showLoading({
|
|
// title: "加载地图资源中"
|
|
// })
|
|
// this.openMonitor()
|
|
},
|
|
methods: {
|
|
initMap() {
|
|
// uni.hideLoading();
|
|
this.map = uni.createMapContext("map", this);
|
|
this.registerEvent()
|
|
this.mapSetLocation()
|
|
this.drawCircle()
|
|
},
|
|
// 注册点击事件
|
|
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()
|
|
},
|
|
changeInput(){
|
|
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) {
|
|
that.addressList = res.poiList;
|
|
that.showListView = true;
|
|
}
|
|
})
|
|
},
|
|
chooseIs(index, item){
|
|
this.searchVal = item.name;
|
|
this.searchArea();
|
|
console.log(item)
|
|
},
|
|
onBlur(){
|
|
this.showListView = false;
|
|
},
|
|
// 搜索详细位置
|
|
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.showListView = false;
|
|
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">
|
|
.bg-white {
|
|
background-color: white;
|
|
}
|
|
.display-none {
|
|
display: none;
|
|
}
|
|
.search-address {
|
|
// width: 450rpx;
|
|
// height: 450rpx;
|
|
position: absolute;
|
|
// padding: 14rpx 12rpx;
|
|
// line-height: normal;
|
|
margin-top: 4rpx;
|
|
border-radius: 4rpx;
|
|
}
|
|
.addres_item :deep( .uni-cover-view ){
|
|
padding: 4rpx 4rpx;
|
|
font-size: 28rpx;
|
|
// visibility: initial;
|
|
// line-height: normal;
|
|
}
|
|
.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: 100rpx;
|
|
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: 100%;
|
|
z-index: 999;
|
|
}
|
|
</style> |