百度地图2 从0开始

最新推荐文章于 2023-09-11 16:02:27 发布

气势如虹-

最新推荐文章于 2023-09-11 16:02:27 发布

阅读量361

点赞数

文章标签：百度 echarts

本文链接：https://blog.csdn.net/Js_qishiruhong/article/details/126353865

版权

百度地图控件★★

控件是负责与地图交互的UI元素，百度地图API支持比例尺、缩放、定位、城市选择列表、版权，以及自定义控件。

例如：下面地图中标红的缩放和比例尺控件：

百度地图主要可添加的控件如下表：

控件	类名	简介
抽象基类	Control	所有控件均继承此类的方法、属性。通过此类您可实现自定义控件
比例尺	ScaleControl	默认位于地图左下方，显示地图的比例关系
缩放	ZoomControl	默认位于地图右下方，控制地图级别的缩放
定位	LocationControl	默认位于地图左下方，用于获取定位
城市选择列表	CityListControl	默认位于地图左上方，用于进行城市选择定位
版权	CopyrightControl	默认位于地图左下方，用于展示版权信息

使用Map.addControl()方法将上面表格中的控件添加到地图中

案例1：给地图添加缩放控件

代码如下：

<!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>
      html,
      body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }

      #map {
        width: 1200px;
        height: 550px;
        border: 1px solid #ccc;
        margin: 20px auto;
      }

      .anchorBL {
        display: none;
      }

      .BMap_stdMpZoom {
        display: block;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
  </body>
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=beRaxcBBOVvG8pfZMgaWSmdKSgr44jsh"></script>
  <script>
    let myMap = new BMapGL.Map("map");
    let point = new BMapGL.Point(121.66805, 31.14794);
    myMap.centerAndZoom(point, 20);
    myMap.enableScrollWheelZoom();
    myMap.setHeading(30);
    myMap.setTilt(60);

    //实例化缩放控件
    let zoomCtrol = new BMapGL.ZoomControl({
      //设置控件在地图四个角的位置
      anchor: BMAP_ANCHOR_BOTTOM_LEFT,
      //设置控件偏移量
      offset: new BMapGL.Size(30, 50),
    });
    //通过addControl方法添加缩放控件
    myMap.addControl(zoomCtrol);
  </script>
</html>

如果想对缩放级别进行控制，可以通过Map实例的下面两个方法实现：

setMinZoom(zoom: Number)	none	设置地图允许的最小级别。取值不得小于地图类型所允许的最小级别
setMaxZoom(zoom: Number)	none	设置地图允许的最大级别。取值不得大于地图类型所允许的最大级别

添加最小和最大缩放级别，如下代码：

<!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>
      html,
      body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }

      #map {
        width: 1200px;
        height: 550px;
        border: 1px solid #ccc;
        margin: 20px auto;
      }

      .anchorBL {
        display: none;
      }

      .BMap_stdMpZoom {
        display: block;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <div id="map2"></div>
  </body>
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=beRaxcBBOVvG8pfZMgaWSmdKSgr44jsh"></script>
  <script>
    let myMap = new BMapGL.Map("map", {
      // minZoom: 8,
      // maxZoom: 12,
      // mapType: BMAP_EARTH_MAP,
    });
    let point = new BMapGL.Point(121.66805, 31.14794);
    myMap.centerAndZoom(point, 20);
    myMap.enableScrollWheelZoom();
    myMap.setHeading(30);
    myMap.setTilt(60);

    //设置最小缩放级别
    myMap.setMinZoom(8);
    //设置最大缩放级别
    myMap.setMaxZoom(12);
    //添加缩放控件
    let zoomCtrol = new BMapGL.ZoomControl({
      //设置控件在地图四个角的位置
      anchor: BMAP_ANCHOR_BOTTOM_LEFT,
      //设置控件偏移量
      offset: new BMapGL.Size(30, 50),
    });
    myMap.addControl(zoomCtrol);
  </script>
</html>

上面代码中，也可以在实例化地图时，通过mapOtions选项添加缩放级别，如下代码：

let myMap = new BMapGL.Map("map", {
      minZoom: 8,
      maxZoom: 12,
    });

也可给控件绑定事件，绑定事件的方法和JS原生绑定类似，如下：

addEventListener(event: String, handler: Function)	none	添加事件监听函数
removeEventListener(event: String, handler: Function)	none	移除事件监听函数

例如：给缩放控件添加开始缩放和结束缩放事件，代码如下：

map.addEventListener("zoomstart", function () {
    console.log("开始缩放:", map.getZoom());
});

map.addEventListener("zoomend", function () {
    console.log("结束缩放:", map.getZoom());
});

案例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>
      html,
      body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }

      #map {
        width: 1200px;
        height: 550px;
        border: 1px solid #ccc;
        margin: 20px auto;
      }

      .anchorBL {
        display: none;
      }

      .BMap_stdMpZoom {
        display: block;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
  </body>
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=beRaxcBBOVvG8pfZMgaWSmdKSgr44jsh"></script>
  <script>
    let map = new BMapGL.Map("map", {
      minZoom: 8,
      maxZoom: 12,
    });
    let point = new BMapGL.Point(121.66805, 31.14794);
    map.centerAndZoom(point, 20);
    map.enableScrollWheelZoom();
    map.setHeading(30);
    map.setTilt(60);

    
    //实例化比例尺控件
    const scaleCtrl = new BMapGL.ScaleControl({
      anchor: BMAP_ANCHOR_TOP_LEFT,
      offset: new BMapGL.Size(20, 10),
    });

    //添加比例尺控件
    map.addControl(scaleCtrl);
  </script>
</html>

最终效果如下：

百度地图自定义样式★★★

百度地图自定义样式，顾名思义用户可对地图进行个性化配置。通过该服务，允许用户将传统默认的地图样式按需配置，自由控制地图元素显隐及对应的元素样式。用户可以通过个性化地图样式编辑器（地址：https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/custom），按需编辑地图的底图样式

使用流程：