百度地图api采坑指南

编程语言 2022-06-30 03:55:49 阅读次数: 0

一 网址

二 专项

1. 我发现使用相同的经纬度放在百度地图和高德地图的官网网站上查询地址不一样，需要相互装换。

  • 将百度地图经纬度转换为腾讯/高德地图经纬度
    bMapTransQQMap(lng, lat) {
        let x_pi = 3.14159265358979324 * 3000.0 / 180.0;
        let x = lng - 0.0065;
        let y = lat - 0.006;
        let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
        let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
        let lngs = z * Math.cos(theta);
        let lats = z * Math.sin(theta);
        
        return {
            lng: lngs,
            lat: lats        
        }   
    }
  • 将腾讯/高德地图经纬度转换为百度地图经纬度
    qqMapTransBMap(lng, lat) {
        let x_pi = 3.14159265358979324 * 3000.0 / 180.0;
        let x = lng;
        let y = lat;
        let z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi);
        let theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi);
        let lngs = z * Math.cos(theta) + 0.0065;
        let lats = z * Math.sin(theta) + 0.006;
    
        return {
            lng: lngs,
            lat: lats 
        } 
    }

2. 百度地图获取当前定位经纬度

  • new BMapGL.Geolocation()只能获取到市政府的位置，具体原因不知道。。。
        const geolocation = new BMapGL.Geolocation(); // 获取当前位置

        // 开启SDK辅助定位
        // geolocation.enableSDKLocation();
        geolocation.getCurrentPosition((r) => {
          // window.alert(JSON.stringify(r));

          if (geolocation.getStatus() === window.BMAP_STATUS_SUCCESS) {
            const point = new BMapGL.Point(r.point.lng, r.point.lat); // 创建坐标
            const Mark = new BMapGL.Marker(point); // 初始化终点标记
            this.mapRef.current.addOverlay(Mark); // 在地图上添加点标记
           
        });

3. 通过经纬度获取地址地名

    const gc = new BMapGL.Geocoder();
    gc.getLocation(endPoint, (rs) => {
      const addComp = rs.addressComponents;
      console.log(addComp);
      // {"streetNumber":"xxx号","street":"xxx路","district":"xxx区","city":"xxx市","province":"xx省"}
    });

4. H5 唤起百度地图高德地图

  • 唤起高德地图

export const gaodeMapApp = () => {
// mode: car 驾车, bus 公交, ride 骑车, walk 步行

  if (isIOS) {
    // 这个是ios操作系统
    window.location.href = `iosamap://viewMap?sourceApplication=appname&poiname=${地址名}&lat=${纬度}&lon=${经度}&dev=0`;

    if (!mcBizApp.isPajkApp()) {
      const d = new Date();
      const t0 = d.getTime();
      // 由于打开需要1～2秒，利用这个时间差来处理－－打开app后，返回h5页面会出现页面变成app下载页面，影响用户体验
      const delay = setInterval(() => {
        const d1 = new Date();
        const t1 = d1.getTime();
        if (t1 - t0 < 3000 && t1 - t0 > 2000) {
          window.location.href = `https://uri.amap.com/navigation?from=${起点纬度},${起点经度},${起点名}&to=${终点纬度},${终点经度},${终点名}&mode=${公交方式}&callnative=1&coordinate=wgs84&src=mypage`;
        }
        if (t1 - t0 >= 3000) {
          clearInterval(delay);
        }
      }, 1000);
    }
  } else {
    // 这个是安卓操作系统
    window.location.href = `androidamap://viewMap?sourceApplication=appname&poiname=${终点名}&lat=${终点纬度}&lon=${终点经度}&dev=0&&coord_type=bd09ll`;
      const d = new Date();
      const t0 = d.getTime();
      // 由于打开需要1～2秒，利用这个时间差来处理－－打开app后，返回h5页面会出现页面变成app下载页面，影响用户体验
      const delay = setInterval(() => {
        const d2 = new Date();
        const t1 = d2.getTime();
        if (t1 - t0 < 3000 && t1 - t0 > 2000) {
          window.location.href = `https://uri.amap.com/navigation?from=${起点纬度},${起点经度},${起点名}&to=${终点纬度},${终点经度},${终点名}&mode=${公交方式}&callnative=1&coordinate=wgs84&src=mypage`;
          console.log('delay -> window.location.href', window.location.href);
        }
        if (t1 - t0 >= 3000) {
          clearInterval(delay);
        }
      }, 1000);
    }
};
  • 唤起百度地图
export const baiduMapApp = () => {
// mode: driving 驾车, transit 公交, 和riding 骑车, walking 步行

  if (startLat && startLon) {
    let scheme = '';
    const queryStr = `?origin=name:地点名（我的位置）|latlng:${起点纬度},${起点经度}&destination=${终点纬度},${终点经度}&region=上海&coord_type=bd09ll&mode=${交通方式}`;

    if (isIOS()) {
      // ios 端
      scheme = `bdapp://map/direction${queryStr}`;
    } else {
      // android 端
      scheme = `baidumap://map/direction${queryStr}`;
    }
    window.location.href = scheme;
      const startTime = Date.now();
      let count = 0;
      let endTime = 0;
      const t = setInterval(() => {
        count += 1;
        endTime = Date.now() - startTime;
        if (endTime > 800) {
          clearInterval(t);
        }
        if (count < 30) return;
        if (!(document.hidden || document.webkitHidden)) {
          window.location.href = `http://api.map.baidu.com/direction${queryStr}&output=html`;
        }
      }, 20);

      window.onblur = () => {
        clearInterval(t);
      };
  } else {
    console.log('获取不到定位，请检查手机定位设置');
  }
};

五. 搜索关键词获取地址列表

function () {
    const searchComplete = (results) => {
     console.log(results)
    };
    const local = new BMapGL.LocalSearch(this.mapRef.current, {
      renderOptions: {
      },
      onSearchComplete: searchComplete,

    });
    local.search(searchInputStart);
  }

六. 点击齿轮定位回到当前位置


    const startPoint = new BMapGL.Point(起点纬度, 起点经度);
    this.mapRef.current.centerAndZoom(startPoint, 15);
    const point = new BMapGL.Point(起点纬度, 起点经度); // 创建点坐标A
    const startMark = new BMapGL.Marker(point); // 初始化起点标记
    this.mapRef.current.addOverlay(startMark); // 在地图上添加点起点标记

七. 清除地图上的覆盖物（切换路线用到）

    this.mapRef.current.clearOverlays();

八. 获取两点距离

getLineDistance = () => {
        const pointA = new BMapGL.Point(终点纬度, 终点经度); // 创建点坐标A
        const pointB = new BMapGL.Point(起点纬度, 起点经度); // 创建点坐标B
        const startMarkA = new BMapGL.Marker(pointA); // 初始化起点标记
        const startMarkB = new BMapGL.Marker(pointB); // 初始化终点标记
        this.mapRef.current.addOverlay(startMarkA); // 在地图上添加点起点标记
        this.mapRef.current.addOverlay(startMarkB); // 在地图上添加点终点标记
        console.log(this.mapRef.current.getDistance(pointA, pointB));
}

九. 格式化时间地点

  • 格式化距离

export const getDistance = (distance, isObj = false) => {
  if (distance < 1000) {
    if (isObj) {
      return [{
        data: distance,
        unit: 'm',
      }];
    }
    return `${distance}m`;
  } if (distance > 1000) {
    if (isObj) {
      return [
        {
          data: (Math.round(distance / 100) / 10).toFixed(1),
          unit: 'km',
        },
      ];
    }
    return `${(Math.round(distance / 100) / 10).toFixed(1)}km`;
  }
};
  • 格式化时间
export const getDuration = (duration, isObj = false) => {
  const days = parseInt((duration * 1000) / (1000 * 60 * 60 * 24), 10);
  const hours = parseInt(((duration * 1000) % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60), 10);
  const minutes = parseInt(((duration * 1000) % (1000 * 60 * 60)) / (1000 * 60), 10);
  let str = '';
  const arr = [];
  if (days) {
    str += `${days}天`;
    arr.push({
      data: days,
      unit: '天',
    });
  }
  if (hours) {
    str += `${hours}小时`;
    arr.push({
      data: hours,
      unit: '小时',
    });
  }
  if (minutes) {
    str += `${minutes}分钟`;
    arr.push({
      data: minutes,
      unit: '分钟',
    });
  }
  if (isObj) {
    return arr.length ? arr : [{
      data: 1,
      unit: '分钟',
    }];
  }
  return str || '1分钟';
};

十. 交通方式

  • 驾车

  drive = () => {

    this.mapRef.current.clearOverlays(); // 清除覆盖物
    const endPoint = new BMapGL.Point(终点纬度, 终点经度);
    const startPoint = new BMapGL.Point(起点纬度, 起点经度);

    this.mapRef.current.centerAndZoom(startPoint, 12);
    const searchComplete = (results) => {
      if (!results._distance) {
      console.log('我没有路线推荐')
      }
      if (driveRoute.getStatus() !== window.BMAP_STATUS_SUCCESS) {
        return;
      }
      const plan = results.getPlan(0);
      console.log(plan)
      const duration = `${plan._duration}`;
      const distance = `${plan._distance}`;
    };

    const driveRoute = new BMapGL.DrivingRoute(this.mapRef.current, {
      renderOptions: { map: this.mapRef.current, autoViewport: true },
      onSearchComplete: searchComplete,
    }); // 获取路径信息
    driveRoute.search(startPoint, endPoint); // 绘制路径
  }
  • 公交
    • 公交返回数据之后自定义设计图，点击对应的交通路线，未找到方法重新绘制公交路线，才用切换策略取第一条路线。

  bus = (tipId, isSearch = false) => {

    this.mapRef.current.clearOverlays(); // 清除覆盖物
    const endPoint = new BMapGL.Point(终点纬度, 终点经度);
    const startPoint = new BMapGL.Point(起点纬度, 起点经度);
    this.mapRef.current.centerAndZoom(startPoint, 12);
    const tempArr = [];

    // '时间最少 换乘最少 步行最少'.split(' ');
    // 'BMAP_TRANSIT_POLICY_RECOMMEND BMAP_TRANSIT_POLICY_LEAST_TRANSFER BMAP_TRANSIT_POLICY_LEAST_WALKING'.split(' ');
    let tempData;

    const busRoute = new BMapGL.TransitRoute(this.mapRef.current, {
      renderOptions: {
        map: this.mapRef.current,
        // panel: 'result',
        // selectFirstResult: false,
        autoViewport: true,
      },
      policy: BMAP_TRANSIT_POLICY_LEAST_WALKING,
      onSearchComplete: (result) => {
        if (!result._plans) {
           console.log('无推荐路线')
          return;
        }
        // 路线成功后才继续获取
        if (busRoute.getStatus() === BMAP_STATUS_SUCCESS) {
          console.log(result)
        }
      },
    });
    if (isSearch) {
      busRoute.setPolicy(window[tipId]);
      busRoute.search(startPoint, endPoint);
      return;
    }
    busRoute.setPolicy(BMAP_TRANSIT_POLICY_LEAST_WALKING); // 改变策略
    busRoute.search(startPoint, endPoint);
  }
  • 骑行
  bike = () => {
    this.mapRef.current.clearOverlays(); // 清除覆盖物
    const endPoint = new BMapGL.Point(终点纬度, 终点经度);
    const startPoint = new BMapGL.Point(起点纬度, 起点经度);
    this.mapRef.current.centerAndZoom(startPoint, 12);
    const searchComplete = (results) => {
      if (!results._distance) {
        console.log(没有路线)
      }
      if (bikeRoute.getStatus() !== window.BMAP_STATUS_SUCCESS) {
        return;
      }
      const plan = results.getPlan(0);
      const duration = `${plan._duration}`;
      const distance = `${plan._distance}`;
    };
    const bikeRoute = new BMapGL.RidingRoute(this.mapRef.current, {
      renderOptions: { map: this.mapRef.current, autoViewport: true },
      onSearchComplete: searchComplete,
    }); // 获取路径信息
    bikeRoute.search(startPoint, endPoint); // 绘制路径
  }
  • 步行

  walk = () => {
    this.mapRef.current.clearOverlays(); // 清除覆盖物
    const endPoint = new BMapGL.Point(终点纬度, 终点经度);
    const startPoint = new BMapGL.Point(起点纬度, 起点经度);
    this.mapRef.current.centerAndZoom(startPoint, 12);
    const searchComplete = (results) => {
      if (!results._distance) {
        console.log(没有路线)
      }
      if (walkRoute.getStatus() !== window.BMAP_STATUS_SUCCESS) {
        return;
      }

      const plan = results.getPlan(0);
      const duration = `${plan._duration}`;
      const distance = `${plan._distance}`;
      this.setState({
        duration, // 获取时间
        distance, // 获取距离
      });
    };
    const walkRoute = new BMapGL.WalkingRoute(this.mapRef.current, {
      renderOptions: { map: this.mapRef.current, autoViewport: true },
      onSearchComplete: searchComplete,
    }); // 获取路径信息
    walkRoute.search(startPoint, endPoint); // 绘制路径
  }

猜你喜欢

转载自juejin.im/post/7081562514684641294
今日推荐
周排行
教你如何约女孩子的方式去理解（TCP三次握手与四次挥手）
android按压背景
【量化小讲堂-Python&amp;Pandas系列10】如何判断一个策略的好坏？(附代码)
编程题：利用链表实现栈
盘点47条 Allegro 使用技巧，你都知道吗？
在VMware Workstation中安装CentOS
二叉树的实现
cmake安装jsoncpp
ReactNative开发城市列表页
最全前端学习资源
每日归档
更多
2025-03-20(0)
2025-03-19(0)
2025-03-18(0)
2025-03-17(0)
2025-03-16(0)
2025-03-15(0)
2025-03-14(0)
2025-03-13(0)
2025-03-12(0)
2025-03-11(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022