pyt
2025-02-24 b31c7c629a2efddc53c89b8f0df0de0e2a33e8d9
H5/pages/location/location.vue
@@ -1,29 +1,31 @@
<template>
   <view class="content">
      <u-navbar title="选择地点" bgColor="transparent" titleStyle="font-size: 35rpx;font-weight:bold;" placeholder>
         <view slot="left">
         <view slot="left" @click="back">
            <image src="/static/location/back.png" class="w-19 h-35" mode=""></image>
         </view>
      </u-navbar>
      <view class="" id="container">
      <view class="" id="container" @regionchange="onRegionChange">
         
      </view>
      <view class="">
         <view class="searchMain mb-35">
      <view class=" main">
         <view class="searchMain  mb-35 mt-38">
            <view class="search fs-27 ">
               <text class="mr-35 ml-50">成都市</text>
               <image class="w-17 h-8 mr-35" src="/static/location/toleft.png" mode=""></image>
               <image class="w-31 h-31 mr-13" src="/static/location/search.png" mode=""></image>
               <input class="flex1" placeholder="搜索小区/写字楼等" placeholder-style="font-size:27rpx"></input>
               <view class="sure">
               <input class="flex1" v-model="keyword" placeholder="搜索小区/写字楼等"
                  placeholder-style="font-size:27rpx"></input>
               <view class="sure" @click="searchLocation">
                  确定
               </view>
            </view>
         </view>
         <view class="card" :class="" v-for="item in 5">
            <text>天府新谷九号楼二单元</text>
            <text class="font-w500 fs-23 mt-25" style="color: rgba(0, 0, 0, 0.6);">四川省成都市高新区府城大道西段399号天</text>
         <view class="card" @click="changeAdr(item.id,item)" :class="item.id ==uid ?'activecard':''"
            v-for="item in locationList" :key="item.id">
            <text>{{item.address}}</text>
            <text class="font-w500 fs-23 mt-25" style="color: rgba(0, 0, 0, 0.6);">{{item.address}}</text>
         </view>
      </view>
@@ -37,15 +39,91 @@
         return {
            latitude: 39.909,
            longitude: 116.39742,
            map: null,
            uid: 0,
            keyword: '',
            locationList: [],
         };
      },
      mounted() {
      methods: {
         back() {
            uni.navigateBack()
         },
         onRegionChange(e) {
            if (e.type === 'end') {
               // 地图移动结束时执行操作
               console.log('地图移动结束,新的中心点经度:', e.longitude, '新的中心点纬度:', e.latitude);
            }
         },
         changeAdr(value, addr) {
            console.log(value, addr, 'asdasdada');
            this.uid = value
            const pages = getCurrentPages()
            let prevPage = pages[pages.length - 2];
            prevPage.location = addr.address
            setTimeout(() => {
               uni.navigateBack()
            }, 500)
         },
         // 搜索地点
         searchLocation() {
            if (!this.keyword) return;
            uni.request({
               url: `https://api.map.baidu.com/place/v2/search`,
               method: 'GET',
               data: {
                  query: this.keyword,
                  location: `${30.39},${104.04}`,
                  radius: 10000, // 搜索半径,单位:米
                  output: 'json',
                  ak: '3mHKIXMArjgIkgADzOlTYp4XssNSNkwr' // 替换为你自己的 AK
               },
               success: (res) => {
                  console.log(res, '-------');
                  if (res.data.status === 0) {
                     this.searchResults = res.data.results;
                     this.latitude = res.data.results[0].location.lat
                     this.longitude = res.data.results[0].location.lng
                     this.locationList = res.data.results.map((result, index) => {
                        result.id = index + 1
                        return result
                     });
                  }
               },
               fail: (err) => {
                  console.error('搜索失败:', err);
               }
            });
         },
      },
      onLoad() {
         
      },
       onReady() {
          var map = new BMapGL.Map("container");          // 创建地图实例
          var point = new BMapGL.Point(116.404, 39.915);  // 创建点坐标
          map.centerAndZoom(point, 15);
         this.map = new BMapGL.Map("container"); // 创建地图实例
         uni.getLocation({
            type: 'wgs84',
            success: (res) => {
               console.log(res, 'res');
               this.longitude = res.longitude;
               this.latitude = res.latitude;
               var point = new BMapGL.Point(res.longitude, res.latitude); // 创建点坐标
               this.map.centerAndZoom(point, 12);
               var myGeo = new BMapGL.Geocoder();
               // 根据坐标得到地址描述
               myGeo.getLocation(new BMapGL.Point(res.longitude, res.latitude), (result) => {
                  console.log(result, 'result');
                  this.locationList = result.surroundingPois.map((item, index) => {
                     item.id = index + 1
                     return item
                  })
               })
            }
         });
       }
   }
</script>
@@ -53,14 +131,29 @@
<style lang="scss" scoped>
   #container {
      width: 100vw;
      height: 517rpx;
      height: 534rpx;
   }
   .content {
      display: flex;
      flex-direction: column;
      align-items: center;
      .main {
         background-color: #fff;
         border-radius: 34rpx;
         position: absolute;
         top: 517rpx;
         z-index: 100;
         .activecard {
            background: #F2F2F2;
   }
      }
   }
   .searchMain {
      padding-left: 40rpx;
@@ -101,7 +194,7 @@
      font-size: 31rpx;
      color: rgba(0, 0, 0, 0.8);
      padding: 34rpx 38rpx 33rpx 38rpx;
      background: #F2F2F2;
      background: #fff;
      border-bottom: 2rpx solid rgba(0, 10, 26, 0.07);
   }
</style>