第四节课：百度地图api

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

2009年8月18日麦兜团队

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

什么是百度地图API
？

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

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

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

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

系统架构介绍

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

兼容性Compatibility

功能Functionality

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

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

中型、大型案例库

新技术
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高级应用
本地搜索
导航服务
地理编码
定位

本地搜索
varlocal = 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

第四节课：百度地图api

by Tommy Chang on Jul 07, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

Statistics

第四节课：百度地图api — Presentation Transcript