百度地图Api（一看就会系列）

百度地图api

前言：最近公司要求我出个百度地图api的技术分享，小编在这里也分享给大家，觉得对大家有帮助的话就点波三连吧！！

一. 引用

百度地图开放平台申请密匙,在项目index.html文件中引入链接，本文使用的是JavaScript API GL版

<script 
	type="text/javascript" 
	src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=密匙">
</script>

二. 使用

本文将百度api封装在js文件中,使用时直接调用相应的函数即可。

2.1：vue文件中引入该js文件（具体路径根据mapJS文件所放位置而定。）

		/*
 * @Descripttion: 
 * @version: 
 * @Author: sueRimn
 * @Date: 2021-06-08 14:46:08
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-06-22 11:02:07
 */


function MapBaiDu() {
   

}
MapBaiDu.prototype = {
   
  /**
   * 初始化map,使用时首先调用该方法
   */
  init(map, coordinate, num1, num2) {
   
    /**
     * 参数说明:
     * map 实例化的Map
     * coordinate 对象形式 {
     *                  name:初始中心城市名,
     *                  jingNum:初始中心点经度,
     *                  weiNum:初始中心点纬度, --经纬度和城市名都不传时默认为北京市
     *                  rank:地图级别 --不传时默认地图级别为12
     *                  idler:是否开启滚轮缩放 --默认false
     * } 
     * num1  地图旋转角度
     * num2  地图倾斜角度
     */
    var jingNum = null;
    var weiNum = null;
    jingNum = Number(coordinate.jingNum) || Number(116.404);
    weiNum = Number(coordinate.weiNum) || Number(39.925);
    if (coordinate.idler != undefined) {
   
      if (coordinate.idler.toString() != 'false') {
   
        map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
      }
    } else {
   
      map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
    }
    if (coordinate.jingNum || coordinate.weiNum) {
   
      var point = new BMapGL.Point(
        jingNum,
        weiNum
      );
      map.centerAndZoom(point, coordinate.rank || 12);
      map.setHeading(num1 || 0);
      map.setTilt(num2 || 0);
    } else {
   
      map.centerAndZoom(coordinate.name, coordinate.rank || 12);
    };


  },
  // 3D控件
  contral3D(map) {
   
    var navi3DCtrl = new BMapGL.NavigationControl3D({
   });  // 添加3D控件
    map.addControl(navi3DCtrl);
  },

  // 个性化地图配置
  mapStyle(map, styleJson) {
   
    map.setMapStyleV2({
    styleJson: styleJson });
  },
  // 设置天空颜色
  setSkyColor(map, skyColors) {
   
    map.setDisplayOptions({
   
      skyColors: skyColors,
    });
  },
  // 城市列表控件
  cityList(map, direction, offsetX, offsetY) {
   
    /**
     * 参数说明: 
     *        map --实例化的Map
     *        direction --控件停靠位置(默认左上角) 类型 :string
     *                    topLeft  左上角 topRight  右上角
     *                    bottomLeft   左下角    bottomRight   右下角
     *        offsetX  控件基于停靠位置x轴的偏移量  类型 Number
     *        offsetY  控件基于停靠位置y轴的偏移量  类型 Number
     */
    var myAnchor = null;
    if (direction == 'topRight') {
   
      myAnchor = BMAP_ANCHOR_TOP_RIGHT
    } else if (direction == "bottomLeft") {
   
      myAnchor = BMAP_ANCHOR_BOTTOM_LEFT
    } else if (direction == "bottomRight") {
   
      myAnchor = BMAP_ANCHOR_BOTTOM_RIGHT
    } else {
   
      myAnchor = BMAP_ANCHOR_TOP_LEFT
    };
    var offX = Number(offsetX) || 0;
    var offY = Number(offsetY) || 0;
    var cityControl = new BMapGL.CityListControl({
   
      // 控件的停靠位置（可选，默认左上角）
      anchor: myAnchor,
      // 控件基于停靠位置的偏移量（可选）
      offset: new BMapGL.Size(offX, offY),
    });
    // 将控件添加到地图上
    map.addControl(cityControl);
  },
  // 缩放控件
  zoomCtrl(map, direction, offsetX, offsetY) {
   
    /**
     * 参数说明: 
     *        map --实例化的Map
     *        direction --控件停靠位置(默认右下角) 类型 :string
     *                    topLeft  左上角 topRight  右上角
     *                    bottomLeft   左下角    bottomRight   右下角
     *        offsetX  控件基于停靠位置x轴的偏移量  类型 Number
     *        offsetY  控件基于停靠位置y轴的偏移量  类型 Number
     */
    var myAnchor2 = null;
    if (direction == 'topRight') {
   
      myAnchor2 = BMAP_ANCHOR_TOP_RIGHT
    } else if (direction == "bottomLeft") {
   
      myAnchor2 = BMAP_ANCHOR_BOTTOM_LEFT
    } else if (direction == "topLeft") {
   
      myAnchor2 = BMAP_ANCHOR_TOP_LEFT
    } else {
   
      myAnchor2 = BMAP_ANCHOR_BOTTOM_RIGHT
    };
    var offX = Number(offsetX);
    var offY = Number(offsetY);
    var zoomCtrl = new BMapGL.ZoomControl(
      {
   
        // 控件的停靠位置（可选，默认左上角）
        anchor: myAnchor2,
        // 控件基于停靠位置的偏移量（可选）
        // offset: new BMapGL.Size(offX, offY),
      }
    );  // 添加缩放控件
    // 将控件添加到地图上
    map.addControl(zoomCtrl);
  },
  // 比例尺控件
  scaleCtrl(map, direction, offsetX, offsetY) {
   
    /**
     * 参数说明: 
     *        map --实例化的Map
     *        direction --控件停靠位置(默认左下角) 类型 :string
     *                    topLeft  左上角 topRight  右上角
     *                    bottomLeft   左下角    bottomRight   右下角
     *        offsetX  控件基于停靠位置x轴的偏移量  类型 Number
     *        offsetY  控件基于停靠位置y轴的偏移量  类型 Number
     */
    var myAnchor = null;
    if (direction == 'topRight') {
   
      myAnchor = BMAP_ANCHOR_TOP_RIGHT
    } else if (direction == "topLeft") {
   
      myAnchor = BMAP_ANCHOR_TOP_LEFT
    } else if (direction == "bottomRight") {
   
      myAnchor =