百度地图简单入门

JavaScript API GL

介绍：百度地图JavaScript API GL 是一套由JavaScript语言编写的应用程序接口，使用了WebGL对地图、覆盖物等进行渲染，支持3D视角展示地图。帮助开发者在网站中构建功能丰富、交互性强的地图应用，支持PC端和移动端基于浏览器的地图应用开发。JavaScript API GL提供了丰富的功能接口，包括地图展示、定位、覆盖物、检索、路线规划等，适配多样化的业务场景。

JavaScript API GL与其他百度地图版本库区别

JavaScript API GL v1.0 是基于 WebGL 全新开发的地图 API 接口。为了方便开发者迁移升级，大部份接口向下兼容。目前 GL v1.0 版本接口包含了 3D 地图的渲染、基本控件、覆盖物。在后面的版本中，将对原 v2.0、v3.0 中的核心功能进行补全。
JavaScript API GL 版本对手机性能要求较高，不建议在移动端调用。若涉及移动端 JS 服务调用，请使用 JavaScript API Lite。

Lite版专门针对移动端H5页面的使用场景，代码体积小，性能更好。但是不支持PC浏览器
JavaScript API GL v1.0 基于 WebGL 开发，对于用户的浏览器环境有兼容性要求。需要完整支持 WebGL 的现代浏览器来支持渲染。对于 WebGL 支持欠佳的浏览器会降级为 Canvas 绘制，若仍然存在兼容性问题，则会降级到瓦片图渲染。确保不同浏览器环境的用户都可以完成地图的基本渲染。

JavaScript API GL创建地图

// html
<div ref="allmap01" id="allmap1"></div>

// js
this.ownMap = new BMapGL.Map('allmap1');
// 创建点坐标
this.ownMap.centerAndZoom('上海市', 11);

变更地图类型

控制地图显示的类型

this.ownMap.setMapType(BMAP_EARTH_MAP);      // 设置地图类型为地球模式

地图类型常量：

1.标准地图：BMAP_NORMAL_MAP 2.地球模式：BMAP_EARTH_MAP 3.普通卫星地图：BMAP_SATELLITE_MAP

JavaScript API GL常见控件

new BMapGL.ScaleControl() // 默认位于地图左下方，显示地图的比例关系
new BMapGL.ZoomControl() // 默认位于地图右下方，控制地图级别的缩放
new BMapGL.NavigationControl3D() // 默认位于地图右上方，控制地图3D模式

new BMapGL.CityListControl() // 默认位于地图左上方，用于进行城市选择定位

控制控件位置

anchor值	位置说明
BMAP_ANCHOR_TOP_LEFT	表示控件定位于地图的左上角
BMAP_ANCHOR_TOP_RIGHT	表示控件定位于地图的右上角
BMAP_ANCHOR_BOTTOM_LEFT	表示控件定位于地图的左下角
BMAP_ANCHOR_BOTTOM_RIGHT	表示控件定位于地图的右下角

控件位置偏移

使用场景：使用多个控件可能会重叠在一起，这时就可以通过偏移值使二者分开显示。

this.ownMap = new BMapGL.Map('allmap1');
// 创建点坐标
this.ownMap.centerAndZoom('上海市', 11);
this.ownMap.addControl(new BMapGL.ScaleControl()); // 添加比例尺控件
this.ownMap.addControl(new BMapGL.ZoomControl()); // 添加缩放控件
this.ownMap.addControl(new BMapGL.NavigationControl3D()); // 添加3D空间

this.ownMap.addControl(new BMapGL.CityListControl({
  // 控件的停靠位置（可选，默认左上角）
  anchor: BMAP_ANCHOR_TOP_LEFT,
  // 控件基于停靠位置的偏移量（可选）
  offset: new BMapGL.Size(10, 5)
})); // 添加城市列表空间

常用地图api使用

zoomIn()
zoomOut()
getZoom()
setZoom(level) // 设置地图级别
panTo() // 将地图的中心点更改为给定的点
flyTo() // 飞到指定的中心点和级别，提供给定位缩放地图使用
getCenter()
setCenter()

api名称	api说明
zoomIn()	放大一级视图
zoomOut()	缩小一级视图
getZoom()	返回地图当前缩放级别
setZoom(level)	将视图切换到指定的缩放等级，中心点坐标不变。
panTo(level)	将地图的中心点更改为给定的点，跳转到指定中心点进行渲染。
getCenter(level)	返回矩形的中心点
setCenter(level)	设置圆形的中心点坐标
flyTo(center,level)	飞到指定的中心点和级别，提供给定位缩放地图使用

注意：

在JavaScript API GL同时使用panTo()setCenter()时,setCenter方法会实效只能缩放地图级别，不能设置地图中心点,但是在v3.0是可以使用的

这时候可以使用flyTo()

获取省市区范围

BMapGL.Boundary()

var bd = new BMapGL.Boundary();
bd.get('浦东新区', (rs) => {
  console.log('rs', rs)
  this.Overlay = new BMapGL.Polygon(rs.boundaries, {
    fillColor: 'blue',
    fillOpacity: 0.2
  });
  this.ownMap.addOverlay(this.Overlay);
});

覆盖物的使用方法

创建覆盖物点

const point = new BMapGL.Point(lng, lat); // 创建点
const marker = new BMapGL.Marker(point); // 创建覆盖物
this.ownMap.addOverlay(marker); // 将覆盖物添加进地图

1、覆盖物的创建方法

BMapGL.Marker(point,<opts>)

属性	类型	描述
offset	Size	标注的位置偏移值
icon	Icon	标注所用的图标对象
enableMassClear	Boolean	是否在调用map.clearOverlays清除此覆盖物，默认为true
enableDragging	Boolean	是否启用拖拽，默认为false

2、覆盖物的方法

方法	返回值	描述
disableMassClear	none	禁止覆盖物在map.clearOverlays方法中被清除
enableMassClear	none	允许覆盖物在map.clearOverlays方法中被清除
addEventListener(event: String, handler: Function)	none	添加事件监听函数
removeEventListener(event: String, handler: Function)	none	移除事件监听函数

3、添加自定义图标

new BMapGL.Icon(图片地址, 偏移值);

var myIcon = new BMapGL.Icon(this.icon, new BMapGL.Size(30, 30));
const point = new BMapGL.Point(121.47918, 31.23916);
var marker = new BMapGL.Marker(
  point,
  {
    icon: myIcon // myIcon 图标对象
  }
);
marker.id="haha" // 给覆盖物添加自定义属性 可以再点击事件中获取
this.ownMap.addOverlay(marker);

创建覆盖物点线面

1、创建线

Polyline(points: Array[Point], opts[PolylineOptions])

points：点的数组

opts属性

属性	类型	描述
strokeColor	String	折线颜色
strokeWeight	Number	折线的宽度，以像素为单位
strokeOpacity	Number	折线的透明度，取值范围0 - 1
strokeStyle	String	折线的样式，solid或dashed
enableMassClear	Boolean	是否在调用map.clearOverlays清除此覆盖物，默认为true
enableEditing	Boolean	是否启用线编辑，默认为false
enableClicking	Boolean	是否响应点击事件，默认为true

Polyline的方法

方法	返回值	描述
setPath(path: Array< [Point ]>)	none	设置折线的点数组
getPath()	Array< [Point ]>	返回折线的点数组
enableEditing()	none	开启编辑功能
disableEditing()	none	关闭编辑功能
enableMassClear()	none	允许覆盖物在map.clearOverlays方法中被清除
disableMassClear()	none	禁止覆盖物在map.clearOverlays方法中被清除
addEventListener(event: String, handler: Function)	none	添加事件监听函数
removeEventListener(event: String, handler: Function)	none	移除事件监听函数

// 创建点标记
var polyline = new BMapGL.Polyline([
  Point,
  Point,
  Point
], {
  strokeColor: 'blue',
  strokeWeight: 2,
  strokeOpacity: 0.5,
  enableEditing: true
});
this.ownMap.addOverlay(polyline); // 增加折线

2、创建圆

Circle(point, radius, opts[PolylineOptions])

// 创建圆
var circle = new BMapGL.Circle(point, 5000, {
  strokeColor: 'blue',
  strokeWeight: 2,
  strokeOpacity: 0.5
});
this.ownMap.addOverlay(circle); // 增加折线

opts属性

属性	类型	描述
strokeColor	String	圆形边线颜色
fillColor	String	圆形填充颜色。当参数为空时，圆形将没有填充效果
strokeWeight	Number	圆形边线的宽度，以像素为单位
strokeOpacity	Number	圆形边线透明度，取值范围0 - 1
fillOpacity	Number	圆形填充的透明度，取值范围0 - 1
strokeStyle	String	圆形边线的样式，solid或dashed
enableMassClear	Boolean	是否在调用map.clearOverlays清除此覆盖物，默认为true
enableEditing	Boolean	是否启用线编辑，默认为false
enableClicking	Boolean	是否响应点击事件，默认为true

3、创建多边形

Polygon(points: Array, opts:[PolygonOptions])

points：点的数组

opts属性

属性	类型	描述
strokeColor	String	边线颜色
fillColor	String	填充颜色。当参数为空时，折线覆盖物将没有填充效果
strokeWeight	Number	边线的宽度，以像素为单位
strokeOpacity	Number	边线透明度，取值范围0 - 1
fillOpacity	Number	填充的透明度，取值范围0 - 1
strokeStyle	String	边线的样式，solid或dashed
enableMassClear	Boolean	是否在调用map.clearOverlays清除此覆盖物，默认为true
enableEditing	Boolean	是否启用线编辑，默认为false
enableClicking	Boolean	是否响应点击事件，默认为true

Polygon方法

方法	返回值	描述
setPath(path: Array< [Point ]>)	none	设置折线的点数组
getPath()	Array< [Point ]>	返回折线的点数组
enableEditing()	none	开启编辑功能
disableEditing()	none	关闭编辑功能
enableMassClear()	none	允许覆盖物在map.clearOverlays方法中被清除
disableMassClear()	none	禁止覆盖物在map.clearOverlays方法中被清除
addEventListener(event: String, handler: Function)	none	添加事件监听函数
removeEventListener(event: String, handler: Function)	none	移除事件监听函数

var rectangle = new BMapGL.Polygon([
  Point,
  Point,
  Point
], {
  strokeColor: 'blue',
  strokeWeight: 2,
  strokeOpacity: 0.5
});
this.ownMap.addOverlay(rectangle);

4、创建镂空面

var bd = new BMapGL.Boundary();
      bd.get('浦东新区', (rs) => {
        console.log('rs', rs)
          // 比较坑的一点事 最后一个坐标点不要加分号
          rs.boundaries.push("121.63217620887306,31.229207634496976; 121.64712401255909,31.229701693177855;121.64712401255909,31.213890521597296; 121.63562570203138,31.209937311397614; 121.63505078650499,31.218337683561668; 121.6344758709786,31.22377281683927; 121.63217620887306,31.229207634496976")
          rs.boundaries.push("121.40551238398308,31.234446824188662; 121.47277750057023,31.229506370548492; 121.44460663977732,31.206282744471732; 121.40551238398308,31.234446824188662 ")
          var hole = new BMapGL.Polygon(rs.boundaries, {
              fillColor: 'blue',
              fillOpacity: 0.2
          });
          this.ownMap.addOverlay(hole);
          hole.addEventListener('click', () => {
            console.log('我点击了');
          })
      });

注意：

points 可以是传入数组Point, 传入的数组经纬度组成的字符串集合

传入数组如果是有重合面将会镂空显示

字符串集合最后一个坐标点不要加分号

5、添加地面覆盖物

GroundOverlay(bounds:[Bounds], opts:[GroundOverlayOptions])

创建地面叠加层

var bounds = new BMapGL.Bounds(new BMapGL.Point(121.48239239690646, 31.238691477042632), new BMapGL.Point(121.4840395315516, 31.237987014135086));
// 创建地面叠加层实例
var imgOverlay = new BMapGL.GroundOverlay(bounds, {
  type: 'image',
  url: icon,
  opacity: 1,
});
// 叠加层添加到地图
this.ownMap.addOverlay(imgOverlay);

可编辑覆盖物

使用DrawingManager库

引入：

<link href="//mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.css" rel="stylesheet">
<script type="text/javascript" src="//mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.js"></script>

BMapGLLib.DrawingManager(map, opts)

map: 地图对象

opts属性

属性	类型	描述
enableDrawingTool	Boolean	是否显示工具栏
enableCalculate	Boolean	绘制是否进行测距(画线时候)、测面(画圆、多边形、矩形)
enableSorption	Boolean	是否开启边界吸附功能
drawingToolOptions	Object	工具栏的配置
sorptionDistance	Number	边界吸附距离
enableGpc	Boolean	是否开启延边裁剪功能
enableLimit	Boolean	是否开启超限提示
limitOptions	Object	是否启用线编辑，默认为false
enableClicking	Boolean	是否响应点击事件，默认为true
circleOptions	Object	圆的样式
polylineOptions	Object	线的样式
polygonOptions	Object	多边形的样式
rectangleOptions	Object	矩形的样式

DrawingManager方法

方法	返回值	描述
addEventListener('overlaycomplete', handler: Function)	none	添加鼠标绘制工具监听事件，用于获取绘制结果

var styleOptions = {
      strokeColor: '#5E87DB', // 边线颜色。
      fillColor: '#5E87DB', // 填充颜色。当参数为空时，圆形将没有填充效果。
      strokeWeight: 2, // 边线的宽度，以像素为单位。
      strokeOpacity: 1, // 边线透明度，取值范围0 - 1。
      fillOpacity: 0.2 // 填充的透明度，取值范围0 - 1。
    };

    // 实例化鼠标绘制工具
    this.drawingManager = new BMapGLLib.DrawingManager(this.ownMap, {
      // isOpen: true, //是否开启绘制模式
      enableDrawingTool: true, // 是否显示工具栏
      enableCalculate: true, // 绘制是否进行测距(画线时候)、测面(画圆、多边形、矩形) 
      drawingToolOptions: {
        enableTips: true,
        customContainer: 'selectbox_Drawing',
        hasCustomStyle: true,
        anchor: BMAP_ANCHOR_TOP_RIGHT,
        offset: new BMapGL.Size(15, 15), // 偏离值
        scale: 1, // 工具栏缩放比例
        drawingModes: [
          BMAP_DRAWING_MARKER,
          BMAP_DRAWING_POLYLINE,
          BMAP_DRAWING_RECTANGLE,
          BMAP_DRAWING_POLYGON,
          BMAP_DRAWING_CIRCLE,
        ]
      },
      enableSorption: true, // 是否开启边界吸附功能
      sorptionDistance: 20, // 边界吸附距离
      enableGpc: true, // 是否开启延边裁剪功能
      enableLimit: true,  // 是否开启超限提示
      limitOptions: {
        area: 50000000, // 面积超限值
        distance: 30000
      },
      circleOptions: styleOptions, // 圆的样式
      polylineOptions: styleOptions, // 线的样式
      polygonOptions: styleOptions, // 多边形的样式
      rectangleOptions: styleOptions, // 矩形的样式
    });
    //添加鼠标绘制工具监听事件，用于获取绘制结果
    this.drawingManager.addEventListener('overlaycomplete', this.getPoint);

电子围栏

判断是否在目标覆盖物内

引入：

<script type="text/javascript" src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>

BMapGLLib.GeoUtils.isPointInPolygon(point, Overlay)

point 目标点

Overlay 目标覆盖物

var result = BMapGLLib.GeoUtils.isPointInPolygon(point, this.Overlay);
console.log('result', result)
console.log(result)
if (result == true) {
  alert('点在多边形内');
  const marker = new BMapGL.Marker(point);

  this.ownMap.addOverlay(marker);
}
else {
  alert('点在多边形外');
}

路书

引入：

<script type="text/javascript" src="//bj.bcebos.com/v1/mapopen/github/BMapGLLib/Lushu/src/Lushu.min.js"></script>

BMapGLLib.DrawingManager(map, opts)

通过传入起始点和终点生成两点之间路径

opts属性

属性类型描述
onSearchComplete Function 回调生成导航信息

DrawingManager方法

方法名返回值描述
search(startPoint, endPoint) null 传入起始点和终点 onSearchComplete生成导航信息
BMapGLLib.LuShu(map, points: Array, opts)

points 点的数组

属性	类型	描述
onSearchComplete	Function	回调生成导航信息

方法名	返回值	描述
search(startPoint, endPoint)	null	传入起始点和终点 onSearchComplete生成导航信息

opts属性

属性	类型	描述
defaultContent	String	信息窗口文案
autoView	Boolean	是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
speed	Number	移动速度
icon	Icon	路书图片
enableRotation	Boolean	是否设置marker随着道路的走向进行旋转

LuShu方法

方法名	返回值	描述
start	null	开始移动
stop	null	停止移动
pause	null	暂停移动
hideInfoWindow	null	隐藏提示框
showInfoWindow	null	显示提示框

this.drv = new BMapGL.DrivingRoute(this.ownMap, {
  onSearchComplete: (res) => {
    console.log('this.drv.getStatus()', res, this.drv.getStatus(), BMAP_STATUS_SUCCESS)
    if (this.drv.getStatus() == BMAP_STATUS_SUCCESS) {
      var plan = res.getPlan(0);
      console.log('时间：', plan.getDuration(true))
      console.log('总里程：', plan.getDistance(true))
      for (var j = 0; j < plan.getNumRoutes(); j++) {
        var route = plan.getRoute(j);
        this.arrPois = route.getPath()
      }
      this.ownMap.addOverlay(new BMapGL.Polyline(this.arrPois, { strokeColor: '#111' }));
      this.ownMap.setViewport(this.arrPois); // 控制地图窗口
      this.createLuShu()
    }
  }
});
var start = new BMapGL.Point(121.4086479847669, 31.269285495550122);
var end = new BMapGL.Point(121.5592342387356, 31.217970134573644);
this.drv.search(start, end);



createLuShu() {
  //飞机图片
  const fly = img;

  this.lushu = new BMapGLLib.LuShu(this.ownMap, this.arrPois, {
    defaultContent: '出发了', // "信息窗口文案"
    autoView: true, // 是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
    speed: 1500,
    // icon: new BMapGL.Icon('./images/car.png', new BMapGL.Size(32, 32), { anchor: new BMapGL.Size(10, 10) }),
    icon: new BMapGL.Icon(fly, new BMapGL.Size(48, 48), { anchor: new BMapGL.Size(24, 24) }),
    enableRotation: true, // 是否设置marker随着道路的走向进行旋转
  });
},
start() {
  this.lushu.start();
},
stop() {
  this.lushu.stop();
},
pause() {
  this.lushu.pause();
},
hideInfo() {
  this.lushu.hideInfoWindow();
},
showInfo() {
  this.lushu.showInfoWindow();
},

遇到问题

地图偏移
```
// html
<div ref="allmap08" id="allmap8"></div>

// css
#allmap8 {
  height: 80vh;
  width: 90vw;
  transform: translate(100px, 10px);
}
```
html在渲染的时候不能使用css的transform，会导致地图中心点偏移

在element-iu，dialog弹框使用地图就会遇到这样的问题，需要修改dialog的css样式