百度地图

文章目录

百度地图
- 00 - 基本使用
- - 使用入门
  - 添加辅助功能
  - - 1 - 使用控件
    - 2 - 覆盖物简介
    - 3 - 使用标注点 - Marker
    - 4 - 使用信息窗口
    - 5 - 使用叠加图层
  - 事件处理
- 01 - 常用功能矩阵
- 02 - 如何查看百度地图的API
- 03 - 文档演示代码下载
- 04 - 百度地图开发者平台

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

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

03 - 文档演示代码下载

文档演示代码下载

04 - 百度地图开发者平台

百度地图开发手册
百度地图开发指南
百度地图官方Demo
百度地图JSAPI 类参考
个性化地图编辑器

从0开始使用百度地图相关推荐

微信7.0后使用百度地图JS API定位错误
本人亲身经历:过年前微信公众号好好的运行,定位准确,过年后回来上班发现公众号定位不准确了,偏移了几个省,开始以为程序的问题,各种百度,各种google,后来找到一篇大神的文章发现,微信升级7.0后对于 ...
vue 3.0使用离线百度地图
第一次使用vue3.0,在引入的时候就很懵,各种报错,后来才知道,应该把静态文件放到public文件里,于是在public文件下创建static文件存放百度地图资源. (这里缺少tiles文件,因为t ...
《TP5.0学习笔记---百度地图封装》
我们常常需要根据地址来获取经纬度,根据经纬度来调取百度地图等. 一. 根据地址获取经纬度类的封装 1, 获取第三方接口 2, 编写map类 3, 测试 1, 获取第三方接口 (1)进入http://l ...
Android 百度地图 SDK v3.0.0 （一）
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/37729091 最近公司要把百度地图集成的项目中,于是我就研究了一天百度地图的SD ...
可视化篇：Echarts3.0引入百度地图（更新）
update: 由于目前echarts3.8.X比之前旧版改动较多,其实地图实例处许多朋友留言跑不通,今天更新下新版的做法,亲测已经可以. perface 一直抽不开身,留言区以及不少朋友都在问如何在 ...
Android如何实现地图定位？Android studio+百度地图API+Android6.0系统实现地图显示、地址设置、点击地图定位功能（详细）
文章说明:本文初衷是为了记录毕设学习过程,避免忘记操作流程.该功能是毕业设计的Android软件端的功能之一,本文将从获取百度地图密钥(AK)开始,详细地对地图定位配置和相关代码进行说明,文末将附上实 ...
200万注册开发者，13亿全景图片，90%数据生产AI化，百度地图如何造生态？
12月29日, 2020百度地图生态大会在京举办.据悉,在AI技术加持下,百度地图实现了90%数据生产环节AI化,并全新升级生态全景2.0. 围绕百度地图2020年的各项进展,百度地图总经理季永志做出 ...
公司考勤模块集成百度地图SDK
百度地图SDK开发者网站: lbsyun.baidu.com/index.php?t- 一申请密钥(安全码):需要项目名称和bundle ID 网址:lbsyun.baidu.com/apicon ...
Android开发之百度地图定位以及简单覆盖物的实现
直接上代码: 先看下效果图: 我这里主要做了三个功能: 1.一秒钟实时定位功能: 2.添加任意经纬度地点到地图上: 3.判断朝阳门是否在本人定位范围1000米内: 百度地图初始化方法: DemoApp ...

从0开始使用百度地图