1. 百度地图API web前端研发部 马骥 maji@baidu.com

2. 2009年8月18日麦兜团队

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

4. 什么是百度地图API ？

5. 什么是百度地图API 基于JavaScript的类库 在你的网站中集成地图应用 数据与地图融合展现 标注、信息窗口、折线 调用百度地图服务 公交、驾车、步行导航

6. 什么是百度地图API 手机客户端SDK 定位服务 静态图API

7. 百度地图服务集 Javascript API Flash/Flex API iPhone Android Windows Mobile Symbian HTTP Services Static Map Baidu Map Service Engine

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

12. 系统架构介绍

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

15. 兼容性Compatibility

17. 功能Functionality

19. 定制化 自定义控件 自定义标注图标 自定义覆盖物 自定义图层 自定义地图类型

21. Library DistanceTool MarkerClusterer DragAndZoom PushpinTool PolylineTool PolygonTool … 所有都是开源的

22. 中型、大型案例库

23. 新技术 HTML5 CSS3

25. 性能Performance

26. 91.4K 63K 32.2K 初始脚本大小

27. 按需 异步 透明 跨域

28. 接口 + 实现 同步加载

29. 同步加载 接口 + 实现 异步加载(Dynamic Script Element)

30. Simplification

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

33. 内存使用

35. 百度地图的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>

36. 百度地图的Hello World

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

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

39. 添加控件 map.addControl(new BMap.NavigationControl());

40. 自定义控件 本质上是绝对定位在地图容器中的HTML元素。 开发者可自行编写HTML实现自己的控件

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

42. 标注 map.addOverlay(new BMap.Marker(map.getCenter()));

43. 自定义标注 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);

44. 自定义标注

45. 信息窗口 显示丰富信息 var info = new BMap.InfoWindow('Hello, World'); map.openInfoWindow(info, map.getCenter()); marker.openInfoWindow(info);

46. 信息窗口

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

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

49. 图层 交通流量图层 自定义图层

50. 事件机制 map.addEventListener("click", function(){ alert("您点击了地图。"); }); marker.addEventListener("click", function(){ this.openInfoWindow(info); });

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

52. 本地搜索 varlocal = new BMap.LocalSearch("北京", { renderOptions:{map: map} }); local.search("麦当劳");

53. 本地搜索

54. 地理编码 位置描述 地理坐标

55. 定位

56. 百度地图目标与使命 满足人们的基本出行需求，将虚拟世界与现实 世界连接在一起。

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

58. 更多地图API资源 地图API官方首页 http://dev.baidu.com/wiki/map/ 联系我们 Mapapi@baidu.com HI群:1357363

59. Q&A