H5新特性百度地图SDK--API引入、地图控件、地理编码与逆地理编码、地图标注、路径规划（基于2.0）

原创

已于 2022-05-28 20:15:33 修改 · 3.6k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#H5新特性

于 2021-07-19 10:31:53 首次发布

本文详细介绍了如何使用百度地图API进行地图的基本操作，包括创建应用、设置地图控件、地址解析、地理编码、自定义标注以及路径规划。涵盖了从创建地图实例、添加控件、地址解析服务到公交、驾车和步行的路线规划。通过示例代码展示了如何在网页中集成和交互地图功能。

一、API基本使用

1.1 大致流程

打开，百度地图官网

登录或者注册一个百度账号，并完成相关验证

登陆并申请成为开发者

在百度地图开发平台的首页选择控制台，在控制台中创建应用

创建好应用以后就能在控制台我的应用中看到这个应用，其中最重要的是AK，这是百度地图分配给我们应用的一个专用的秘钥，必须使用秘钥才能访问百度地图API

完成以上基础操作后，具体的操作流程请参考：jspopularGL | 百度地图API SDK

1.2 基本用法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #container {
        width: 700px;
        height: 500px;
        border: 1px solid black;
      }
    </style>
    <script type="text/javascript"
    src="http://api.map.baidu.com/api?v=1.0&type=webgl&ak=9N1GiH5wT8CqN7axx9F7VQNy1H281i8b"></script>
  </head>
  <body>
    <div id="container"></div>

    <script>
      // 创建地图实例
      var map = new BMapGL.Map("container");

      // 通过地理位置的经纬度创建点坐标
      var point = new BMapGL.Point(116.404, 39.915);

      // 初始化地图，设置中心点坐标和地图级别
      map.centerAndZoom(point, 15);

      // 添加比例尺控件
      var scaleCtrl = new BMapGL.ScaleControl();
      map.addControl(scaleCtrl);

      // 添加缩放控件
      var zoomCtrl = new BMapGL.ZoomControl(); 
      map.addControl(zoomCtrl);

      // 添加城市列表控件
      var cityCtrl = new BMapGL.CityListControl(); 
      map.addControl(cityCtrl);

      // 添加定位控件
      var locationControl = new BMapGL.LocationControl();
      map.addControl(locationControl);

      //开启鼠标滚轮缩放
      map.enableScrollWheelZoom(true);
      
      // 设置地图类型为地球模式
      map.setMapType(BMAP_EARTH_MAP);
    </script>
  </body>
</html>

二、地图控件

 #container {
            width: 700px;
            height: 500px;
            border: 1px solid black;
        }

<button>加载地图</button>
    <div id="container"></div>

<script type="text/javascript"
    src="http://api.map.baidu.com/api?v=1.0&type=webgl&ak=9N1GiH5wT8CqN7axx9F7VQNy1H281i8b"></script>

2.1 系统控件

//平移控件

map.addControl(new BMap.NavigationControl());

//缩放控件

map.addControl(new BMap.ScaleControl());

//缩略地图控件

map.addControl(new BMap.OverviewMapControl());

//地图类型控件

map.addControl(new BMap.MapTypeControl());
// 添加城市列表控件
map.addControl(new BMap.CityListControl());

示例：

<script>
        document.querySelector('button').onclick = function() {
            //创建地图实例
            var map = new BMap.Map("container");

            //设置中心点坐标
            var point = new BMap.Point(116.404, 39.915);

            //地图初始化，同时设置地图展示级别
            map.centerAndZoom(point, 18);

            //开启鼠标滚轮缩放
            map.enableScrollWheelZoom(true);

            //平移控件
            map.addControl(new BMap.NavigationControl());

            //缩放控件
            map.addControl(new BMap.ScaleControl());

            //缩略地图控件
            map.addControl(new BMap.OverviewMapControl());

            //地图类型控件
            map.addControl(new BMap.MapTypeControl());

            // 添加城市列表控件
            map.addControl(new BMap.CityListControl());

           
        };
       
    </script>

2.2 自定义摆放的系统控件的位置

自定义摆放位置有三个字段可选

anchor :控件摆放位置

BMAP_ANCHOR_TOP_LEFT：表示控件定位于地图的左上角
BMAP_ANCHOR_TOP_RIGHT：表示控件定位于地图的右上角
BMAP_ANCHOR_BOTTOM_LEFT：表示控件定位于地图的左下角
BMAP_ANCHOR_BOTTOM_RIGHT：表示控件定位于地图的右下角

offset ：控件偏移位置

除了指定停靠位置外，还可以通过偏移量来指示控件距离地图边界有多少像素

如果两个控件的停靠位置相同，那么控件可能会重叠在一起，这时就可以通过偏移值使二者分开显示。

var opts = {
    offset: new BMapGL.Size(150, 5)
}
// 添加控件
map.addControl(new BMapGL.ScaleControl(opts));
// 移除控件
map.removeControl(new BMapGL.ScaleControl(opts));

type ：控件加载类型

BMAP_NAVIGATION_CONTROL_LARGE 表示显示完整的平移控件
BMAP_NAVIGATION_CONTROL_SMALL 表示显示小型的平移缩放控件
BMAP_NAVIGATION_CONTROL_PAN 表示只显示控件的部分平移功能
BMAP_NAVIGATION_CONTROL_ZOOM 表示只显示控件的部分缩放功能

var options={

             anchor:BMAP_ANCHOR_BOTTOM_RIGHT,

             offset:new BMap.Size(150, 5),

             type:BMAP_NAVIGATION_CONTROL_SMALL

             };

             map.addControl(new BMap.NavigationControl(options));

             //比例尺位置

            var options={

                anchor:BMAP_ANCHOR_TOP_LEFT,

                offset:new BMap.Size(75,15)

            };

map.addControl(new BMap.ScaleControl(options));

示例：

 <script>
        document.querySelector('button').onclick = function() {
            //创建地图实例
            var map = new BMap.Map("container");

            //设置中心点坐标
            var point = new BMap.Point(116.404, 39.915);

            //地图初始化，同时设置地图展示级别
            map.centerAndZoom(point, 18);

            //开启鼠标滚轮缩放
            map.enableScrollWheelZoom(true);

            

            var options = {
                //右下角
                anchor: BMAP_ANCHOR_BOTTOM_RIGHT,

                //位置
                offset: new BMap.Size(150, 5),

                //显示完整的平移