百度地图之JavaScript API

百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口,可帮助您在网站中构建功能丰富、交互性强的地图应用,支持PC端和移动端基于浏览器的地图应用开发,且支持HTML5特性的地图开发。

该套API免费对外开放。自v1.5版本起,您需先申请密钥(ak)才可使用,接口(除发送短信功能外)无使用次数限制。

http://api.map.baidu.com/api?v=1.4 //参数v表示您加载API的版本,使用JavaScript APIv1.4及以前版本可使用此方式引用。
http://api.map.baidu.com/api?v=1.5&ak=您的密钥  //使用JavaScript APIv1.5请先申请密钥ak,按此方式引用。

使用百度地图JavaScript API之前,请先阅读百度地图API使用条款。任何非营利性应用请直接使用,商业应用请参考使用须知

  • 基本地图功能:展示(支持2D图、3D图、卫星图)、平移、缩放、拖拽等。

  • 地图控件展示功能:可以在地图上添加/删除鹰眼、工具条、比例尺、自定义版权、地图类型及定位控件,并可以设置各类控件的显示位置。

  • 覆盖物功能:支持在地图上添加/删除点、线、面、热区、行政区划、用户自定义覆盖物等;开源库提供富标注、标注管理器、聚合marker、自定义覆盖物等功能。

  • 工具类功能:提供经纬度坐标与屏幕坐标互转功能;开源库里提供测距、几何运算及GPS坐标/国测局坐标转百度坐标等功能。

  • 定位功能:支持IP定位及浏览器(支持html5特性浏览器)定位功能。

  • 右键菜单功能:支持在地图上添加右键菜单。

  • 鼠标交互功能:支持动态修改鼠标样式、鼠标拖拽/缩放地图及鼠标绘制等功能。

  • 图层功能:支持重设地图底图、地图上叠加实时交通图层或自定义图层功能。

  • 本地搜索功能:包括根据城市、矩形范围、圆形范围等条件进行POI搜索;且支持用户自有数据的检索。

  • 公交检索:支持起始点坐标、起始点名称、LocalSearchPoi实例三种检索条件的检索;检索结果支持便捷、可换乘、少步行、不乘地铁四种方案。

  • 驾车检索:支持起始点坐标、起始点名称、LocalSearchPoi实例三种检索条件的检索;返回最短时间、最短距离、避开高速的驾车导航结果;且提供计算打车费用服务。

  • 步行导航:提供步行导航方案。

  • 逆/地理编码:支持百度坐标与地址描述信息之间的转换服务。

  • 个性化数据展示功能:用户自有数据存储到LBS.云后,JavaScript API可以提供以麻点图形式展示自有数据功能。

看一个简单的示例吧,以下代码创建了一个地图并以天安门作为地图的中心:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  //添加一个meta标签,以便使您的页面更好的在移动平台上展示
<title>Hello, World</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}  //使地图充满整个浏览器窗口
#container{height:100%}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=您的密钥"></script>//此为v1.5版本的引用方式
  // http://api.map.baidu.com/api?v=1.5&key=您的密钥&callback=initialize"; //此为v1.4版本及以前版本的引用方式
</head>
 
<body>
<div id="container"></div>   //地图需要一个HTML元素作为容器
<script type="text/javascript">
var map = new BMap.Map("container");          // 创建地图实例
var point = new BMap.Point(116.404, 39.915);  // 创建点坐标
map.centerAndZoom(point, 15);                 // 初始化地图,设置中心点坐标和地图级别
</script> </body> </html>
posted @ 2013-10-25 00:04  无心花  阅读(1208)  评论(0编辑  收藏  举报