如何在项目中使用百度地图进行可视化展示

如何在项目中使用百度地图进行可视化展示

百度地图

00 - 基本使用

使用入门

第一步：注册百度账号，申请ak秘钥

注册百度账号地址：https://www.baidu.com/

登录百度地图开放平台，打开控制台 - 应用管理 - 创建应用，创建成功后将获取到对应的ak秘钥。

点击申请ak秘钥：http://lbsyun.baidu.com/apiconsole/key#/home

第二步：创建一个简单的地图DEMO

• 引入百度地图js

  <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=ak秘钥"></script>
  

• 创建百度地图实例

   var map = new BMap.Map("allmap");
  

• 初始化地图，设置地图的中心点及缩放程度。（必要）

    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
  

添加辅助功能

1 - 使用控件

原生控件

在浏览器端，支持的原生控件为5种，分别是

• NavigationControl ：平移缩放控件，默认位置为地图的左上方，用于控制地图的平移和缩放。
• OverviewMapControl：缩略地图控件，默认位于地图右下方，默认为折叠状态
• ScaleControl：比例尺控件，默认位于地图的左下方，用于标识地图的比例关系
• MapTypeControl:地图类型切换控件，默认用于地图右上方，用于切换 普通地图、卫星地图、3D地图
• CopyrightControl：版权控件，默认位于地图的左下方

使用addControl方法为百度地图添加地图控件

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

Tip:如果想要添加多个控件，直接多个调用addControl方法即可。

关于各个控件类的构造函数，接收参数，在下面会详细说明。

自定义控件

自定义控件的原理是通过继承 Control 类从而达到创建自定义的地图控件的目的。

添加自定义控件主要分为以下 4个

• 创建一个自定义控件类：ZoomControl

   function ZoomControl() {
       this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
       this.defaultOffset = new BMap.Size(10, 10);
  }
  

• 自定义控件类继承 原生的 Control类

  ZoomControl.prototype = new BMap.Control();
  

• 初始自定义控件的样式及事件，并添加到地图容器中

  ZoomControl.prototype.initialize = function (map) {
      // 1 - 创建一个DOM元素
      var div = document.createElement("div");
      // 2 - 添加文字说明
      div.appendChild(document.createTextNode("放大2级"));
      // 3 - 设置样式
      div.style.cursor = "pointer";
      div.style.border = "1px solid gray";
      div.style.backgroundColor = "white";
      // 4 - 绑定事件，点击一次放大两级
      div.onclick = function(e){
          map.zoomTo(map.getZoom() + 2);
      }
      // 5 - 添加DOM元素到地图中
      map.getContainer().appendChild(div);
      // 将DOM元素返回
      return div;
  }
  

• 调用addControl添加控件

   map.addControl( new ZoomControl() );
  

2 - 覆盖物简介

什么是覆盖物

在百度地图中，所有叠加或覆盖到地图上的内容，统称为覆盖物。

覆盖物的特性

添加的覆盖物本身具有它自己的坐标，拖动地图时覆盖物也会随着移动，而不是固定在屏幕上的。

覆盖物的分类 - 10种

• Overlay：覆盖物基类，所有的覆盖物都继承该类
• Marker：表示地图上的点，可以用来自定义显示的图标
• Label：表示地图上的文本标注，可以用来自定义标注的内容
• Polyline：表示地图上的折线
• Polygon：表示地图上的多边形
• Circle：表示地图上的圆
• InfoWindow：表示信息窗口，可以展示更为丰富的文字和多媒体信息。在地图上同时只能打开一个信息窗口
• GoundOverlay：表示叠加在地图上的图片，图片的链接、大小、位置等属性都可以自定义
• PointCollection：表示加载海量点，主要用于数据比较多的情况
• 自定义覆盖物：继承Overlay基类，实现自定义覆盖物

3 - 使用标注点 - Marker

使用内置

使用 addOverlay()方法添加标注点

 // 创建标注点
let point = new BMap.Point(116.404, 39.915);
let marker = new BMap.Marker(point);

// 添加标注点
  map.addOverlay(marker);

使用自定义标注点

自定义标注点的原理即通过修改 Marker 的 Icon属性，从而达到修改显示图标的目的。

• 定义显示的图标

  let myIcon = new BMap.Icon("fox.gif", new BMap.Size(300,157));
  

• 设置Marker的Icon属性

  let marker = new BMap.Marker(point , { icon: myIcon});
  

• 添加标注点

  map.addOverlay(marker);
  

关于事件

标注点的事件方法和Map事件机制一致，

4 - 使用信息窗口

什么是信息窗口

信息窗口也是属于覆盖物的一种，属于特殊覆盖物。信息窗口可以在地图上的任意位置打开，可以展示更为丰富的文字和多媒体信息。

注意：同一时刻，地图上只能有一个信息窗口处于打开状态

使用内置信息窗口

• 设置消息窗口配置

  var opts = {    
      width : 250,     // 信息窗口宽度    
      height: 100,     // 信息窗口高度    
      title : "Hello"  // 信息窗口标题   
  }    
  

• 初始化消息窗口实例

   let infoWindow = new BMap.InfoWindow( 窗口内容 , opts);
  

• 显示消息窗口

  
  map.openInfoWindow(infoWindow, map.getCenter());     
  

5 - 使用叠加图层

添加交通流量图层

• 创建交通流量图层实例

   let traffic = new BMap.TrafficLayer();
  

• 添加图层

    map.addTileLayer(traffic);	
  

• 移除图层

    map.removeTileLayer(traffic);     
  

事件处理

百度地图中大部分的对象都还有 addEventListener方法，用来捕获事件。

• 绑定事件 - addEventListener

  var map = new BMap.Map("container");    
  map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);    
  map.addEventListener("click", function(){    
      alert("您点击了地图。");    
  });
  

• 移除事件 - removeEventListener

  map.removeEventListener('click');	
  

01 - 常用功能矩阵

• 全景图展示 - 街道、室内、实景图展示

  // 该功能我们一般不会用到，主要用于实景图展示，但是性能会比较差，运行较卡。
  

• 【★】热力图展示 - 能够直观展示数据分布情况

  // 该模块是重点使用模块，主要用来展示数据的分布，动态展示数据的变化等
  

• 【★】定制地图展示

  // 重点使用模块，自定义地图主题用以配合不同项目
  

• 【★】地图覆盖物

  // 重点使用模块，标注当前位置，
  

• POI检索详情展示

  // 对特定地区的兴趣点位置查询服务。允许设置检索城市、检索圆形区域内POI、检索矩形区域内POI、检索结果详情。
  

• 【★】自定义图标

  // 根据需求自定义标注点的图标，在不同项目中展示与项目类型符合的图标
  

• 逆/地理解析

  // 百度坐标与地理位置之间的数据解析，目前我们不会使用到
  

02 - 如何查看百度地图的API

1. 百度地图中以 类 为核心概念，当我们想要添加一个功能时，基本上都是实例化一个相对应的类。所以第一步先找到我们要实例化的类（该步骤类似于我们在使用Echarts时先确定 series 的type属性一样，在确定了type属性后才可以在配置项手册中查找相对应的配置项）
2. 在确定类名后，根据该类构造函数、属性、方法等为地图添加一些其他类，包括控件、覆盖物、图层等等。（该步骤类似于在Echarts中我们确定series后，要设置的data，itemStyle等属性，只不过在Echarts中我们通过属性设置，在百度地图中需要通过实例的方法设置）
3. 通过addListenEvent为地图实例或其他实例添加事件，查看该类下支持哪些事件，根据需求添加

03 - 文档演示代码下载

文档演示代码下载

04 - 百度地图开发者平台

• 百度地图开发手册

• 百度地图开发指南

• 百度地图官方Demo

• 百度地图JSAPI 类参考

• 个性化地图编辑器