第四节课：百度地图api

百度地图 API

web 前端研发部马骥[email protected]

2009 年 8 月 18 日麦兜团队

内容• 百度地图 API 介绍• 系统架构设计• 百度地图 API 特色• 百度地图 API 实战

什么是百度地图 API

？


• 基于 JavaScript 的类库• 在你的网站中集成地图应用• 数据与地图融合展现

– 标注、信息窗口、折线• 调用百度地图服务

– 公交、驾车、步行导航


• 手机客户端 SDK• 定位服务• 静态图 API

百度地图服务集

Javascript API Flash/Flex API

iPhone Android

HTTP Services Static Map

Baidu Map Service Engine

Windows Mobile

Symbian

为行业提供解决方案• 房产搜索• 酒店预订• 旅游指南• 餐馆点评• 校园生活• 订单跟踪• 在线游戏• …

系统架构介绍

百度地图 API 特色• 兼容性• 功能• 可用性• 性能

兼容性Compatibility

功能Functionality

基础部分

核心部分

控件覆盖物图层工具

本地搜索公交导航驾车导航

步行导航定位服务地理编码

自定义控件

自定义覆盖物自定义图层

自定义标注图标

自定义地图类型

定制化

MarkerClusterer

DistanceTool DragAndZoom

PushpinTool PolylineTool PolygonTool

所有都是开源的

…

Library

中型、大型案例库

新技术

HTML5 CSS3

性能Performance

91.4K

63K

32.2K

初始脚本大小

按需异步

透明跨域

接口 +

实现

同步加载

接口

实现

+

异步加载 (Dynamic Script Element)

同步加载

Simplification

并不是所有的线都处于视野内

内存使用

百度地图的 Hello World

<script src="http://api.map.baidu.com/api?v=1.1&services=false" type="text/javascript"></script>

<div id="map" style="width:500px;height:340px"></div>

<script type="text/javascript">var map = new BMap.Map('map');map.centerAndZoom(new BMap.Point(116.404, 39.915), 14)</script>

百度地图的 Hello World

百度地图 API 基本功能• 控件• 覆盖物• 信息窗口• 图层

控件• 缩放 / 平移控件• 缩略图控件• 比例尺控件• 地图类型控件• 版权控件• 自定义控件

添加控件

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

自定义控件• 本质上是绝对定位在地图容器中的 HTML

元素。• 开发者可自行编写 HTML 实现自己的控件

覆盖物• 标注、文本标注• 折线• 多边形• 圆形

标注

map.addOverlay(new BMap.Marker(map.getCenter()));

自定义标注

var myIcon = new BMap.Icon( "http://api.map.baidu.com/img/markers.png", new BMap.Size(28, 37), {offset: new BMap.Size(15, 37)});

var marker = new BMap.Marker(map.getCenter(), { icon: myIcon});

map.addOverlay(marker);

自定义标注

信息窗口• 显示丰富信息

var info = new BMap.InfoWindow('Hello, World');map.openInfoWindow(info, map.getCenter());

marker.openInfoWindow(info);

信息窗口

信息窗口• 展现复杂 HTML 、视频也可以

自定义覆盖物• 具有自己的地理位置信息• 本质上是定位在某个位置的一段 HTML• 开发者可自行定义覆盖物

图层• 交通流量图层• 自定义图层

事件机制

map.addEventListener("click", function(){ alert(" 您点击了地图。 "); });

marker.addEventListener("click", function(){ this.openInfoWindow(info);});

百度地图 API 高级应用• 本地搜索• 导航服务• 地理编码• 定位

本地搜索

var local = new BMap.LocalSearch(" 北京 ", { renderOptions:{map: map} });local.search(" 麦当劳 ");

本地搜索

地理编码

位置描述地理坐标

定位

百度地图目标与使命

满足人们的基本出行需求，将虚拟世界与现实世界连接在一起。

地图 API 学习建议• 掌握 JavaScript 、 HTML 、 CSS• 面向对象编程• 阅读开发指南• 学习示例参考• 查看类文档

更多地图 API资源• 地图 API官方首页

– http://dev.baidu.com/wiki/map/

• 联系我们– [email protected]– HI群 : 1357363

mailto:[email protected]

Q&A

Education

第四节课：百度地图api