fix

pyt

2025-03-03 27b9723292a2095f7e06d0984ccefc15443d054c

 H5/pages/location/location.vue

@@ -1,298 +1,295 @@
<template>
   <view class="content">
      <view slot="left" @click="back">
         <image src="/static/location/back.png" class="w-19 h-35" mode=""></image>
      </view>
      <view class="" id="container">

      </view>
      <view class=" main">
         <view class="searchMain  mb-35 mt-38">
            <view class="search fs-27 ">
               <text class="mr-35 ml-50">{{ city }}</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" v-model="keyword" placeholder="搜索小区/写字楼等"
                  placeholder-style="font-size:27rpx"></input>
               <view class="sure" @click="searchLocation">
                  确定
               </view>
            </view>

         </view>
         <view class="card" @click="changeAdr(item.id,item)" :class="item.id ==uid ?'activecard':''"
            v-for="item in locationList" :key="item.id">
            <text>{{item.title || item.name}}</text>
            <text class="font-w500 fs-23 mt-25"
               style="color: rgba(0, 0, 0, 0.6);">{{item.address || item.name}}</text>

         </view>
      </view>

   </view>
</template>

<script>
   import {
      searchLocation
   } from './service'
   export default {
      data() {
         return {
            latitude: 39.909,
            longitude: 116.39742,
            map: null,
            uid: 0,
            keyword: '',
            locationList: [],
            city: '攀枝花市',
            markers: [],
         };
      },
      methods: {
         clearMarkers() {
            // 清除所有标点
            this.markers.forEach((marker) => {
               this.map.removeOverlay(marker);
            });
            this.markers = []; // 清空存储标点的数组
         },
         back() {
            uni.navigateBack()
         },

         changeAdr(value, addr) {
            this.uid = value
            const pages = getCurrentPages()
            let prevPage = pages[pages.length - 2];

            if (addr.point) {
               prevPage.latitude = addr.point.lat
               prevPage.longitude = addr.point.lng
            }
            if (addr.location) {
               prevPage.latitude = addr.location.lat
               prevPage.longitude = addr.location.lng
            }
            prevPage.location = addr.address || addr.name
            setTimeout(() => {
               uni.navigateBack()
            }, 200)
         },
         // 搜索地点
         searchLocation() {
            if (!this.keyword) return;
            searchLocation({
               query: this.keyword,
               location: `${this.latitude},${this.longitude }`,
            }).then(res => {
               if (res.code == 200) {
                  this.searchResults = res.data;
                  if (res.data.length > 0) {
                     this.latitude = res.data[0].location.lat
                     this.longitude = res.data[0].location.lng
                  }
                  this.locationList = res.data.map((result, index) => {
                     result.id = index + 1
                     return result
                  });

               }
            })
            return
            uni.request({
               url: `https://api.map.baidu.com/place/v2/search`,
               method: 'GET',
               data: {
                  query: this.keyword,
                  location: `${this.latitude},${this.longitude }`,
                  radius: 10000, // 搜索半径，单位：米
                  output: 'json',
                  ak: '3mHKIXMArjgIkgADzOlTYp4XssNSNkwr' // 替换为你自己的 AK
               },
               success: (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() {
         this.map = new BMapGL.Map("container"); // 创建地图实例 

         // uni.getLocation({
         //    type: 'wgs84',
         //    success: (res) => {
         navigator.geolocation.getCurrentPosition(success, error, options);

         function success(position) {
            let that = this
            const latitude = position.coords.latitude;
            const longitude = position.coords.longitude;
            const accuracy = position.coords.accuracy; // 精度，单位米

            that.latitude = latitude
            that.latitude = latitude
            //  在这里可以使用获取到的经纬度信息，例如在地图上显示位置等。
         }

         function error(err) {

            switch (err.code) {
               case err.PERMISSION_DENIED:
                  console.error("用户拒绝了位置请求。");
                  break;
               case err.POSITION_UNAVAILABLE:
                  console.error("无法获取位置信息。");
                  break;
               case err.TIMEOUT:
                  console.error("位置请求超时。");
                  break;
               default:
                  console.error("未知错误。");
            }
         }

         const options = {
            enableHighAccuracy: true, // 启用高精度定位
            timeout: 5000, // 5 秒超时
            maximumAge: 0 //  不使用缓存
         };
         // let res = {
         //    longitude: 101.725544,
         //    latitude: 26.587259
         // }
         this.longitude = res.longitude;
         this.latitude = res.latitude;
         var point = new BMapGL.Point(res.longitude, res.latitude); // 创建点坐标
         this.map.enableScrollWheelZoom(true);
         this.map.centerAndZoom(point, 12);
         var marker = new BMapGL.Marker(point);
         this.map.addOverlay(marker);
         this.markers.push(marker);
         var myGeo = new BMapGL.Geocoder();
         // 根据坐标得到地址描述    
         myGeo.getLocation(new BMapGL.Point(res.longitude, res.latitude), (result) => {
            this.locationList = result.surroundingPois.map((item, index) => {
               item.id = index + 1
               return item
            })

         })
         this.map.addEventListener('click', (e) => {
            this.clearMarkers()
            var mercator = this.map.lnglatToMercator(e.latlng.lng, e.latlng.lat);
            this.latitude = e.latlng.lat
            this.longitude = e.latlng.lng
            var point = new BMapGL.Point(e.latlng.lng, e.latlng.lat);
            this.map.centerAndZoom(point, 12);
            var myGeo = new BMapGL.Geocoder();
            // 根据坐标得到地址描述    
            myGeo.getLocation(new BMapGL.Point(e.latlng.lng, e.latlng.lat), (result) => {

               this.locationList = result.surroundingPois.map((item, index) => {
                  item.id = index + 1
                  return item
               })

            })
            var marker = new BMapGL.Marker(point);
            this.map.addOverlay(marker);
            this.markers.push(marker);
         });
         // },
         // error:err=>{
         // 	
         // }
         // });

      }
   }
</script>

<style lang="scss" scoped>
   #container {
      width: 100vw;
      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;
      padding-right: 40rpx;
      border-radius: 40rpx;

      .search {
         width: 669rpx;
         height: 77rpx;
         background: #FFFFFF;
         border-radius: 38rpx;
         border: 2rpx solid #DADADA;
         display: flex;

         align-items: center;
         justify-content: space-between;
      }
   }


   .sure {
      width: 104rpx;
      height: 69rpx;
      background: linear-gradient(270deg, #FC8D55 0%, #FF4948 100%);
      border-radius: 48rpx;
      font-weight: 500;
      font-size: 23rpx;
      color: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: center;
   }

   .card {
      display: flex;
      flex-direction: column;
      font-weight: 800;
      font-size: 31rpx;
      color: rgba(0, 0, 0, 0.8);
      padding: 34rpx 38rpx 33rpx 38rpx;
      background: #fff;
      border-bottom: 2rpx solid rgba(0, 10, 26, 0.07);
   }
<template>

   <view class="content">

      <view slot="left" @click="back">

         <image src="/static/location/back.png" class="w-19 h-35" mode=""></image>

      </view>

      <view class="" id="container">



      </view>

      <view class=" main">

         <view class="searchMain  mb-35 mt-38">

            <view class="search fs-27 ">

               <text class="mr-35 ml-50">{{ city }}</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" v-model="keyword" placeholder="搜索小区/写字楼等"

                  placeholder-style="font-size:27rpx"></input>

               <view class="sure" @click="searchLocation">

                  确定

               </view>

            </view>



         </view>

         <view class="card" @click="changeAdr(item.id,item)" :class="item.id ==uid ?'activecard':''"

            v-for="item in locationList" :key="item.id">

            <text>{{item.title || item.name}}</text>

            <text class="font-w500 fs-23 mt-25"

               style="color: rgba(0, 0, 0, 0.6);">{{item.address || item.name}}</text>



         </view>

      </view>



   </view>

</template>



<script>

   import {

      searchLocation

   } from './service'

   export default {

      data() {

         return {

            latitude: 39.909,

            longitude: 116.39742,

            map: null,

            uid: 0,

            keyword: '',

            locationList: [],

            city: '攀枝花市',

            markers: [],

         };

      },

      methods: {

         clearMarkers() {

            // 清除所有标点

            this.markers.forEach((marker) => {

               this.map.removeOverlay(marker);

            });

            this.markers = []; // 清空存储标点的数组

         },

         back() {

            uni.navigateBack()

         },



         changeAdr(value, addr) {

            this.uid = value

            const pages = getCurrentPages()

            let prevPage = pages[pages.length - 2];



            if (addr.point) {

               prevPage.latitude = addr.point.lat

               prevPage.longitude = addr.point.lng

            }

            if (addr.location) {

               prevPage.latitude = addr.location.lat

               prevPage.longitude = addr.location.lng

            }

            prevPage.location = addr.address || addr.name || addr.title

            setTimeout(() => {

               uni.navigateBack()

            }, 200)

         },

         // 搜索地点

         searchLocation() {

            if (!this.keyword) return;

            searchLocation({

               query: this.keyword,

               location: `${this.latitude},${this.longitude }`,

            }).then(res => {

               if (res.code == 200) {

                  this.searchResults = res.data;

                  if (res.data.length > 0) {

                     this.latitude = res.data[0].location.lat

                     this.longitude = res.data[0].location.lng

                  }

                  this.locationList = res.data.map((result, index) => {

                     result.id = index + 1

                     return result

                  });



               }

            })

            return

            uni.request({

               url: `https://api.map.baidu.com/place/v2/search`,

               method: 'GET',

               data: {

                  query: this.keyword,

                  location: `${this.latitude},${this.longitude }`,

                  radius: 10000, // 搜索半径，单位：米

                  output: 'json',

                  ak: '3mHKIXMArjgIkgADzOlTYp4XssNSNkwr' // 替换为你自己的 AK

               },

               success: (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() {

         this.map = new BMapGL.Map("container"); // 创建地图实例 
         const that = this

         // uni.getLocation({

         //    type: 'wgs84',

         //    success: (res) => {

         navigator.geolocation.getCurrentPosition(success, error, options);



         function success(position) {

            const latitude = position.coords.latitude;

            const longitude = position.coords.longitude;

            const accuracy = position.coords.accuracy; // 精度，单位米

            //  在这里可以使用获取到的经纬度信息，例如在地图上显示位置等。

            var point = new BMapGL.Point(longitude, latitude); // 创建点坐标

            that.map.enableScrollWheelZoom(true);

            that.map.centerAndZoom(point, 12);

            var marker = new BMapGL.Marker(point);

            that.map.addOverlay(marker);

            that.markers.push(marker);

            var myGeo = new BMapGL.Geocoder();

            // 根据坐标得到地址描述    
            myGeo.getLocation(new BMapGL.Point(longitude, latitude), (result) => {

               that.locationList = result.surroundingPois.map((item, index) => {

                  item.id = index + 1

                  return item

               })

            })

         }



         function error(err) {



            switch (err.code) {

               case err.PERMISSION_DENIED:

                  console.error("用户拒绝了位置请求。");

                  break;

               case err.POSITION_UNAVAILABLE:

                  console.error("无法获取位置信息。");

                  break;

               case err.TIMEOUT:

                  console.error("位置请求超时。");

                  break;

               default:

                  console.error("未知错误。");

            }

         }



         const options = {

            enableHighAccuracy: true, // 启用高精度定位

            timeout: 5000, // 5 秒超时

            maximumAge: 0 //  不使用缓存

         };

         this.map.addEventListener('click', (e) => {

            this.clearMarkers()

            var mercator = this.map.lnglatToMercator(e.latlng.lng, e.latlng.lat);

            this.latitude = e.latlng.lat

            this.longitude = e.latlng.lng

            var point = new BMapGL.Point(e.latlng.lng, e.latlng.lat);

            this.map.centerAndZoom(point, 12);

            var myGeo = new BMapGL.Geocoder();

            // 根据坐标得到地址描述    
            myGeo.getLocation(new BMapGL.Point(e.latlng.lng, e.latlng.lat), (result) => {

               console.log(result,'result');

               if( result.surroundingPois.length>0){

                  this.locationList = result.surroundingPois.map((item, index) => {

                     item.id = index + 1

                     return item

                  })

               }else{

                  this.locationList =[{

                     id:1,

                     title:result.address,

                     point:{lat:e.latlng.lat,lng:e.latlng.lng}

                  }]

               }

					
            })

            var marker = new BMapGL.Marker(point);

            this.map.addOverlay(marker);

            this.markers.push(marker);

         });

         // },

         // error:err=>{

         // 	
         // }

         // });



      }

   }

</script>



<style lang="scss" scoped>

   #container {

      width: 100vw;

      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;

      padding-right: 40rpx;

      border-radius: 40rpx;



      .search {

         width: 669rpx;

         height: 77rpx;

         background: #FFFFFF;

         border-radius: 38rpx;

         border: 2rpx solid #DADADA;

         display: flex;



         align-items: center;

         justify-content: space-between;

      }

   }





   .sure {

      width: 104rpx;

      height: 69rpx;

      background: linear-gradient(270deg, #FC8D55 0%, #FF4948 100%);

      border-radius: 48rpx;

      font-weight: 500;

      font-size: 23rpx;

      color: #FFFFFF;

      display: flex;

      align-items: center;

      justify-content: center;

   }



   .card {

      display: flex;

      flex-direction: column;

      font-weight: 800;

      font-size: 31rpx;

      color: rgba(0, 0, 0, 0.8);

      padding: 34rpx 38rpx 33rpx 38rpx;

      background: #fff;

      border-bottom: 2rpx solid rgba(0, 10, 26, 0.07);

   }

</style>