< template>
< view style= "background-color: #f5f5f5" >
< ! -- 头部开始 -- >
< view
style= "
position : fixed;
left : - 5rpx;
right : - 5rpx;
z- index: 99 ;
top : - 5rpx;
width : 101vw;
"
>
< view style= "position: relative" >
< view : style= "{ height: rpxNavStatusBarHeight + 5 + 'rpx' }" >
< text
style= "
position : absolute;
bottom : 0 ;
line- height: 40px;
width : 100 % ;
z- index: 50 ;
color : rgb ( 59 , 59 , 59 ) ;
"
class = "text_c font-size-14"
> 地图选点< / text
>
< view @click= "goBack()" class = "back_icon" >
< i v- if = "pagesLength > 1" class = "iconfont" > & #xe621; < / i>
< i v- else class = "iconfont" > & #xe8c6; < / i>
< / view>
< / view>
< / view>
< / view>
< ! -- 头部结束 -- >
< ! -- 确定按钮 -- >
< view @click. stop. prevent= "submit" class = "btn-sub" type= "success"
> 确定位置< / view
>
< ! -- 底部内容部分 -- >
< view
: style= "{
'padding-top' : rpxNavStatusBarHeight + 'rpx' ,
} "
>
< view
style= "width: 100%; position: relative"
: style= "{ height: 'calc( 100vh - ' + rpxNavStatusBarHeight + 'rpx)' }"
> < view
style= "width: 100%; height: calc(100% - 300px); position: relative"
>
< map
id= "tmap"
: scale= "scale"
style= "width: 100%; height: 100%"
: latitude= "latitude"
: longitude= "longitude"
: covers= "covers"
show- location
@regionchange= "regionDidChange"
> < / map>
< image
src= "/static/images/datouzhen.png"
style= "
width : 100rpx;
height : 100rpx;
position : absolute;
left : 50 % ;
top : 50 % ;
z- index: 1 ;
margin- top: - 100rpx;
margin- left: - 50rpx;
"
/ >
< / view>
< view class = "bot" >
< view class = "inp1" >
< image
src= "http://image.qiniu.fangdadi.com/wxapp/aYuYue/sousuo.png"
/ > < input
type= "text"
placeholder= "搜索地点"
: value= "searchKey"
@input= "search"
style= "flex: 1"
/ >
< image
@click. stop. prevent= "clearVal"
v- show= "searchKey"
src= "http://image.qiniu.fangdadi.com/wxapp/aYuYue/shanchu.png"
/ >
< / view>
< view style= "margin-top: 20rpx" >
< view
v- for = "(item, index) in list"
: key= "item.id"
@click. stop. prevent= "changPoint(item, index)"
class = "list-item"
: style= "{ background: index == indexPoint ? '#f7f7f7' : 'white' }"
>
< view class = "list-tit" > { { item. title } } < / view>
< view style= "color: gray" class = "list-add" > { {
item. address
} } < / view>
< / view>
< / view>
< / view>
< / view>
< / view>
< ! -- 底部内容结束 -- >
< / view>
< / template>
< script>
import { suggestion, geocoderPoi, getDistance } from "../../api/booking" ;
var QQMapWX = require ( "static/qqmap-wx-jssdk.js" ) ;
var self;
var qqmapsdk = new QQMapWX ( {
key : "123" ,
} ) ;
export default {
name : "Rent" ,
data ( ) {
return {
pagesLength : 0 ,
searchKey : "" ,
rpxNavStatusBarHeight : "" ,
latitude : 0 ,
longitude : 0 ,
scale : 16 ,
list : [ ] ,
newhouselng : 0 ,
newhouseId : 0 ,
newhouselat : 0 ,
indexPoint : 0 ,
areaCode : 0 ,
isSearch : false ,
lng : 0 ,
lat : 0 ,
} ;
} ,
created ( ) {
this . key = getApp ( ) . globalData. TXMap;
} ,
onLoad ( option ) {
self = this ;
self. mapCtx = wx. createMapContext ( "tmap" ) ;
self. getAuthorizeInfo ( ) ;
qqmapsdk. key = getApp ( ) . globalData. TXMap;
this . winWidth = wx. getSystemInfoSync ( ) . windowWidth;
this . divWidth = this . winWidth * 0.96 * 0.48 ;
let systemInfo = wx. getSystemInfoSync ( ) ;
let clientWidth = systemInfo. windowWidth;
var changeHeight = 750 / clientWidth;
let statusBarHeight = Number ( systemInfo. statusBarHeight) ;
let menu = wx. getMenuButtonBoundingClientRect ( ) ;
let navStatusBarHeight =
statusBarHeight + ( menu. height + ( menu. top - statusBarHeight) * 2 ) ;
this . rpxNavStatusBarHeight = navStatusBarHeight * changeHeight;
if ( option) {
this . newhouseId = option. newhouseId;
this . newhouselng = option. newhouselng;
this . newhouselat = option. newhouselat;
this . areaCode = option. areaCode;
}
} ,
onShow ( ) {
const pages = getCurrentPages ( ) ;
this . pagesLength = pages. length;
} ,
methods : {
getLocationInfo ( ) {
let that = this ;
uni. getLocation ( {
type : "gcj02" ,
success ( res ) {
that. latitude = res. latitude;
that. longitude = res. longitude;
that. lng = res. longitude;
that. lat = res. latitude;
let data = { lat : res. latitude, lng : res. longitude } ;
geocoderPoi ( { data } ) . then ( ( res2 ) => {
that. list = [ ] ;
that. list = [ ... res2. data] ;
} ) ;
} ,
} ) ;
} ,
changPoint ( item, index ) {
this . indexPoint = index;
this . latitude = item. location. lat;
this . longitude = item. location. lng;
this . lat = item. location. lat;
this . lng = item. location. lng;
self. mapCtx. moveToLocation ( {
longitude : item. location. lng,
latitude : item. location. lat,
success : ( res ) => {
const time = setInterval ( ( ) => {
this . scale = 16 ;
clearInterval ( time) ;
} , 300 ) ;
} ,
} ) ;
} ,
regionDidChange ( e ) {
this . getCenterLocation ( e) ;
} ,
getCenterLocation : function ( e ) {
let that = this ;
if ( e. type == "end" && e. causedBy == "drag" ) {
let data = {
lat : e. detail. centerLocation. latitude,
lng : e. detail. centerLocation. longitude,
} ;
that. lat = e. detail. centerLocation. latitude;
that. lng = e. detail. centerLocation. longitude;
geocoderPoi ( { data } ) . then ( ( res2 ) => {
that. indexPoint = 0 ;
that. list = [ ] ;
that. list = [ ... res2. data] ;
that. num = 1 ;
} ) ;
}
} ,
search : function ( e ) {
if ( this . isSearch) {
return ;
}
let that = this ;
self. searchKey = e. detail. value;
let data = {
keyword : e. detail. value,
areaCode : this . areaCode. split ( "," ) [ 0 ] ,
} ;
this . isSearch = true ;
suggestion ( { data } ) . then ( ( res2 ) => {
that. indexPoint = 0 ;
that. list = [ ] ;
that. list = [ ... res2. data. data] ;
that. latitude = that. list[ 0 ] . location. lat;
that. longitude = that. list[ 0 ] . location. lng;
that. lat = that. list[ 0 ] . location. lat;
that. lng = that. list[ 0 ] . location. lng;
this . isSearch = false ;
} ) ;
} ,
clearVal : function ( item ) {
this . searchKey = "" ;
this . list = [ ] ;
} ,
getAuthorizeInfo ( ) {
uni. authorize ( {
scope : "scope.userLocation" ,
success ( ) {
self. getLocationInfo ( ) ;
} ,
fail ( ) {
self. openConfirm ( ) ;
console. log ( "你拒绝了授权，无法获得周边信息" ) ;
} ,
} ) ;
} ,
openConfirm ( ) {
uni. showModal ( {
title : "请求授权当前位置" ,
content : "需要获取您的地理位置，请确认授权" ,
success : ( res ) => {
if ( res. confirm) {
uni. openSetting ( ) ;
} else if ( res. cancel) {
uni. showToast ( {
title : "你拒绝了授权，无法获得周边信息" ,
icon : "none" ,
duration : 1000 ,
} ) ;
}
} ,
} ) ;
} ,
async submit ( ) {
let data = {
lng : this . lng,
lat : this . lat,
newhouseLng : this . newhouselng,
newhouseLat : this . newhouselat,
} ;
let res = await getDistance ( { data } ) ;
if ( res) {
if ( res. msg == "yes" ) {
let userinfo = this . list[ this . indexPoint] ;
var pages = getCurrentPages ( ) ;
var prevPage = pages[ pages. length - 2 ] ;
prevPage. $vm. userinfo = userinfo;
prevPage. setData ( {
userinfo,
} ) ;
uni. navigateBack ( ) ;
} else {
uni. showToast ( {
title : res. data,
icon : "none" ,
duration : 2000 ,
} ) ;
}
}
} ,
Cancel : function ( ) { } ,
goBack ( ) {
if ( this . pagesLength > 1 ) {
uni. navigateBack ( {
delta : 1 ,
} ) ;
} else {
uni. switchTab ( {
url : "/pages/home/home" ,
} ) ;
}
} ,
} ,
} ;
< / script>
< style lang= "scss" scoped>
. bot {
width : 100 % ;
height : 300px;
background : white;
z- index: 10000 ;
position : absolute;
padding : 20rpx;
bottom : 0 ;
left : 0 ;
border- radius: 40rpx 40rpx 0 0 ;
box- sizing: border- box;
overflow- x: hidden;
overflow- y: scroll;
- webkit- overflow- scrolling: touch;
. inp1 {
padding : 0 20rpx;
width : 100 % ;
line- height: 80rpx;
display : flex;
height : 80rpx;
border- radius: 10rpx;
align- items: center;
box- sizing: border- box;
background : #f5f5f5;
image {
width : 40rpx;
height : 40rpx;
margin- right: 20rpx;
}
}
}
. list- item {
width : 100 % ;
border- bottom: 1px solid #e9e9e9;
padding : 6rpx 10rpx;
box- sizing: border- box;
. list- tit {
width : 100 % ;
overflow : hidden;
text- overflow: ellipsis;
white- space: nowrap;
}
. list- add {
color : gray;
overflow : hidden;
font- size: 24rpx;
margin : 10rpx 0 0 0 ;
overflow : hidden;
text- overflow: ellipsis;
white- space: nowrap;
}
}
. btn- sub {
position : absolute;
right : 20px;
top : 100px;
z- index: 1 ;
background : #67e376 ;
color : white;
width : 160rpx;
height : 60rpx;
line- height: 60rpx;
font- size: 30rpx;
text- align: center;
border- radius: 5px;
}
< / style>
