小程序地图检索

<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";
// 引入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: "", // map
      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];
          // #ifdef H5
          prevPage.$vm.userinfo = userinfo;
          // #endif
          // #ifdef MP-WEIXIN
          prevPage.setData({
            userinfo,
          });
          // #endif
          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>