第四节课:百度地图api

6,482 views

Published on

Published in: Education, Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,482
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
126
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • 包括最新的IE9和Firefox4电视集成
  • 定制化能做什么?
  • 面向行业的解决方案示例,帮助开发者更快的完成任务
  • 问题2个新浏览器更酷的效果
  • 同样物理尺寸,分辨率扩大一倍(问题)首个基于js的高清方案480 x 320960 x 640
  • 代码拆分
  • 解决跨域问题
  • 计算量小渲染快更流畅
  • 问题内存
  • 困难
  • 第四节课:百度地图api

    1. 1. 百度地图API<br />web前端研发部 马骥<br />maji@baidu.com<br />
    2. 2. 2009年8月18日麦兜团队<br />
    3. 3. 内容<br />百度地图API介绍<br />系统架构设计<br />百度地图API特色<br />百度地图API实战<br />
    4. 4. 什么是百度地图API<br />?<br />
    5. 5. 什么是百度地图API<br />基于JavaScript的类库<br />在你的网站中集成地图应用<br />数据与地图融合展现<br />标注、信息窗口、折线<br />调用百度地图服务<br />公交、驾车、步行导航<br />
    6. 6. 什么是百度地图API<br />手机客户端SDK<br />定位服务<br />静态图API<br />
    7. 7. 百度地图服务集<br />Javascript API<br />Flash/Flex API<br />iPhone<br />Android<br />Windows Mobile<br />Symbian<br />HTTP Services<br />Static Map<br />Baidu Map Service Engine<br />
    8. 8. 为行业提供解决方案<br />房产搜索<br />酒店预订<br />旅游指南<br />餐馆点评<br />校园生活<br />订单跟踪<br />在线游戏<br />…<br />
    9. 9.
    10. 10.
    11. 11.
    12. 12. 系统架构介绍<br />
    13. 13.
    14. 14. 百度地图API特色<br />兼容性<br />功能<br />可用性<br />性能<br />
    15. 15. 兼容性Compatibility<br />
    16. 16.
    17. 17. 功能Functionality<br />
    18. 18.
    19. 19. 定制化<br /> 自定义控件<br /> 自定义标注图标<br /> 自定义覆盖物<br /> 自定义图层<br /> 自定义地图类型<br />
    20. 20.
    21. 21. Library<br />DistanceTool<br />MarkerClusterer<br />DragAndZoom<br />PushpinTool<br />PolylineTool<br />PolygonTool<br />…<br />所有都是开源的<br />
    22. 22. 中型、大型案例库<br />
    23. 23. 新技术<br />HTML5<br />CSS3<br />
    24. 24.
    25. 25. 性能Performance<br />
    26. 26. 91.4K<br />63K<br />32.2K<br />初始脚本大小<br />
    27. 27. 按需<br />异步<br />透明<br />跨域<br />
    28. 28. 接口<br />+ <br />实现<br />同步加载<br />
    29. 29. 同步加载<br />接口<br />+<br />实现<br />异步加载(Dynamic Script Element)<br />
    30. 30. Simplification<br />
    31. 31. 并不是所有的线都处于视野内<br />
    32. 32.
    33. 33. 内存使用<br />
    34. 34.
    35. 35. 百度地图的Hello World<br /><script <br />src="http://api.map.baidu.com/api?v=1.1&services=false" type="text/javascript"></script><br /><div id="map" style="width:500px;height:340px"></div><br /><script type="text/javascript"><br />var map = new BMap.Map('map');<br />map.centerAndZoom(new BMap.Point(116.404, 39.915), 14)<br /></script><br />
    36. 36. 百度地图的Hello World<br />
    37. 37. 百度地图API基本功能<br />控件<br />覆盖物<br />信息窗口<br />图层<br />
    38. 38. 控件<br />缩放/平移控件<br />缩略图控件<br />比例尺控件<br />地图类型控件<br />版权控件<br />自定义控件<br />
    39. 39. 添加控件<br />map.addControl(new BMap.NavigationControl());<br />
    40. 40. 自定义控件<br />本质上是绝对定位在地图容器中的HTML元素。<br />开发者可自行编写HTML实现自己的控件<br />
    41. 41. 覆盖物<br />标注、文本标注<br />折线<br />多边形<br />圆形<br />
    42. 42. 标注<br />map.addOverlay(new BMap.Marker(map.getCenter()));<br />
    43. 43. 自定义标注<br />var myIcon = new BMap.Icon(<br /> "http://api.map.baidu.com/img/markers.png", <br /> new BMap.Size(28, 37), <br /> {offset: new BMap.Size(15, 37)}); <br />var marker = new BMap.Marker(map.getCenter(), {<br /> icon: myIcon<br />});<br />map.addOverlay(marker);<br />
    44. 44. 自定义标注<br />
    45. 45. 信息窗口<br />显示丰富信息<br />var info = new BMap.InfoWindow('Hello, World');<br />map.openInfoWindow(info, map.getCenter());<br />marker.openInfoWindow(info);<br />
    46. 46. 信息窗口<br />
    47. 47. 信息窗口<br />展现复杂HTML、视频也可以<br />
    48. 48. 自定义覆盖物<br />具有自己的地理位置信息<br />本质上是定位在某个位置的一段HTML<br />开发者可自行定义覆盖物<br />
    49. 49. 图层<br />交通流量图层<br />自定义图层<br />
    50. 50. 事件机制<br />map.addEventListener("click", function(){ <br />alert("您点击了地图。"); <br />});<br />marker.addEventListener("click", function(){<br />this.openInfoWindow(info);<br />});<br />
    51. 51. 百度地图API高级应用<br />本地搜索<br />导航服务<br />地理编码<br />定位<br />
    52. 52. 本地搜索<br />varlocal = new BMap.LocalSearch("北京", { <br />renderOptions:{map: map} <br />});<br />local.search("麦当劳");<br />
    53. 53. 本地搜索<br />
    54. 54. 地理编码<br />位置描述<br />地理坐标<br />
    55. 55. 定位<br />
    56. 56. 百度地图目标与使命<br />满足人们的基本出行需求,将虚拟世界与现实<br />世界连接在一起。<br />
    57. 57. 地图API学习建议<br />掌握JavaScript、HTML、CSS<br />面向对象编程<br />阅读开发指南<br />学习示例参考<br />查看类文档<br />
    58. 58. 更多地图API资源<br />地图API官方首页<br />http://dev.baidu.com/wiki/map/<br />联系我们<br />Mapapi@baidu.com<br />HI群:1357363<br />
    59. 59. Q&A<br />

    ×