likes
comments
collection
share

带你撬开百度地图API的大门

作者站长头像
站长
· 阅读数 107

背景

给甲方做项目, 我们公司的H5应用一直使用的是腾讯地图（组内别的成员负责开发的，我对这一块知之甚少）, 而甲方之前别的应用采购了百度地图，虽说腾讯地图目前不收费，难保以后不收费，甲方不想采购两套地图。应甲方要求，需要将H5应用中的腾讯地图替换成百度地图,由此我也开始了一场学习在H5应用中使用百度地图之旅。

第一站 注册开发者账号

首先你得有一个百度账号，才能登陆百度地图开放平台，由于我在百度App上注册过账号，所以无需再次注册。然而我打开百度App，打算扫码登陆百度地图开放平台时，却发现百度App的扫码功能入口藏得有点深,找了半天才找到。入口是拍照图标，进入之后底部默认是识万物功能，需要向左滑动，才是扫码功能。

带你撬开百度地图API的大门

带你撬开百度地图API的大门

进入注册页，开发者类型选择个人开发者，点击成为个人开发者按钮,开始注册，按部就班，勾选协议，填写个人信息，做人脸识别。 带你撬开百度地图API的大门

有一个必填项是应用场景，不能少于100字, 我东拼西凑了100字。

主要的应用场景有：

  1. 在h5移动端端，发起定位，获取当前打开页面者的位置信息。
  2. 在PC端发起定位，获取当前登陆者的位置信息
  3. 在PC端，可以在地图上移动选择地址，校正定位带来的误差
  4. 在移动端，可以把PC端的经纬度数值转换成具体的地址

账号注册成功后，会跳转到百度地图开放平台首页,点击控制台

带你撬开百度地图API的大门

第二站 创建应用,获取AK

进入控制台--应用管理--我的应用下面，创建应用。

带你撬开百度地图API的大门

我们创建一个浏览器端的学习demo应用, 启用服务选择提供的所有服务，Referer白名单填写*号,不限制域名

带你撬开百度地图API的大门

注册成功之后，会生成一个App Key, 这个AK贯穿你使用百度地图Api的始终。

带你撬开百度地图API的大门 另外, 百度地图对个人认证用户, 绝大多数Api每天调用的限制次数是5000次, 每秒钟只能查询30次。用于学习的话，够用了。 带你撬开百度地图API的大门

第三站 调用百度地图功能

3.1 展示地图

在E盘study/baidu-map文件夹下创建一个index.html文件,内容如下:

<head>
    <meta charset="utf-8">
    <title>地图展示</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <style>
    body,
    html,
    #container {
        overflow: hidden;
        width: 100%;
        height: 100%;
        margin: 0;
        font-family: "微软雅黑";
    }
    .info {
        z-index: 999;
        width: auto;
        min-width: 22rem;
        padding: .75rem 1.25rem;
        margin-left: 1.25rem;
        position: fixed;
        top: 1rem;
        background-color: #fff;
        border-radius: .25rem;
        font-size: 14px;
        color: #666;
        box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
    }
    </style>
    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=申请的AppKey"></script>
</head>
<body>
    <div class = "info">最新版GL地图命名空间为BMapGL, 可按住鼠标右键控制地图旋转、修改倾斜角度。</div>
    <div id="container"></div>
</body>
</html>
<script>
// 创建地图容器
var map = new BMapGL.Map('container'); 
// 初始化地图,设置中心点坐标和地图级别，中心坐标设置的是天安门
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12); 
// 使能鼠标滚轮缩放地图功能
map.enableScrollWheelZoom(true); 
</script>

3.2 启动运行

安装静态服务器

npm install -g http-server

启动静态服务

http-server e:/study/baidu-map

3.3 效果图

下面这张地图都可以移动和放大。 带你撬开百度地图API的大门

3.4 定位标注功能

再看一个vue3版本，实现获取位置并在地图上进行标注的功能。注意：第一次同意获取位置信息授权也会提示失败，之后运行正常。

<template>
  <div id="baidu-map-box"></div>
</template>

<script setup lang="ts">
  import { onMounted } from 'vue';

  onMounted(() => {
    const map = mapInit();
    getLocation(map);
  });

  const mapInit = () => {
    var map = new BMapGL.Map('baidu-map-box');
    // 绘制地图,中央点设置为北京天安门
    var point = new BMapGL.Point(116.331398, 39.897445);
    map.centerAndZoom(point, 12);
    return map;
  };

  // 获取定位，需要授权
  const getLocation = (map) => {
    var geolocation = new BMapGL.Geolocation();
    geolocation.getCurrentPosition(function (r) {
      if (this.getStatus() == BMAP_STATUS_SUCCESS) {
        // 在地图上添加坐标
        var mk = new BMapGL.Marker(r.point);
        map.addOverlay(mk);
        map.panTo(r.point);
        // 将经纬度解析成地址
        parseLngLat(r.point);
        // alert('您的位置：' + r.point.lng + ',' + r.point.lat);
      } else {
        alert('failed' + this.getStatus());
      }
    });
  };

  // 解析经纬度为具体的地址
  const parseLngLat = ({ lng, lat }) => {
    // 创建地理编码实例
    var myGeo = new BMapGL.Geocoder();
    // 根据坐标得到地址描述
    myGeo.getLocation(new BMapGL.Point(lng, lat), function (result) {
      if (result) {
        alert(result.address);
      }
    });
  };
</script>

<style scoped>
  #baidu-map-box {
    height: 100%;
  }
</style>

带你撬开百度地图API的大门

有两点要说明一下:

  • 定位出来的经纬度说明

定位出来的经纬度不是GPS的经纬度，而是百度坐标系的经纬度。不是通用的，使用其它地图时，需要转换。 官方文档是这样说的:

目前国内主要有以下三种坐标系：

WGS84：大地坐标系，也称国际标准。是目前广泛使用的GPS全球卫星定位系统使用的坐标系。

GCJ02：火星坐标系，是由中国国家测绘局制订的地理信息系统的坐标系统。由WGS84坐标系经加密后的坐标系。也称中国坐标偏移标准，Google Map、高德、腾讯使用

BD09：为百度坐标系，在GCJ02坐标系基础上再次加密。其中bd09ll表示百度经纬度坐标，bd09mc表示百度墨卡托米制坐标。

非中国地区地图，服务坐标统一使用WGS84坐标

带你撬开百度地图API的大门

需要转换时，请参考

  /**
   * 将腾讯、高德地图经纬度转换为百度地图经纬度
   * @param lng 经度
   * @param lat 纬度
   */
  const qqGDMapToBMap=({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,
    };
  }

  /**
   * 将百度地图经纬度转换为腾讯、高德地图经纬度
   * @param lng 经度
   * @param lat 纬度
   */
  const bMapToQQGDMap=({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,
    };
  }

另外，看到这里，大家可能觉得百度地图在国际上不通用，出国之后应该使用高德地图。然而笔者以前去过日本，发现在日本，高德地图不能使用，高德地图只提供国内导航服务，这个时候才发现冲出中国的是百度地图，百度地图才是中国地图界的一哥呀。

  • 百度地图api手册查找

对于刚学习百度地图Api用法的小白而言，相信你也和我一样，肯定不知道上面示例，或者官方展示的demo示例代码片段中Api的作用及传参含义，比如说centerAndZoom这个方法的传参含义及参数的约束条件，贴心的楼主已经给你把链接放在文中了， 请点击这里 带你撬开百度地图API的大门

最后

师傅领进门，学艺在个人。这扇门已经打开，就不要浅尝辄止，轻易的关闭它，探索一下更多更好玩，更实用的功能吧。若想玩转百度地图开放的其它高级功能的话，请移步JavaScript API GL继续深入学习。

带你撬开百度地图API的大门

参考文章

转载自:https://juejin.cn/post/7200669128289812535
评论
请登录