2024-06-24 百度地图的使用及gps定位坐标获取

1.百度地图的使用教程

2. 定位功能的实现

第一种：通过h5自带定位获取当前gps坐标

        var options = {
          enableHighAccuracy: true,
          timeout: 5000,
          maximumAge: 0
        };
        
        function success(pos) {
          var crd = pos.coords;
          alert(crd.latitude+'---'+crd.longitude+'---'+crd.accuracy);
          console.log(`经度：${crd.latitude}`);
          console.log(`纬度：${crd.longitude}`);
          console.log(`误差：${crd.accuracy} 米`);
        }
        
        function error(err) {
          console.log(err);
          alert(err);
          console.warn(`ERROR(${err.code}): ${err.message}`);
        }
        
        navigator.geolocation.getCurrentPosition(success, error, options);

第二种：通过野生接口获取（不推荐）
因为如果平时用着玩没问题，一旦部署会引起跨域问题，需要后端或平台将接口添加白名单，另外的缺点是不稳定

    request({
      url: 'http://ipwho.is/', // 野生gps定位接口
      method: 'get',
    }).then(res => {
      this.CountryOptions.forEach((item, index) => {
        if (item.remark) {
          let remark = JSON.parse(item.remark);
          if (remark.en_code_short == res.country_code) {
            this.countryName = remark.cn_name_short;
          }
        }

      })
      this.locations.lat = res.latitude;
      this.locations.lng = res.longitude
    })

第三种：通过平台提供的位置定位api（需要鉴权）
本项目为移动端项目，发布到welink平台中进行测试，本次定位使用了平台提供的api，由于定位获取需要用户手动给权限，所以需要做鉴权处理，使用方式详见官方手册。
API：HWH5.getLocation - welink使用手册

//地图加载
    handler({
      BMap,
      map
    }) {
      this.BMap = BMap
      this.map = map
      this.center = ''
      this.zoom = 15;
      
      const formData = new FormData(); // formData 格式参数
      formData.append('url', window.location.href);

      JSAPI(formData).then(response =>{  // 请求后台接口 获取鉴权信息
      
        // 进行鉴权
        HWH5.config({
          appId: response.data.appId, // 应用的client_id
          timestamp: response.data.timestamp, // 与生成签名一致的时间戳，精确到秒十位
          noncestr: response.data.noncestr, // 服务端使用的随机串
          signature: response.data.signature, // 签名信息
          jsApiList: ['getLocation']
        })

        /* 如果鉴权成功，会执行ready方法，把需要在页面加载时调用的相关接口放在ready中确保执行。
        需要用户触发时才调用的接口，则直接调用，不需要放在ready函数中。*/
        HWH5.ready(() => {
          console.log('鉴权成功---');
          HWH5.getLocation({ type: 1 }).then(res => {
            console.log(res,'getLocationgetLocation');
	
			// 处理数据
            this.CountryOptions.forEach((item, index) => {
              if (item.remark != undefined) {
                if (JSON.parse(item.remark).cn_name_short == res.country) {
                  this.countryName = item.dictLabel;
                  this.countryCode = JSON.parse(item.remark).en_code_short
                }
              }
            })

            this.lat = res.latitude;
            this.lng = res.longitude;
            this.locations.lng = this.lng;
            this.locations.lat = this.lat;
			
			// 定点
            const BMapGL = this.BMap
            this.point = new BMapGL.Point(this.locations.lng, this.locations.lat)
            const marker = new BMapGL.Marker(this.point)
            map.addOverlay(marker)
            const geoc = new BMapGL.Geocoder()
            console.log(this.point, 300);
            geoc.getLocation(this.point, (rs) => {
              const addressComp = rs.addressComponents
              this.Address = addressComp.province + addressComp.city + addressComp.district +
                addressComp.street + addressComp.streetNumber;
              console.log(rs, 909);
            })

          }).catch(error => {
            console.log('获取位置信息异常', error);
          });
        });

        // 如果鉴权失败，则调用error方法
        HWH5.error(err => {
          console.log('鉴权失败---', err);
        });
      })
    },