地图进行可视化展示"/>
如何在项目中使用百度地图进行可视化展示
如何在项目中使用百度地图进行可视化展示
百度地图
文章目录
- 如何在项目中使用百度地图进行可视化展示
- 百度地图
- 00 - 基本使用
- 使用入门
- 添加辅助功能
- 1 - 使用控件
- 2 - 覆盖物简介
- 3 - 使用标注点 - Marker
- 4 - 使用信息窗口
- 5 - 使用叠加图层
- 事件处理
- 01 - 常用功能矩阵
- 02 - 如何查看百度地图的API
- 03 - 文档演示代码下载
- 04 - 百度地图开发者平台
00 - 基本使用
使用入门
第一步:注册百度账号,申请ak秘钥
注册百度账号地址:/
登录百度地图开放平台,打开控制台 - 应用管理 - 创建应用,创建成功后将获取到对应的ak秘钥。
点击申请ak秘钥:
第二步:创建一个简单的地图DEMO
-
引入百度地图js
<script type="text/javascript" src="//api.map.baidu/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
- 百度地图中以 类 为核心概念,当我们想要添加一个功能时,基本上都是实例化一个相对应的类。所以第一步先找到我们要实例化的类(该步骤类似于我们在使用
Echarts
时先确定series
的type
属性一样,在确定了type
属性后才可以在配置项手册中查找相对应的配置项) - 在确定类名后,根据该类构造函数、属性、方法等为地图添加一些其他类,包括控件、覆盖物、图层等等。(该步骤类似于在
Echarts
中我们确定series
后,要设置的data
,itemStyle
等属性,只不过在Echarts
中我们通过属性设置,在百度地图中需要通过实例的方法设置) - 通过addListenEvent为地图实例或其他实例添加事件,查看该类下支持哪些事件,根据需求添加
03 - 文档演示代码下载
文档演示代码下载
04 - 百度地图开发者平台
-
百度地图开发手册
-
百度地图开发指南
-
百度地图官方Demo
-
百度地图JSAPI 类参考
-
个性化地图编辑器
更多推荐
如何在项目中使用百度地图进行可视化展示
发布评论