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 = BMapthis.map = mapthis.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_idtimestamp: 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.BMapthis.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.addressComponentsthis.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);});})},