第1讲地图初始化和地图控件.ppt

高德LBS开放平台 第一讲：地图初始化和地图控件 拥抱JS 拥抱高德JS-API 轻捷的架构 API文件极小，简单易用 模块化地图功能，各模块按需加载 灵活开放的接口设计 支持用户自定义点标记、信息窗口等的样式 支持用户自定义插件工具，灵活的进行地图操作 地图拖拽、缩放平滑流畅 点标记、信息窗体效果绚丽 兼容各种浏览器 桌面端：IE6.0+、Chrome、Firefox 3.5+、Safari 3.0+、 Opera 9.0+ 移动端：IOS、Android、Windows Phone等移动平台浏览器 丰富的可视化效果 第一讲：地图初始化 控件 第二讲：地图覆盖物图层 第三讲：关于地图定位 第四讲：周边搜索 展示 第五讲：路径规划 展示 第六讲：工具使用(鼠标工具、点聚合、热力图等) 我们的目标是：星辰大海！ 熟练使用高德JS-API开发LBS应用 高德JS-API十分强大、体系完整； 高德JS-API接口优雅 、便捷； 升职加薪不是梦，双11不再孤单，不再剁手，而是买买买!!! 目标 发现 课程安排 A Map 一张地图，整个世界 AMap API 体系完整，功能丰富 JS-API 体系 -地图基本功能 -检索服务 -云图 高德JS-API简介 JS-API功能介绍 开发入门 API文档 Demos 实际含义 看“概述” Demo体验 看“开发指南” 看“参考手册” API文档地址：/api/javascript-api/reference/summary/ JS-API页面地址：/api/javascript-api/summary-3/ 《开发指南》可以快速到找到使用方法 《参考手册》可以全方面了解API、深入使用JS-API 如何使用API相关文档 注册官网账号 获取用户key 引入JS-API的外部脚本 tip：最好放在dom的底部；先渲染DOM树，再加载脚本，可以提高视觉体验 参考JS-API Demo开发 JS-API开发流程 地图类的地址：/api/javascript-api/reference/map/ 设置城市(setCity) 获取城市的中心点(getCenter) 设置缩放级别(setZoom) 获取当前级别(getZoom) 地图放大(zoomIn) 缩小(zoomOut) 加载一个插件(plugin) 监听地图事件(dragend) Hello ，map 简单地图对象构建 在参考手册中是“插件” 地图比例尺(AMap.Scale) 地图类型切换(AMap.MapType) 鹰眼控件(AMap.OverView) 工具条(AMap.ToolBar) MapInstance.addControl 增加地图控件 插件API的地址： /api/javascript-api/reference/plugin/ 鼠标工具(AMap.MouseTool?) 距离量算(AMap.RangingTool) 解馋：面积 距离量算 初始化地图并且带上4个地图控件； 用距离量测插件，绘制2014北京马拉松全程路线图； 用面积量测方法，测算鸟巢的大概占地面积。 第2和第3 二者选一个即可。 如果实现了上面3个需求，欢迎同我们交流你的实现过程和方法： 鬼谣：lihua.wang@ 雨久：yewei.liu@ 思考：使用JS-API 需求 Thanks! 1、拥抱JS 拥抱JS-API 前端大放异彩，前端MVC，客户端性能提升，前端渲染模板，业务逻辑在前端构建，减少了服务器的压力； Node.js给业务上前后端一体化提供了渠道，不仅良好的支持REST，同时基于事件和异步的方式，提高了业务服务器的性能。 * 升职加薪不是梦，双11不再孤单，不再剁手，而是买买买买!!! * 1.一张地图，整个世界(一个简单追求。品牌纯化，使命纯化，专注做好地图) 2.体系完整，功能丰富，如右图 * 参考手册（API文档）可以全方面了解API，深入使用JS-API * 注册官网账号 get key（演示） * 简单地图对象构建(代码演示) * 增加地图控件(代码演示) * 解馋：面积 距离量算(代码演示) * 高德LBS开放平台 1、拥抱JS 拥抱JS-API 前端大放异彩，前端MVC，客户端性能提升，前端渲染模板，业务逻辑在前端构建，减少了服务器的压力； Node.js给业务上前后端一体化提供了渠道，不仅良好的支持REST，同时基于事件和异步的方式，提高了业务服务器的性能。 * 升职加薪不是梦，双11不再孤单，不再剁手，而是买买买买!!! * 1.一张地图，整个世界(一个简单追求。品牌纯化，使命纯化，专注做好地图) 2.体系完整，功能丰富，如右图 * 参考手册（API文档）可以全