flx：修改地图组件
This commit is contained in:
parent
eb01072325
commit
f097140d43
@ -4,6 +4,9 @@
|
||||
<view class="headerName">
|
||||
智能巡检
|
||||
</view>
|
||||
<view class="right" @click="getScanCode()">
|
||||
<image class="scancode" src="@/static/scancode.png" mode=""></image>
|
||||
</view>
|
||||
</headers>
|
||||
<view class="problemOverview" :style="{ 'margin-top': (statusBarHeight+52) + 'px' }">
|
||||
<view class="overFlex">
|
||||
@ -116,6 +119,18 @@
|
||||
url: `/pages/projectEnd/InspectionRoute/${page}`
|
||||
})
|
||||
},
|
||||
getScanCode() {
|
||||
const that = this;
|
||||
uni.scanCode({
|
||||
scanType: ['qrCode'],
|
||||
success: function(res) {
|
||||
console.log('扫一扫得到的数据：' + res.result)
|
||||
uni.navigateTo({
|
||||
url: `${res.result}`
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -137,6 +152,20 @@
|
||||
background: #2b8df3;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/deep/ .right {
|
||||
font-size: 24rpx;
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
top: 50%;
|
||||
z-index: 4;
|
||||
transform: translateY(-50%);
|
||||
|
||||
.scancode {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.noData {
|
||||
|
||||
@ -21,22 +21,28 @@
|
||||
</view>
|
||||
</view>
|
||||
</picker>
|
||||
<input class="search-input" v-model="searchVal" placeholder="请输入地点" />
|
||||
<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="{
|
||||
<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>
|
||||
}" :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>
|
||||
@ -54,8 +60,8 @@
|
||||
scale: 14,
|
||||
latitude: undefined,
|
||||
longitude: undefined,
|
||||
markers: [], // 定位配置
|
||||
circles: [], // 显示圆配置
|
||||
markers: [], // 定位配置
|
||||
circles: [], // 显示圆配置
|
||||
address: ""
|
||||
},
|
||||
showMap: false,
|
||||
@ -63,7 +69,9 @@
|
||||
map: null,
|
||||
standOptions: [5, 10, 20, 30, 50, 100, 200, 300],
|
||||
standArea: undefined,
|
||||
searchVal: ""
|
||||
searchVal: "",
|
||||
addressList: [],
|
||||
showListView: false,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@ -71,11 +79,11 @@
|
||||
uni.getSystemInfo({
|
||||
success(res) {
|
||||
that.mobileTopHeight = res.statusBarHeight ? res.statusBarHeight : 0;
|
||||
uni.setStorageSync('systemInfo',res)
|
||||
uni.setStorageSync('systemInfo', res)
|
||||
console.log(res)
|
||||
}
|
||||
})
|
||||
console.log('this.mobileTopHeight',this.mobileTopHeight)
|
||||
console.log('this.mobileTopHeight', this.mobileTopHeight)
|
||||
this.initMap()
|
||||
},
|
||||
onLoad(option) {
|
||||
@ -84,10 +92,10 @@
|
||||
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: "加载地图资源中"
|
||||
@ -97,7 +105,7 @@
|
||||
methods: {
|
||||
initMap() {
|
||||
// uni.hideLoading();
|
||||
this.map = uni.createMapContext("map",this);
|
||||
this.map = uni.createMapContext("map", this);
|
||||
this.registerEvent()
|
||||
this.mapSetLocation()
|
||||
this.drawCircle()
|
||||
@ -124,7 +132,7 @@
|
||||
},
|
||||
//画圆
|
||||
drawCircle() {
|
||||
this.mapConfig.circles = [ // 显示圆配置
|
||||
this.mapConfig.circles = [ // 显示圆配置
|
||||
{
|
||||
latitude: this.mapConfig.latitude,
|
||||
longitude: this.mapConfig.longitude,
|
||||
@ -159,22 +167,51 @@
|
||||
this.standArea = this.standOptions[e.detail.value];
|
||||
this.drawCircle()
|
||||
},
|
||||
// 搜索详细位置
|
||||
searchArea() {
|
||||
changeInput(){
|
||||
let that = this;
|
||||
if(!this.searchVal) return;
|
||||
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;
|
||||
}, (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()
|
||||
@ -189,85 +226,115 @@
|
||||
standArea: this.standArea,
|
||||
address: this.mapConfig.address
|
||||
})
|
||||
setTimeout(() =>{
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
},10)
|
||||
}, 10)
|
||||
},
|
||||
// 地址逆解析，根据经纬度获取详细位置
|
||||
getAddress() {
|
||||
mapSearch.reverseGeocode({
|
||||
point: {
|
||||
latitude: this.mapConfig.latitude,
|
||||
longitude: this.mapConfig.longitude
|
||||
}
|
||||
},
|
||||
res => {
|
||||
console.info('成功回调', res)
|
||||
this.mapConfig.address = res.address || "未知位置"
|
||||
})
|
||||
point: {
|
||||
latitude: this.mapConfig.latitude,
|
||||
longitude: this.mapConfig.longitude
|
||||
}
|
||||
},
|
||||
res => {
|
||||
console.info('成功回调', res)
|
||||
this.mapConfig.address = res.address || "未知位置"
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.fixedheader{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
.headerName{
|
||||
z-index: 1;
|
||||
.bg-white {
|
||||
background-color: white;
|
||||
}
|
||||
/deep/ .headerBox {
|
||||
background-color: #5181F6;
|
||||
color: white;
|
||||
.uni-icons{
|
||||
color: white !important;
|
||||
.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>
|
||||
|
||||
.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>
|
||||
Loading…
x
Reference in New Issue
Block a user