落日与鲸
2025-02-25 61baff2c6d976f64f34ed8f152854e3031462897
H5/pages/location/location.vue
@@ -11,7 +11,7 @@
      <view class=" main">
         <view class="searchMain  mb-35 mt-38">
            <view class="search fs-27 ">
               <text class="mr-35 ml-50">成都市</text>
               <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="搜索小区/写字楼等"
@@ -42,18 +42,12 @@
            map: null,
            uid: 0,
            keyword: '',
            markers:[],
            locationList: [],
            city: '攀枝花市'
         };
      },
      methods: {
         clearMarkers() {
            // 清除所有标点
            this.markers.forEach((marker) => {
               this.map.removeOverlay(marker);
            });
            this.markers = []; // 清空存储标点的数组
         },
         back() {
            uni.navigateBack()
         },
@@ -108,52 +102,87 @@
      },
      onReady() {
         this.map = new BMapGL.Map("container"); // 创建地图实例 
         console.log(this.map);
         // uni.getLocation({
         //    type: 'wgs84',
         //    success: (res) => {
         navigator.geolocation.getCurrentPosition(success, error, options);
         uni.getLocation({
            type: 'wgs84',
            success: (res) => {
               console.log(res, 'resgetLocation');
               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) => {
                  console.log(result, 'result');
                  this.locationList = result.surroundingPois.map((item, index) => {
                     item.id = index + 1
                     return item
                  })
         function success(position) {
            const latitude = position.coords.latitude;
            const longitude = position.coords.longitude;
            const accuracy = position.coords.accuracy; // 精度,单位米
               })
               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');
                     this.locationList = result.surroundingPois.map((item, index) => {
                        item.id = index + 1
                        return item
                     })
            console.log(`纬度: ${latitude}, 经度: ${longitude}, 精度: ${accuracy}`);
            //  在这里可以使用获取到的经纬度信息,例如在地图上显示位置等。
         }
                  })
                  var marker = new BMapGL.Marker(point);
                  this.map.addOverlay(marker);
                    this.markers.push(marker);
               });
         function error(err) {
            console.log(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);
         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) => {
            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');
               this.locationList = result.surroundingPois.map((item, index) => {
                  item.id = index + 1
                  return item
               })
            })
            var marker = new BMapGL.Marker(point);
            this.map.addOverlay(marker);
         });
         // },
         // error:err=>{
         //    console.log(err,'err');
         // }
         // });
      }
   }