<template><view style="background-color: #f5f5f5"><!-- 头部开始 --><viewstyle="position: fixed;left: -5rpx;right: -5rpx;z-index: 99;top: -5rpx;width: 101vw;"><view style="position: relative"><view :style="{ height: rpxNavStatusBarHeight + 5 + 'rpx' }"><textstyle="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',}"><viewstyle="width: 100%; position: relative":style="{ height: 'calc( 100vh - ' + rpxNavStatusBarHeight + 'rpx)' }"><viewstyle="width: 100%; height: calc(100% - 300px); position: relative"><mapid="tmap":scale="scale"style="width: 100%; height: 100%":latitude="latitude":longitude="longitude":covers="covers"show-location@regionchange="regionDidChange"></map><imagesrc="/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"><imagesrc="http://image.qiniu.fangdadi.com/wxapp/aYuYue/sousuo.png"/><inputtype="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"><viewv-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";
// 引入SDK核心类
var QQMapWX = require("static/qqmap-wx-jssdk.js");
var self;
// 实例化API核心类
var qqmapsdk = new QQMapWX({key: "123", // 必填
});
export default {name: "Rent",data() {return {pagesLength: 0,searchKey: "",// 地图rpxNavStatusBarHeight: "", // maplatitude: 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];// #ifdef H5prevPage.$vm.userinfo = userinfo;// #endif// #ifdef MP-WEIXINprevPage.setData({userinfo,});// #endifuni.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>