11
This commit is contained in:
18500206848
559
pages/mapSeach/mapSeach.vue
Normal file
559
pages/mapSeach/mapSeach.vue
Normal file
@@ -0,0 +1,559 @@
|
||||
<template>
|
||||
<view class="bodys">
|
||||
<view class="status_bar">
|
||||
<!-- 这里是状态栏 -->
|
||||
</view>
|
||||
<view class="head">
|
||||
<map id='midMap' ref='midMap' :latitude="latitude" :markers="markList" :longitude="longitude" @tap="changeMap" scale="10">
|
||||
</map>
|
||||
<view class="search">
|
||||
<view class="head_border">
|
||||
</view>
|
||||
<view class="controlss">
|
||||
<view class="controlss-back">
|
||||
<image src="../../static/img/left.svg" @click="backView" mode=""></image>
|
||||
</view>
|
||||
<view class="controlss-input" @click="goSearch">
|
||||
<input type="text" placeholder="搜索工作的地点" disabled="true" />
|
||||
<image src="../../static/img/search.svg" style="margin-left: auto;" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="controlsPop">
|
||||
<view class="listTitle">
|
||||
附近任务
|
||||
</view>
|
||||
<view class="borderbom"></view>
|
||||
<scroll-view scroll-y lower-threshold="0" style="height: 92%;" @scrolltolower="upLoad" v-if="companyList.length>0">
|
||||
<block v-for="(item, index) in companyList" :key="item.id">
|
||||
<companyList :companyitem="item" :near="true"></companyList>
|
||||
<view class="baddd"></view>
|
||||
</block>
|
||||
</scroll-view>
|
||||
<view class="nothingArea" v-else>
|
||||
<image src="../../static/img/pic_notask.svg" mode="" class="nothing"></image>
|
||||
<view class="nothingContnt">
|
||||
暂无任务信息
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import companyList from '@/components/companyList/companyList.vue';
|
||||
import testData from '@/common/textdata.js';
|
||||
import {
|
||||
nearMission
|
||||
} from '@/api/mission.js';
|
||||
import {
|
||||
getcoder,
|
||||
querySearch
|
||||
} from "@/api/map.js";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
companyList
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
longitude: 116.40,
|
||||
latitude: 39.90,
|
||||
key: 'FW3BZ-6JTK6-GCUS5-MZCRR-3GPR5-HJFEI',
|
||||
currentPoint: {},
|
||||
companyList: [],
|
||||
markList: [],
|
||||
inpoints: [],
|
||||
inputValue: '',
|
||||
searchResult: false,
|
||||
searchResultList: [],
|
||||
page: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
total: 0
|
||||
},
|
||||
mapCtx: null,
|
||||
type: ""
|
||||
};
|
||||
},
|
||||
onLoad: function(option) {
|
||||
if (option.item) {
|
||||
const item = JSON.parse(decodeURIComponent(option.item));
|
||||
var point = {
|
||||
target: {
|
||||
latitude: item.lat,
|
||||
longitude: item.lng
|
||||
}
|
||||
};
|
||||
this.currentPoint = point;
|
||||
this.type = 'search';
|
||||
}
|
||||
},
|
||||
onShow: function() {
|
||||
if (this.type === 'search') {
|
||||
this.changeMap(this.currentPoint);
|
||||
} else {
|
||||
this.getLocation();
|
||||
}
|
||||
// that.inputValue='';
|
||||
//发起定位授权弹窗
|
||||
// uni.authorize({
|
||||
// scope: 'scope.userLocation',
|
||||
// success() {
|
||||
// that.getLocation()
|
||||
// },
|
||||
// fail() {
|
||||
// uni.showModal({
|
||||
// title: '提示',
|
||||
// content: '获取您的位置，以便为您推荐合适工作信息',
|
||||
// success: function (res) {
|
||||
// if (res.confirm) {
|
||||
// that.getLocation();
|
||||
// } else if (res.cancel) {
|
||||
// //默认位置
|
||||
// var point = {
|
||||
// target:{
|
||||
// latitude:that.latitude,
|
||||
// longitude:that.longitude
|
||||
// }
|
||||
// };
|
||||
// that.currentPoint = point;
|
||||
// that.changeMap(point);
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
// that.getLocation();
|
||||
},
|
||||
methods: {
|
||||
/*定位*/
|
||||
getLocation: function() {
|
||||
var that = this;
|
||||
uni.getLocation({
|
||||
type: 'gcj02',
|
||||
success: function(res) {
|
||||
//初始化当前点
|
||||
var point = {
|
||||
target: {
|
||||
latitude: res.latitude,
|
||||
longitude: res.longitude
|
||||
}
|
||||
};
|
||||
that.currentPoint = point;
|
||||
// that.latitude = res.latitude;
|
||||
// that.longitude = res.longitude;
|
||||
//设置当前点 并逆地址解析和获取任务
|
||||
that.changeMap(point);
|
||||
},
|
||||
fail: function() {
|
||||
//默认位置
|
||||
var point = {
|
||||
target: {
|
||||
latitude: that.latitude,
|
||||
longitude: that.longitude
|
||||
}
|
||||
};
|
||||
that.currentPoint = point;
|
||||
that.changeMap(point);
|
||||
},
|
||||
complete: function(e) {}
|
||||
});
|
||||
},
|
||||
/*设置当前点 并逆地址解析和获取任务*/
|
||||
changeMap: function(e) {
|
||||
this.page.current = 1;
|
||||
if (e) {
|
||||
var point = {
|
||||
target: {
|
||||
latitude: e.target.latitude,
|
||||
longitude: e.target.longitude
|
||||
}
|
||||
};
|
||||
this.currentPoint = point;
|
||||
this.latitude = e.target.latitude;
|
||||
this.longitude = e.target.longitude;
|
||||
this.markList = [];
|
||||
this.getAddrByPoint(e.target);
|
||||
this.getData(e.target);
|
||||
}
|
||||
},
|
||||
/*逆地址解析*/
|
||||
getAddrByPoint: function(point) {
|
||||
var that = this;
|
||||
var location = point.latitude + ',' + point.longitude
|
||||
that.setCurrentMarker(point); //设置当前marker
|
||||
getcoder(location, encodeURI(that.key), 0).then(res => {
|
||||
var address = res.data.result.address_component.city + res.data.result.formatted_addresses.recommend;
|
||||
this.markList.forEach(ele => { //给当前marker添加label
|
||||
if (ele.id === 0) {
|
||||
ele.title = address;
|
||||
ele['callout'] = {
|
||||
content: address,
|
||||
color: '#000000',
|
||||
fontSize: 12,
|
||||
borderRadius: 2,
|
||||
borderWidth: 0,
|
||||
borderColor: '#ffffff',
|
||||
bgColor: '#ffffff',
|
||||
padding: '5',
|
||||
display: 'ALWAYS',
|
||||
textAlign: 'center'
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
/*设置当前定位点marker*/
|
||||
setCurrentMarker: function(point) {
|
||||
this.markList.push({
|
||||
id: 0,
|
||||
latitude: point.latitude,
|
||||
longitude: point.longitude,
|
||||
title: '',
|
||||
zIndex: 2,
|
||||
iconPath: '/static/img/location.png',
|
||||
// width: 20,
|
||||
// height: 20
|
||||
})
|
||||
},
|
||||
/*设置任务点*/
|
||||
setmarkers: function() {
|
||||
// 设置任务点
|
||||
var inpoints = [];
|
||||
inpoints.push({
|
||||
latitude: this.currentPoint.target.latitude,
|
||||
longitude: this.currentPoint.target.longitude
|
||||
})
|
||||
if (this.companyList.length) {
|
||||
for (var i = 0; i < this.companyList.length && i < 10; i++) {
|
||||
inpoints.push({
|
||||
latitude: this.companyList[i].lat,
|
||||
longitude: this.companyList[i].lon
|
||||
})
|
||||
this.markList.push({
|
||||
id: i + 1,
|
||||
latitude: this.companyList[i].lat,
|
||||
longitude: this.companyList[i].lon,
|
||||
zIndex: 1,
|
||||
iconPath: '/static/img/point.png',
|
||||
// width: 30,
|
||||
// height: 30
|
||||
})
|
||||
}
|
||||
}
|
||||
this.inpoints = inpoints;
|
||||
},
|
||||
goSearch() {
|
||||
uni.navigateTo({
|
||||
url: '../seach/placeSearch'
|
||||
});
|
||||
},
|
||||
// search:function(){
|
||||
// if(this.inputValue){
|
||||
// this.querySearch(this.inputValue)
|
||||
// }else{
|
||||
// return
|
||||
// }
|
||||
// },
|
||||
// //关键词输入提示
|
||||
// querySearch:function(queryString) {
|
||||
// querySearch(queryString, encodeURI(this.key)).then(res => {
|
||||
// if (res.data.status === 0) {
|
||||
// this.searchResultList = res.data.data;
|
||||
// if(this.searchResultList.length){
|
||||
// this.searchResultList.forEach((item, index) => {
|
||||
// item.title = this.getInf(item.title, this.inputValue);
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
// },
|
||||
// // 8-2、选择地址
|
||||
// handleSelect:function(item) {
|
||||
// this.page.current=1;
|
||||
// this.searchResult=false;
|
||||
// this.inputValue='';
|
||||
// this.searchResultList = [];
|
||||
// var point = {
|
||||
// target:{
|
||||
// latitude:item.location.lat,
|
||||
// longitude:item.location.lng
|
||||
// }
|
||||
// };
|
||||
// this.currentPoint = point;
|
||||
// this.changeMap(point);
|
||||
// },
|
||||
// //高亮
|
||||
// getInf(str, key) {
|
||||
// if (str && key) {
|
||||
// let replaceReg = new RegExp(key, 'g')// 匹配关键字正则
|
||||
// let replaceString = "<span style='color: #1b66ff;'>" + key + "</span>" // 高亮替换
|
||||
// return str.replace(replaceReg, replaceString);
|
||||
// }
|
||||
// },
|
||||
// cancel:function(){
|
||||
// this.inputValue = '';
|
||||
// this.searchResult = false;
|
||||
// },
|
||||
getData: function(obj) {
|
||||
nearMission(this.page.current, this.page.size, obj.latitude, obj.longitude, 50).then(res => {
|
||||
if (this.page.current === 1) {
|
||||
this.companyList = [];
|
||||
}
|
||||
this.page.current += 1;
|
||||
this.page.total = res.data.data.total;
|
||||
if (res.data.data && res.data.data.records.length) {
|
||||
this.companyList = this.companyList.concat(res.data.data.records);
|
||||
}
|
||||
//非上拉加载 即设置任务点
|
||||
if (obj !== 'upload') {
|
||||
this.setmarkers();
|
||||
}
|
||||
})
|
||||
},
|
||||
//上拉加载
|
||||
upLoad: function() {
|
||||
if (this.page.current <= Math.ceil(this.page.total / this.page.size)) {
|
||||
this.getData('upload');
|
||||
} else {
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: '已经是最后一页',
|
||||
})
|
||||
return
|
||||
}
|
||||
},
|
||||
backView: function() {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.status_bar {
|
||||
height: var(--status-bar-height);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.locationimg {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
position: fixed;
|
||||
left: 355rpx;
|
||||
top: 250rpx;
|
||||
}
|
||||
|
||||
.baddd {
|
||||
background: #f6f6f6;
|
||||
height: 20rpx;
|
||||
}
|
||||
|
||||
.head_border {
|
||||
width: 60rpx;
|
||||
height: 8rpx;
|
||||
border-radius: 30rpx;
|
||||
margin: 0 auto;
|
||||
background-color: #ddd;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.head {
|
||||
font-family: PingFangSC-Medium;
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
text-align: center;
|
||||
height: 50%;
|
||||
position: relative;
|
||||
/* border-bottom: 20rpx solid #f6f6f6; */
|
||||
}
|
||||
|
||||
map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.head .search {
|
||||
position: absolute;
|
||||
top: 10rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.head .search .controlss {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
margin: 0rpx 20rpx;
|
||||
}
|
||||
|
||||
.head .search .controlss .controlss-back {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 20rpx;
|
||||
padding: 5rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.head .search .controlss .controlss-input {
|
||||
flex: 1;
|
||||
padding: 10rpx 30rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 200rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.head .search .controlss input {
|
||||
text-align: left;
|
||||
font-size: 28rpx;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.head .search .controlss image {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
.controlsPop {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 750rpx;
|
||||
height: 50%;
|
||||
background-color: #fefefe;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.controlsPop .listTitle {
|
||||
padding: 10rpx 20rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.controlsPop .nothingArea {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.controlsPop .nothingContnt {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
margin-top: 30rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.controlsPop .nothing {
|
||||
width: 400rpx;
|
||||
height: 200rpx;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/*
|
||||
.searchPage .headSearch .search-view {
|
||||
border-bottom: 1rpx solid #dddddd;
|
||||
padding: 10rpx 30rpx;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
position: relative;
|
||||
}
|
||||
.searchPage .headSearch .close{
|
||||
position: absolute;
|
||||
right: 24rpx;
|
||||
top: 0;
|
||||
height: 60rpx;
|
||||
padding: 5rpx 0;
|
||||
line-height: 60rpx;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
.searchPage .headSearch .search-item{
|
||||
display: flex;
|
||||
width: 80%;
|
||||
padding: 0 24rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
background: rgba(249, 249, 249, 1);
|
||||
border-radius: 200px;
|
||||
align-items: center;
|
||||
}
|
||||
.searchPage .headSearch .search-item input {
|
||||
padding: 0 24rpx;
|
||||
height: 80rpx;
|
||||
font-weight: 400;
|
||||
flex: 1;
|
||||
text-align: start;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang-SC-Bold, PingFang-SC;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
}
|
||||
.searchPage .headSearch .search-item .placeholderClass {
|
||||
color: #CCCCCC;
|
||||
}
|
||||
.searchPage .headSearch .search-item image {
|
||||
height: 32rpx;
|
||||
width: 32rpx;
|
||||
}
|
||||
|
||||
.searchPage .scroll-view{
|
||||
flex:1;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
top:80rpx;
|
||||
}
|
||||
|
||||
.searchPage .search-result {
|
||||
background-color: #fff;
|
||||
}
|
||||
.searchPage .search-result li{
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
border-bottom:1rpx solid #f2f2f2;
|
||||
padding: 28rpx 30rpx;
|
||||
list-style:none;
|
||||
}
|
||||
.searchPage .search-result li .title{
|
||||
font-size:32rpx;
|
||||
} */
|
||||
|
||||
.highlight {
|
||||
color: #1b66ff;
|
||||
}
|
||||
|
||||
.searchPage .search-result li .address {
|
||||
font-size: 24rpx;
|
||||
color: #999999
|
||||
}
|
||||
|
||||
.borderbom {
|
||||
width: 100%;
|
||||
height: 1rpx;
|
||||
border-bottom: 1rpx solid #f2f2f2;
|
||||
}
|
||||
|
||||
page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bodys {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user