百度地图API开发指南课件

百度地图百度地图APIAPI开发指南开发指南Michael1百度地图API开发指南Michael1简介基础知识控件覆盖物事件地图图层工具服务坐标转换演示目录目录2简介目录2百度地图API是一套由JavaScript语言编写的应用程序接口，它能够帮助您在网站中构建功能丰富、交互性强的地图应用程序。百度地图API不仅包含构建地图的基本功能接口，还提供了诸如本地搜索、路线规划等数据服务。简介简介什么是百度地图什么是百度地图什么是百度地图什么是百度地图APIAPIAPIAPI？3百度地图API是一套由JavaScript语言编写的应用程序通过地址 http:/ 加载API：其中参数key为密钥，参数v为当前API的版本号，目前最新版本为1.0，services参数表示是否加载服务部分，true表示加载，false表示不加载。简介简介获取获取获取获取APIAPIAPIAPI4通过地址 http:/ http:/ 中的参数v表示您加载API的版本，例如当前API的最新版本为1.0，则您可在地址中添加 v=1.0。当API升级后，如果已有接口在使用、命名等方面发生了变化，我们会为其增加一个新的版本号（比如1.1），这不会对您现有的应用造成任何影响。如果升级只是修改一些bug或者在不影响现有功能的前提下增加接口，则版本号不会发生变化。简介简介版本说明版本说明版本说明版本说明5地址 http:/ 6.0+、Firefox 3.0+、Opera 9.0+、Safari 3.0+、Chrome操作系统：Windows、Mac、Linux简介简介兼容性兼容性兼容性兼容性6浏览器：IE 6.0+、Firefox 3.0+、Opera一、引用百度地图一、引用百度地图APIAPI文件文件当您引用地图API文件时，需要使用自己申请的API密钥。script&services=false二、创建地图容器元素二、创建地图容器元素div=container地图需要一个HTML元素作为容器，这样才能展现到页面上。这里我们创建了一个div元素并制定它的大小地图会根据容器大小调整自身尺寸。基础知识基础知识百度地图的百度地图的百度地图的百度地图的“Hello,World”Hello,World”Hello,World”Hello,World”7一、引用百度地图API文件基础知识百度地图的“Hello,三、命名空间三、命名空间API使用BMap作为命名空间，所有类均在该命名空间之下，比如：BMap.MapBMap.Map、BMap.ControlBMap.Control、BMap.OverlayBMap.Overlay。四、创建地图实例四、创建地图实例varvar mapmap=newnew BMap.MapBMap.Map(containercontainer););位于BMap命名空间下的Map类表示地图，通过new操作符可以创建一个地图实例。其参数可以是元素id也可以是元素对象。注意在调用此构造函数时应确保容器元素已经添加到地图上。基础知识基础知识百度地图的百度地图的百度地图的百度地图的“Hello,World”Hello,World”Hello,World”Hello,World”8三、命名空间基础知识百度地图的“Hello,World”五、创建点坐标五、创建点坐标varvarpoint=point=newnewBMap.Point(116.404,39.915);BMap.Point(116.404,39.915);这里我们使用BMapBMap命名空间下的PointPoint类来创建一个坐标点。PointPoint类描述了一个地理坐标点，其中116.404表示经度，39.915表示纬度。六、地图初始化六、地图初始化map.centerAndZoom(point,15);map.centerAndZoom(point,15);在创建地图实例后，我们需要对其进行初始化，BMap.Map.centerAndZoomBMap.Map.centerAndZoom()()方法要求设置中心点坐标和地图级别。地图必须必须经过初始化才可以执行其他操作。基础知识基础知识百度地图的百度地图的百度地图的百度地图的“Hello,World”Hello,World”Hello,World”Hello,World”9五、创建点坐标基础知识百度地图的“Hello,World五、创建点坐标五、创建点坐标varvarpoint=point=newnewBMap.Point(116.404,39.915);BMap.Point(116.404,39.915);这里我们使用BMapBMap命名空间下的PointPoint类来创建一个坐标点。PointPoint类描述了一个地理坐标点，其中116.404表示经度，39.915表示纬度。六、地图初始化六、地图初始化map.centerAndZoom(point,15);map.centerAndZoom(point,15);在创建地图实例后，我们需要对其进行初始化，BMap.Map.centerAndZoomBMap.Map.centerAndZoom()()方法要求设置中心点坐标和地图级别。地图必须必须经过初始化才可以执行其他操作。基础知识基础知识百度地图的百度地图的百度地图的百度地图的“Hello,World”Hello,World”Hello,World”Hello,World”10五、创建点坐标基础知识百度地图的“Hello,World基础知识基础知识百度地图的百度地图的百度地图的百度地图的“Hello,World”Hello,World”Hello,World”Hello,World”11基础知识百度地图的“Hello,World”11百度地图上负责与地图交互的UI元素称为控件控件。百度地图API中提供了丰富的控件，您还可以通过BMap.Control来实现自定义控件。地图API中提供的控件有：Control：控件的抽象基类抽象基类，所有控件均继承此类的方法、属性。通过此类您可实现自定义控件。NavigationControl：地图平移缩放控件平移缩放控件，默认位于地图左上方，它包含控制地图的平移和缩放的功能。OverviewMapControl：缩略地图控件缩略地图控件，默认位于地图右下方，是一个可折叠的缩略地图。ScaleControl：比例尺控件比例尺控件，默认位于地图左下方，显示地图的比例关系。CopyrightControl：版权控件版权控件，默认位于地图左下方。所有这些控件都基于BMap.Control类。控件控件地图控件概述地图控件概述地图控件概述地图控件概述12百度地图上负责与地图交互的UI元素称为控件。百度地图API中可以使用BMap.Map.addControl()BMap.Map.addControl()方法向地图添加控件也可以向地图添加多个控件。在本例中我们向地图添加一个平移缩放控件、一个比例尺控件和一个缩略图控件在地图中添加控件后，它们即刻生效。map.addControl(map.addControl(newnewBMap.NavigationControl();BMap.NavigationControl();map.addControl(map.addControl(newnewBMap.ScaleControl();BMap.ScaleControl();map.addControl(map.addControl(newnewBMap.OverviewMapControl();BMap.OverviewMapControl();控件控件向地图添加控件向地图添加控件向地图添加控件向地图添加控件13可以使用BMap.Map.addControl()方法向地图控件控件向地图添加控件向地图添加控件向地图添加控件向地图添加控件14控件向地图添加控件14所有叠加或覆盖到地图的内容，我们统称为地图覆盖物覆盖物。如标注、矢量图形元素(包括：折线和多边形)、信息窗口等。覆盖物拥有自己的地理坐标，当您拖动或缩放地图时，它们会相应的移动。地图API提供了如下几种覆盖物：OverlayOverlay：覆盖物的抽象基类抽象基类，此类不可实例化，所有的覆盖物均继承此类的方法。MarkerMarker：标注标注表示地图上的点，可自定义标注的图标。LabelLabel：表示地图上的文本标注文本标注，您可以自定义标注的文本内容。PolylinePolyline：表示地图上的折线折线。PolygonPolygon：表示地图上的多边形多边形。多边形类似于闭合的折线，另外您也可以为其添加填充颜色。InfoWindowInfoWindow：信息窗口信息窗口也是一种特殊的覆盖物。注意：同一时刻只能有一个信息窗口在地图上打开。可以使用BMap.Map.addOverlay()BMap.Map.addOverlay()方法向地图添加覆盖物，使用BMap.Map.removeOverlayBMap.Map.removeOverlay()()方法移除覆盖物，注意此方法不适用于InfoWindowInfoWindow。覆盖物覆盖物地图覆盖物概述地图覆盖物概述地图覆盖物概述地图覆盖物概述15所有叠加或覆盖到地图的内容，我们统称为地图覆盖物。如标注、矢覆盖物覆盖物地图覆盖物概述地图覆盖物概述地图覆盖物概述地图覆盖物概述16覆盖物地图覆盖物概述16百度地图API中的每一个对象都含有addEventListeneraddEventListener方法，您可以通过该方法来监听对象事件。例如，BMap.MapBMap.Map包含 clickclick、dblclickdblclick等事件。在特定环境下这些事件会被触发，同时监听函数会得到相应的事件参数e，比如当用户点击地图时，e e参数会包含鼠标所对 应的地理位置pointpoint。有关地图API对象的事件，请参考完整的API参考文档。addEventListeneraddEventListener方法有两个参数：监听的事件名称和事件触发时调用的函数。事件事件事件的监听事件的监听事件的监听事件的监听17百度地图API中的每一个对象都含有addEventListe地图可以包含一个或多个图层，每个图层在每个级别都是由若干张图块组成的，它们覆盖了地球的整个表面。在最低的缩放级别（级别 1）中，整个地球由 4 张图块组成。随着级别的增长，地图所使用的图块个数也随之增多。地图图层地图图层地图图层概念地图图层概念地图图层概念地图图层概念18地图可以包含一个或多个图层，每个图层在每个级别都是由若干张图百度地图中提供一个BMap.TileLayer类，可以实现用户自定义图层功能。可以在百度地图上叠加一层自定义的图块。以下代码在每个图块的所有缩放级别上显示一个简单的透明叠加层，使用浮动红色小水滴表示图块的轮廓。varvarmap=newnewBMap.Map(containercontainer);/创建地图实例varvarpoint=newnewBMap.Point(116.404,39.915);/创建点坐标map.centerAndZoom(point,15);/初始化地图，设置中心点坐标和地图级别varvartilelayer=newnewBMap.TileLayer();/创建地图层实例tilelayer.getTilesUrl=functionfunction()/设置图块路径returnreturnlayer.giflayer.gif;map.addTileLayer(tilelayer);/将图层添加到地图上地图图层地图图层自定义图层自定义图层自定义图层自定义图层19百度地图中提供一个BMap.TileLayer类，可以实现用地图图层地图图层自定义图层自定义图层自定义图层自定义图层20地图图层自定义图层20百度地图提供了交互功能更为复杂的“工具”，它包括PushpinTool：标注工具标注工具。通过此工具用户可在地图任意区域添加标注。DistanceTool：测距工具测距工具。通过此工具用户可测量地图上任意位置之间的距离。DragAndZoomTool：区域缩放工具区域缩放工具。此工具将根据用户拖拽绘制的矩形区域大小对地图进行放大或缩小操作。工具类在初始化时需要提供地图实例参数，以便使工具在该地图上生效。您可以在地图上添加多个工具，但同一时刻只能有一个工具处于开启状态。标注工具和测距工具在完成一次操作后将自动退出开启状态，而区域缩放工具可以自行配置是否自动关闭。工具工具地图工具概述地图工具概述地图工具概述地图工具概述21百度地图提供了交互功能更为复杂的“工具”，它包括工具地图工varvarmap=map=newnewBMap.MapBMap.Map(container);(container);map.centerAndZoom(newBMap.Point(116.404,39.915),15);map.centerAndZoom(newBMap.Point(116.404,39.915),15);varvarmyDis=myDis=newnewBMap.DistanceTool(map);BMap.DistanceTool(map);myDis.open();myDis.open();工具工具向地图添加工具向地图添加工具向地图添加工具向地图添加工具22varmap=newBMap.Map(contai地图服务是指那些提供数据信息的接口，比如本地搜索、路线规划等等。百度地图API提供的服务有：LocalSearch：本地搜索本地搜索，提供某一特定地区的位置搜索服务比如在北京市搜索“公园”。TransitRoute：公交导航公交导航，提供某一特定地区的公交出行方案的搜索服务。DrivingRoute：驾车导航驾车导航，提供驾车出行方案的搜索服务。WalkingRoute：步行导航步行导航，提供步行出行方案的搜索服务。Geocoder：地址解析地址解析，提供将地址信息转换为坐标点信息的服务。LocalCity：本地城市本地城市，提供自动判断您所在城市的服务。TrafficControl：实时路况控件实时路况控件，提供实时和历史路况信息服务。搜索类的服务接口需要指定一个搜索范围，否则接口将不能工作。服务服务地图服务概述地图服务概述地图服务概述地图服务概述23地图服务是指那些提供数据信息的接口，比如本地搜索、路线规划等服务服务结果面板结果面板结果面板结果面板24服务结果面板24因目前各家地图API服务商都沿用不同的坐标体系，故客户在更换API服务商或对各家API性能进行测试的时候会遇到较大的障碍。因此百度地图提供 坐标转换工具，使您可以方便地将不同的坐标体系转换为百度地图标准坐标。极大地降低您更换API服务的成本，同时扩大了可选择范围和自由度。目前百度地图坐标转换工具支持以下API服务商所采用的坐标体系：MapbarMapabc51ditu谷歌坐标转换坐标转换坐标转换概述坐标转换概述坐标转换概述坐标转换概述25因目前各家地图API服务商都沿用不同的坐标体系，故客户在更换请求接口中有四个参数：fromfrom：被转换的坐标体系 toto：转换到这个坐标体系 x x：经度 y y：纬度 接口应答中有三个keykey：(应答格式如：error:0,x:116.2610991221,y:29.820560874846)error:0,x:116.2610991221,y:29.820560874846)errorerror：值为0时，则为成功，非0时，则为失败 x x：目的经度，即百度坐标经度 y y：目的纬度，即百度坐标纬度 接口的使用示例谷歌http:/ 51地图：51地图的坐标，先要除105，然后再调用urlhttp:/