View
6.143
Download
9
Category
Preview:
Citation preview
百度地图 API
web 前端研发部 马骥maji@baidu.com
2009 年 8 月 18 日麦兜团队
内容• 百度地图 API 介绍• 系统架构设计• 百度地图 API 特色• 百度地图 API 实战
什么是百度地图 API
？
什么是百度地图 API
• 基于 JavaScript 的类库• 在你的网站中集成地图应用• 数据与地图融合展现
– 标注、信息窗口、折线• 调用百度地图服务
– 公交、驾车、步行导航
什么是百度地图 API
• 手机客户端 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/
• 联系我们– Mapapi@baidu.com– HI群 : 1357363
Q&A
Recommended