为了正常的体验网站,请在浏览器设置里面开启Javascript功能!

百度地图API开发指南

2012-02-01 22页 pdf 269KB 59阅读

用户头像

is_688325

暂无简介

举报
百度地图API开发指南 百度地图 APIAPIAPIAPI开发指南 1.简介 什么是百度地图 APIAPIAPIAPI? 百度地图 API是一套由 JavaScript语言编写的应用程序接口,它能够帮助您在网站中构建 功能丰富、交互性强的地图应用程序。 百度地图 API不仅包含构建地图的基本功能接口,还提供了诸如本地搜索、路线规划等数 据服务。 面向的读者 API是提供给那些具有一定 HTML和 JavaScript编程经验的读者使用的。此外,读者还应 该对地图产品有一定的了解。 您可能对地图的内部处理逻辑不是很了解,百度地图 API...
百度地图API开发指南
百度地图 APIAPIAPIAPI开发指南 1.简介 什么是百度地图 APIAPIAPIAPI? 百度地图 API是一套由 JavaScript语言编写的应用程序接口,它能够帮助您在网站中构建 功能丰富、交互性强的地图应用程序。 百度地图 API不仅包含构建地图的基本功能接口,还提供了诸如本地搜索、路线规划等数 据服务。 面向的读者 API是提供给那些具有一定 HTML和 JavaScript编程经验的读者使用的。此外,读者还应 该对地图产品有一定的了解。 您可能对地图的内部处理逻辑不是很了解,百度地图 API会尽量将复杂的底层逻辑进行隐 藏和封装,以一种便于您理解的方式提供。 您在使用中遇到任何问题,都可以反馈给我们。 兼容性 浏览器:IE 6.0+、Firefox 3.0+、Opera 9.0+、Safari 3.0+、Chrome 操作系统:Windows、Mac、Linux 获取 APIAPIAPIAPI 通过地址 http://api.map.baidu.com/api 加载 API: 其中参数 key为密钥,您可以在这里密钥。参数 v为当前 API的版本号,目前最新版本 为1.0,services参数表示是否加载服务部分,true表示加载,false表示不加载。 版本说明 地址 http://api.map.baidu.com/api?v=1.0 中的参数 v表示您加载 API的版本,例如当前 API 的最新版本为1.0,则您可在地址中添加 v=1.0。当 API升级后,如果已有接口在使用、命 名等方面发生了变化,我们会为其增加一个新的版本号(比如1.1),这不会对您现有的应用 造成任何影响。如果升级只是修改一些 bug或者在不影响现有功能的前提下增加接口,则 版本号不会发生变化。 2.基础知识 百度地图的““““Hello,Hello,Hello,Hello, WorldWorldWorldWorld”””” 开始学习百度地图 API最简单的方式是看一个简单的示例。以下代码创建了一个520x340 大小的地图区域并以天安门作为地图的中心: view plainprint 1 2 3 4 />/>/> 5 <title><title><title>Hello, World 6 >>> 7 8 9
>
>
>
10 11 12 13 view plainprint 14 19 查看示例 下面我们分步向您介绍: 引用百度地图 APIAPIAPIAPI文件 当您引用地图 API文件时,需要使用自己申请的 API密钥。 view plainprint 20 >>> 21 创建地图容器元素 view plainprint 22
>
>
>
23 地图需要一个 HTML元素作为容器,这样才能展现到页面上。这里我们创建了一个 div元素 并制定它的大小。地图会根据容器大小调整自身尺寸。 命名空间 API使用 BMap作为命名空间,所有类均在该命名空间之下,比如:BMap.Map、BMap.Control、 BMap.Overlay。 创建地图实例 view plainprint 24 varvarvarvarmap = newnewnewnew BMap.Map("container"); 25 位于 BMap命名空间下的Map类表示地图,通过 new操作符可以创建一个地图实例。其参 数可以是元素 id也可以是元素对象。 注意在调用此构造函数时应确保容器元素已经添加到地图上。 创建点坐标 view plainprint 26 varvarvarvar point = newnewnewnew BMap.Point(116.404, 39.915); 27 这里我们使用 BMap命名空间下的 Point类来创建一个坐标点。Point类描述了一个地理坐标 点,其中116.404表示经度,39.915表示纬度。 地图初始化 view plainprint 28 map.centerAndZoom(point,15); 29 在创建地图实例后,我们需要对其进行初始化,BMap.Map.centerAndZoom()方法要求设置中 心点坐标和地图级别。 地图必须经过初始化才可以执行其他操作。 地图操作 地图被实例化并完成初始化以后,就可以与其进行交互了。API中的地图对象的外观与行为 与百度地图网站上交互的地图非常相似。它支持鼠标拖拽、滚轮缩放、双击放大等交互功能。 您也可以修改配置来改变这些功能。 您还可以通过编程的方式与地图交互。Map类提供了若干修改地图状态的方法。例如: setCenter()、panTo()、zoomTo()等等。 下面示例显示一个地图,等待两秒钟后,它会移动到新中心点。panTo()方法将让地图平滑 移动至新中心点,如果移动距离超过了当前地图区域大小,则地图会直跳到该点。 view plainprint 30 varvarvarvarmap = newnewnewnew BMap.Map("container"); 31 varvarvarvar point = newnewnewnew BMap.Point(116.404, 39.915); 32 map.centerAndZoom(point, 15); 33 window.setTimeout(functionfunctionfunctionfunction(){ 34 map.panTo(newnewnewnew BMap.Point(116.409, 39.918)); 35 }, 2000); 36 查看示例 3.控件 地图控件概述 百度地图上负责与地图交互的 UI元素称为控件。百度地图 API中提供了丰富的控件,您还 可以通过 BMap.Control来实现自定义控件。 地图 API中提供的控件有: Control:控件的抽象基类,所有控件均继承此类的方法、属性。通过此类您可实现自定义 控件。 NavigationControl:地图平移缩放控件,默认位于地图左上方,它包含控制地图的平移和缩 放的功能。 OverviewMapControl:缩略地图控件,默认位于地图右下方,是一个可折叠的缩略地图。 ScaleControl:比例尺控件,默认位于地图左下方,显示地图的比例关系。 CopyrightControl:版权控件,默认位于地图左下方。 所有这些控件都基于 BMap.Control类。 向地图添加控件 可以使用 BMap.Map.addControl()方法向地图添加控件。在此之前地图需要进行初始化。例 如,要将地图控件添加到地图中,可在代码中添加如下内容: view plainprint 1 varvarvarvarmap = newnewnewnew BMap.Map("container"); 2 map.centerAndZoom(newnewnewnew BMap.Point(116.404, 39.915), 11); 3 map.addControl(newnewnewnew BMap.NavigationControl()); 查看示例 可以向地图添加多个控件。在本例中我们向地图添加一个平移缩放控件、一个比例尺控件和 一个缩略图控件。在地图中添加控件后,它们即刻生效。 view plainprint 4 map.addControl(newnewnewnew BMap.NavigationControl()); 5 map.addControl(newnewnewnew BMap.ScaleControl()); 6 map.addControl(newnewnewnew BMap.OverviewMapControl()); 查看示例 控制控件的位置 初始化控件时,可提供一个可选参数,参数类型为一个 JavaScript对象。其中 anchor 和 offsetX、offsetY共同控制控件在地图上的位置。anchor表示控件停靠在地图的哪个角,允 许的值为: BMAP_ANCHOR_TOP_LEFT BMAP_ANCHOR_TOP_RIGHT BMAP_ANCHOR_BOTTOM_LEFT BMAP_ANCHOR_BOTTOM_RIGHT 除了指定停靠位置外,还可以提供偏移量,用来指示控件距离地图边界相隔多少像素。 本示例将标准地图控件放置在地图的右上角,间隔10个像素。 view plainprint 7 varvarvarvar opts = {anchor: BMAP_ANCHOR_TOP_RIGHT, offset: newnewnewnew BMap.Size(10, 10)} 8 map.addControl(newnewnewnew BMap.NavigationControl(opts)); 查看示例 修改控件的配置 地图 API的控件提供了丰富的配置参数,您可参考 API文档来修改它们以便得到符合要求 的控件外观。 本示例将调整平移缩放地图控件的外观。 view plainprint 9 varvarvarvar opts = {type: BMAP_NAVIGATION_CONTROL_SMALL} 10 map.addControl(newnewnewnew BMap.NavigationControl(opts)); 查看示例 自定义控件 百度地图 API允许您通过继承 BMap.Control来创建自定义地图控件。(注意 JavaScript是 通过 prototype属性进行继承的) 要创建可用的自定义控件,您需要实现类定义中的一个抽象方法并给两个属性赋值,它们是: initialize()和 defaultAnchor、defaultOffset。initialize()方法必须返回控件容器的 DOM元素, defaultAnchor为控件默认的停靠位置,defaultOffset为控件默认的间隔距离。 所有自定义的地图控件中的 DOM元素最终都应该添加到地图容器(即地图所在的 DOM元 素)中去,这个地图容器可以通过 BMap.Map.getContainer()方法获得。 在此示例中,我们创建一个简单的放大控件,每一次点击将地图放大两个级别。它具有文本 标识,而不是平移缩放控件中使用的图形图标。 view plainprint 11 // 定义一个控件类,即 function 12 functionfunctionfunctionfunctionZoomControl(){ 13 // 设置默认停靠位置和偏移量 14 thisthisthisthis.defaultAnchor = BMAP_ANCHOR_TOP_LEFT; 15 thisthisthisthis.defaultOffset = newnewnewnew BMap.Size(10, 10); 16 } 17 18 // 通过 JavaScript的 prototype属性继承于 BMap.Control 19 ZoomControl.prototype = newnewnewnew BMap.Control(); 20 21 // 自定义控件必须实现自己的 initialize方法,并且将控件的 DOM元素返回 22 // 在本方法中创建个 div元素作为控件的容器,并将其添加到地图容器中 23 ZoomControl.prototype.initialize = functionfunctionfunctionfunction(map){ 24 // 创建一个 DOM元素 25 varvarvarvar div = document.createElement("div"); 26 // 添加文字说明 27 div.appendChild(document.createTextNode("放大2级")); 28 // 设置样式 29 div.style.cursor = "pointer"; 30 div.style.border = "1px solid gray"; 31 div.style.backgroundColor = "white"; 32 // 绑定事件,点击一次放大两级 33 div.onclick = functionfunctionfunctionfunction(e){ 34 map.zoomTo(map.getZoom() + 2); 35 } 36 // 添加 DOM元素到地图中 37 map.getContainer().appendChild(div); 38 // 将 DOM元素返回 39 returnreturnreturnreturndiv; 40 } 41 42 // 创建控件 43 varvarvarvarmyZoomCtrl = newnewnewnew ZoomControl(); 44 // 添加到地图当中 45 map.addControl(myZoomCtrl); 查看示例 4.覆盖物 地图覆盖物概述 所有叠加或覆盖到地图的内容,我们统称为地图覆盖物。如标注、矢量图形元素(包括:折 线和多边形)、信息窗口等。覆盖物拥有自己的地理坐标,当您拖动或缩放地图时,它们会 相应的移动。 地图 API提供了如下几种覆盖物: Overlay:覆盖物的抽象基类,此类不可实例化,所有的覆盖物均继承此类的方法。 Marker:标注表示地图上的点,可自定义标注的图标。 Label:表示地图上的文本标注,您可以自定义标注的文本内容。 Polyline:表示地图上的折线。 Polygon:表示地图上的多边形。多边形类似于闭合的折线,另外您也可以为其添加填充颜 色。 InfoWindow:信息窗口也是一种特殊的覆盖物。注意:同一时刻只能有一个信息窗口在地 图上打开。 可 以 使 用 BMap.Map.addOverlay() 方 法 向 地 图 添 加 覆 盖 物 , 使 用 BMap.Map.removeOverlay()方法移除覆盖物,注意此方法不适用于 InfoWindow。 标注 标注表示地图上的点。API提供了默认图标样式,您也可以通过 Icon类来指定自定义图标。 BMap.Marker的构造函数的参数为 BMap.Point和 BMap.MarkerOptions(可选)。 注意: 当您使用自定义图标时,标注的地理坐标点将位于标注所用图标的中心位置,您可通过 Icon 的 offset属性修改标定位置。 下面的示例向地图中心点添加了一个标注,并使用默认的标注样式。 view plainprint 1 varvarvarvarmap = newnewnewnew BMap.Map("container"); 2 varvarvarvar point = newnewnewnew BMap.Point(116.404, 39.915); 3 map.centerAndZoom(point, 15); 4 varvarvarvarmarker = newnewnewnew BMap.Marker(point); // 创建标注 5 map.addOverlay(marker); // 将标注添加到地图中 查看示例 定义标注图标 通过 BMap.Icon类可实现自定义标注的图标,下面示例通过参数 BMap.MarkerOptions的 icon属性进行设置,您也可以使用 BMap.Marker.setIcon()方法。 view plainprint 6 varvarvarvarmap = newnewnewnew BMap.Map("container"); 7 varvarvarvar point = newnewnewnew BMap.Point(116.404, 39.915); 8 map.centerAndZoom(point, 15); 9 10 // 编写自定义函数,创建标注 11 functionfunctionfunctionfunction addMarker(point, index){ 12 // 创建图标对象 13 varvarvarvarmyIcon = newnewnewnew BMap.Icon("http://api.map.baidu.com/img/markers.png", newnewnewnewBMap.Size(23, 25), { 14 offset: newnewnewnew BMap.Size(10, 25), // 指定定位位置 15 imageOffset: newnewnewnew BMap.Size(0, 0 - index * 25) // 设置图片偏移 16 }); 17 varvarvarvarmarker = newnewnewnew BMap.Marker(point, {icon: myIcon}); 18 map.addOverlay(marker); 19 } 20 21 // 随机向地图添加10个标注 22 varvarvarvar bounds = map.getBounds(); 23 varvarvarvar lngSpan = bounds.maxX - bounds.minX; 24 varvarvarvar latSpan = bounds.maxY - bounds.minY; 25 forforforfor (varvarvarvar i = 0; i < 10; i ++) { 26 varvarvarvar point = newnewnewnewBMap.Point(bounds.minX + lngSpan * (Math.random() * 0.7 + 0.15), 27 bounds.minY + latSpan * (Math.random() * 0.7 + 0.15)); 28 addMarker(point, i); 29 } 查看示例 监听标注的事件 事件方法与 Map事件机制相同。可参考事件部分。 view plainprint 30 marker.addEventListener("click", functionfunctionfunctionfunction(){ 31 alert("您点击了标注"); 32 }); 内存释放 如果您在地图中需要反复添加大量的标注,这可能会占用较多的内存资源。如果您的标注在 被移除后不再使用,可调用 Overlay.dispose()方法来释放内存。注意在调用此方法后标注将 不能再次添加到地图上。关于 Overlay.dispose()的详细信息可参考 API文档部分内容。 例如,您可以在标注被移除后调用此方法: view plainprint 33 map.removeOverlay(marker); 34 marker.dispose(); 35 信息窗口 信息窗口在地图上方的浮动显示 HTML内容。信息窗口可直接在地图上的任意位置打开, 也可以在标注对象上打开(此时信息窗口的坐标与标注的坐标一致)。 您可以使用 BMap.InfoWindow来创建一个信息窗实例,注意同一时刻地图上只能有一个信息窗口处于 打开状态。 view plainprint 36 varvarvarvar opts = { 37 width : 250, // 信息窗口宽度 38 height: 100, // 信息窗口高度 39 title : "Hello" // 信息窗口标题 40 } 41 varvarvarvar infoWindow = newnewnewnew BMap.InfoWindow("World", opts); // 创建信息窗口对象 42 map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口 查看示例 折线 BMap.Polyline对象表示地图上的折线覆盖物。它包含一组点,并将这些点连接起来形成折 线。 添加折线 折线在地图上绘制为一系列直线段。可以自定义这些线段的颜色、粗细和透明度。颜色可以 是十六进制数字形式(比如:#ff0000)或者是颜色关键字(比如:red)。 BMap.Polyline对象需要浏览器支持矢量绘制功能。在 Internet Explorer中,地图使用 VML (请参阅 VML)绘制折线;在其他浏览器中使用 SVG(如果可用)。 以下代码段会在两点之间创建6像素宽的蓝色折线: view plainprint 43 varvarvarvar polyline = newnewnewnew BMap.Polyline([ 44 newnewnewnew BMap.Point(116.399, 39.910), 45 newnewnewnew BMap.Point(116.405, 39.920) 46 ], 47 {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5} 48 ); 49 map.addOverlay(polyline); 查看示例 5.事件 地图事件概述 浏览器中的 JavaScript是“事件驱动的”,这表示 JavaScript通过生成事件来响应交互,并 期望程序能够“监听”感兴趣的活动。例如,在浏览器中,用户的鼠标和键盘交互可以创建在 DOM内传播的事件。对某些事件感兴趣的程序会为这些事件注册 JavaScript事件监听器, 并在接收这些事件时执行代码。 百度地图 API拥有一个自己的事件模型,程序员可监听地图 API对象的自定义事件,使用 方法和 DOM事件类似。但请注意,地图 API事件是独立的,与标准 DOM事件不同。 事件的监听 百度地图 API中的每一个对象都含有 addEventListener方法,您可以通过该方法来监听对 象事件。例如,BMap.Map包含 click、dblclick等事件。在特定环境下这些事件会被触发, 同时监听函数会得到相应的事件参数 e,比如当用户点击地图时,e参数会包含鼠标所对应 的地理位置 point。 有关地图 API对象的事件,请参考完整的 API参考文档。 addEventListener方法有两个参数:监听的事件名称和事件触发时调用的函数。在下面示例 中,每当用户点击地图时,会弹出一个警告框。 view plainprint 1 varvarvarvarmap = newnewnewnew BMap.Map("container"); 2 map.centerAndZoom(newnewnewnew BMap.Point(116.404, 39.915), 11); 3 map.addEventListener("click", functionfunctionfunctionfunction(){ 4 alert("您点击了地图。"); 5 }); 6 查看示例 通过监听事件还可以捕获事件触发后的状态。下面示例显示用户拖动地图后地图中心的经纬 度信息。 view plainprint 7 varvarvarvarmap = newnewnewnew BMap.Map("container"); 8 map.centerAndZoom(newnewnewnew BMap.Point(116.404, 39.915), 11); 9 map.addEventListener("dragend", functionfunctionfunctionfunction(){ 10 varvarvarvar center = map.getCenter(); 11 document.getElementById("info").innerHTML = center.lng + ", " + center.lat; 12 }); 13 查看示例 事件参数和 thisthisthisthis 在标准的 DOM事件模型中(DOM Level 2 Events),监听函数会得到一个事件对象 e,在 e中可以获取有关该事件的信息。同时在监听函数中 this会指向触发该事件的 DOM元素。 百度地图 API的事件模型与此类似,在事件监听函数中传递事件对象 e,每个 e参数至少包 含事件类型(type)和触发该事件的对象(target)。 API还保证函数内的 this指向触发(同 时也是绑定)事件的 API对象。 例如,通过参数 e得到点击的经纬度坐标。 view plainprint 14 varvarvarvarmap = newnewnewnew BMap.Map("container"); 15 map.centerAndZoom(newnewnewnew BMap.Point(116.404, 39.915), 11); 16 map.addEventListener("click", functionfunctionfunctionfunction(e){ 17 document.getElementById("info").innerHTML = e.point.lng + ", " + e.point.lat; 18 }); 19 查看示例 或者通过 this得到地图缩放后的级别。 view plainprint 20 varvarvarvarmap = newnewnewnew BMap.Map("container"); 21 map.centerAndZoom(newnewnewnew BMap.Point(116.404, 39.915), 11); 22 map.addEventListener("zoomend", functionfunctionfunctionfunction(){ 23 document.getElementById("info").innerHTML = "地图缩放至:" + thisthisthisthis.getZoom() + "级"; 24 }); 25 26 查看示例 移除监听事件 当您不再希望监听事件时,可以将事件监听进行移除。每个 API 对象提供了 removeEventListener用来移除事件监听函数。 下面示例中,用户第一次点击地图会触发事件监听函数,在函数内部对事件监听进行了移除, 因此后续的点击操作则不会触发监听函数。 view plainprint 27 varvarvarvarmap = newnewnewnew BMap.Map("container"); 28 map.centerAndZoom(newnewnewnew BMap.Point(116.404, 39.915), 11); 29 30 functionfunctionfunctionfunction showInfo(e){ 31 document.getElementById("info").innerHTML = e.point.lng + ", " + e.point.lat; 32 map.removeEventListener("click", showInfo); 33 } 34 map.addEventListener("click", showInfo); 35 查看示例 6.地图图层 地图图层概念 地图可以包含一个或多个图层,每个图层在每个级别都是由若干张图块组成的,它们覆盖了 地球的整个表面。 在最低的缩放级别(级别 1)中,整个地球由 4 张图块组成。随着级别的增长,地图所使 用的图块个数也随之增多。 自定义图层 百度地图中提供一个 BMap.TileLayer类,可以实现用户自定义图层功能。可以在百度地图 上叠加一层自定义的图块。 有关 TileLayer类的详细接口,请参考 TileLayer的 API参考文档。 以下代码在每个图块的所有缩放级别上显示一个简单的透明叠加层,使用浮动红色小水滴表 示图块的轮廓。 view plainprint 1 varvarvarvarmap = newnewnewnew BMap.Map("container"); // 创建地图实例 2 varvarvarvar point = newnewnewnew BMap.Point(116.404, 39.915); // 创建点坐标 3 map.centerAndZoom(point,15); // 初始化地图,设置中心点坐标和地图级别 4 varvarvarvar tilelayer = newnewnewnew BMap.TileLayer(); // 创建地图层实例 5 tilelayer.getTilesUrl=functionfunctionfunctionfunction(){ // 设置图块路径 6 returnreturnreturnreturn "layer.gif"; 7 }; 8 map.addTileLayer(tilelayer); // 将图层添加到地图上 查看示例 7.工具 地图工具概述 百度地图提供了交互功能更为复杂的“工具”,它包括: PushpinTool:标注工具。通过此工具用户可在地图任意区域添加标注。 DistanceTool:测距工具。通过此工具用户可测量地图上任意位置之间的距离。 DragAndZoomTool:区域缩放工具。此工具将根据用户拖拽绘制的矩形区域大小对地图进 行放大或缩小操作。 工具类在初始化时需要提供地图实例参数,以便使工具在该地图上生效。您可以在地图上添 加多个工具,但同一时刻只能有一个工具处于开启状态。标注工具和测距工具在完成一次操 作后将自动退出开启状态,而区域缩放工具可以自行配置是否自动关闭。 向地图添加工具 在地图正确初始化后,您可以创建工具实例。下面示例展示了如何向地图添加一个标注工具。 view plainprint 1 varvarvarvarmap = newnewnewnew BMap.Map("container"); 2 map.centerAndZoom(newnewnewnew BMap.Point(116.404, 39.915), 15); 3 varvarvarvarmyPushpin = newnewnewnewBMap.PushpinTool(map); // 创建标注工具实例 4 myPushpin.addEventListener("markend", functionfunctionfunctionfunction(e){ // 监听事件,提示标注点坐标信息 5 alert("您标注的位置:" + 6 e.marker.getPoint().lng + ", " + 7 e.marker.getPoint().lat); 8 }); 9 myPushpin.open(); // 开启标注工具 10 查看示例 通过按钮控制工具的开启和关闭 工具类没有提供控制其开启和关闭的 UI元素。您可以根据需要自己创建这些元素,把它们 放置在地图区域内或者区域外均可。调用工具类的 open和 close可控制工具的开启和关闭。 首先初始化地图并创建一个测距工具实例: view plainprint 11 varvarvarvarmap = newnewnewnew BMap.Map("container"); 12 map.centerAndZoom(newnewnewnew BMap.Point(116.404, 39.915), 15); 13 varvarvarvarmyDis = newnewnewnew BMap.DistanceTool(map); 14 接着我们创建两个按钮元素并为其添加点击事件。 view plainprint 15 />/>/> 16 />/>/> 17 查看示例 修改工具的配置 一些工具类提供了可修改的配置参数,您可参考 API文档来修改它们以便符合您的要求。 本示例为区域缩放工具添加提示文字。 view plainprint 18 varvarvarvarmap = newnewnewnew BMap.Map("container"); 19 map.centerAndZoom(newnewnewnew BMap.Point(116.404, 39.915), 15); 20 varvarvarvarmyDrag = newnewnewnew BMap.DragAndZoomTool(map, { 21 followText : "拖拽鼠标进行操作" 22 }); 23 查看示例 8.服务 地图服务概述 地图服务是指那些提供数据信息的接口,比如本地搜索、路线规划等等。百度地图 API提 供的服务有: LocalSearch:本地搜索,提供某一特定地区的位置搜索服务,比如在北京市搜索“公园”。 TransitRoute:公交导航,提供某一特定地区的公交出行的搜索服务。 DrivingRoute:驾车导航,提供驾车出行方案的搜索服务。 WalkingRoute:步行导航,提供步行出行方案的搜索服务。 Geocoder:地址解析,提供将地址信息转换为坐标点信息的服务。 LocalCity:本地城市,提供自动判断您所在城市的服务。 TrafficControl:实时路况控件,提供实时和历史路况信息服务。 搜索类的服务接口需要指定一个搜索范围,否则接口将不能工作。 本地搜索 BMap.LocalSearch提供本地搜索服务,在使用本地搜索时需要为其设置一个检索区域,检 索区域可以是 BMap.Map对象、BMap.Point对象或者是省市名称(比如:"北京市")的字 符串。BMap.LocalSearch构造函数的第二个参数是可选的,您可以在其中指定结果的呈现。 BMap.RenderOptions类提供了若干控制呈现的属性,其中 map指定了结果所展现的地图 实例,panel指定了结果列表的容器元素。 下面这个示例展示了在北京市检索天安门。搜索区域设置为地图实例,并告知结果需要展现 在地图实例上。 view plainprint 1 varvarvarvarmap = newnewnewnew BMap.Map("container"); 2 map.centerAndZoom(newnewnewnew BMap.Point(116.404, 39.915), 11); 3 varvarvarvar local = newnewnewnew BMap.LocalSearch(map, { 4 renderOptions:{map: map} 5 }); 6 local.search("天安门"); 7 查看示例 另外,BMap.LocalSearch还提包含 searchNearby和 searchInBounds方法,为您提供周 边搜索和范围搜索服务。 配置搜索 BMap.LocalSearch提供了若干配置方法,通过它们可以自定义搜索服务的行为以满足您的 需求。 在下面的示例中,我们调整每页显示8个结果,并且根据结果点位置自动调整地图视野,不 显示第一条结果的信息窗口: view plainprint 8 varvarvarvarmap = newnewnewnew BMap.Map("container"); 9 map.centerAndZoom(newnewnewnew BMap.Point(116.404, 39.915), 11); 10 11 varvarvarvar local = newnewnewnew BMap.LocalSearch("北京市", { 12 renderOptions: { 13 map: map, 14 pageCapacity: 8, 15 autoViewport: truetruetruetrue, 16 selectFirstResult: falsefalsefalsefalse 17 } 18 }); 19 local.search("中关村"); 20 查看示例 结果面板 通过设置 BMap.LocalSearchOptions.renderOptions.panel属性,可以为本地搜索对象提供 一个结果列表容器,搜索结果会自动添加到容器元素中。请看下面示例: view plainprint 21 varvarvarvarmap = newnewnewnew BMap.Map("container"); 22 map.centerAndZoom(newnewnewnew BMap.Point(116.404, 39.915), 11); 23 varvarvarvar local = newnewnewnew BMap.LocalSearch(map, { 24 renderOptions: {map: map, panel: "results"} 25 }); 26 local.search("天安门"); 27 查看示例 数据接口 除了搜索结果会自动添加到地图和列表外,您还可以通过数据接口获得详细的数据信息,结 合地图 API 您可以自行向地图添加标注和信息窗口。 BMap.LocalSearch 和 BMap.LocalSearchOptions类提供了若干设置回调函数的接口,通过它们可得到搜索结果 的数据信息。 例如,通过 onSearchComplete回调函数参数可以获得 BMap.LocalResult 对象实例,它包含了每一次搜索结果的数据信息。 当回调函数被执行时,您可以使用 BMap.LocalSearch.getStatus()方法来确认搜索是否成功或者得到错误的详细信息。 在下面这个示例中,通过 onSearchComplete回调函数得到第一页每条结果的标题和地址 信息,并输出到页面上: view plainprint 28 varvarvarvarmap = newnewnewnew BMap.Map("container"); 29 map.centerAndZoom(newnewnewnew BMap.Point(116.404, 39.915), 11); 30 31 varvarvarvar options = { 32 onSearchComplete: functionfunctionfunctionfunction(results){ 33 ifififif (local.getStatus() == BMAP_STATUS_SUCCESS){ 34 // 判断状态是否正确 35 varvarvarvar s = []; 36 forforforfor (varvarvarvar i = 0; i < results.getCurrentNumPois(); i ++){ 37 s.push(results.getPoi(i).title + ", " + results.getPoi(i).address); 38 } 39 document.getElementById("log").innerHTML = s.join("
"); 40 } 41 } 42 }; 43 varvarvarvar local = newnewnewnew BMap.LocalSearch(map, options); 44 local.search("公园"); 45 查看示例 周边搜索 通过周边搜索服务,您可以在某个地点附近进行搜索,也可以在某一个特定结果点周围进行 搜索。 下面示例展示如何在前门附近搜索小吃: view plainprint 46 varvarvarvarmap = newnewnewnew BMap.Map("container"); 47 map.centerAndZoom(newnewnewnew BMap.Point(116.404, 39.915), 11); 48 49 varvarvarvar local = newnewnewnew BMap.LocalSearch(map, { 50 renderOptions:{map: map, autoViewport: truetruetruetrue} 51 }); 52 local.searchNearby("小吃", "前门"); 53 查看示例 范围搜索 范围搜索将根据您提供的视野范围提供搜索结果。注意:当搜索范围过大时可能会出现无结 果的情况。 下面示例展示在当前地图视野范围内搜索银行: view plainprint 54 varvarvarvarmap = newnewnewnew BMap.Map("container"); 55 map.centerAndZoom(newnewnewnew BMap.Point(116.404, 39.915), 14); 56 57 varvarvarvar local = newnewnewnew BMap.LocalSearch(map, { 58 renderOptions:{map: map} 59 }); 60 local.searchInBounds("银行", map.getBounds()); 61 查看示例 公交导航 BMap.TransitRoute类提供公交导航搜索服务。和本地搜索类似,在搜索之前需要指定搜索 区域,注意公交导航的区域范围只能是市,而不能是省。如果搜索区域为 BMap.Map对象, 路线结果会自动添加到地图上。如果您提供了结果容器,相应的路线描述也会展示在页面上。 下面示例展示了如何使用公交导航服务: view plainprint 62 varvarvarvarmap = newnewnewnew BMap.Map("container"); 63 map.centerAndZoom(newnewnewnew BMap.Point(116.404, 39.915), 14); 64 65 varvarvarvar transit = newnewnewnew BMap.TransitRoute(map, { 66 renderOptions: {map: map} 67 }); 68 transit.search("王府井", "西单"); 69 查看示例 结果面板 您可以提供用于展示文字结果的容器元素,方案结果会自动在页面中展现: view plainprint 70 varvarvarvarmap = newnewnewnew BMap.Map("container"); 71 map.centerAndZoom(newnewnewnew BMap.Point(116.404, 39.915), 14); 72 73 varvarvarvar transit = newnewnewnew BMap.TransitRoute(map, { 74 renderOptions: {map
/
本文档为【百度地图API开发指南】,请使用软件OFFICE或WPS软件打开。作品中的文字与图均可以修改和编辑, 图片更改请在作品中右键图片并更换,文字修改请直接点击文字进行修改,也可以新增和删除文档中的内容。
[版权声明] 本站所有资料为用户分享产生,若发现您的权利被侵害,请联系客服邮件isharekefu@iask.cn,我们尽快处理。 本作品所展示的图片、画像、字体、音乐的版权可能需版权方额外授权,请谨慎使用。 网站提供的党政主题相关内容(国旗、国徽、党徽..)目的在于配合国家政策宣传,仅限个人学习分享使用,禁止用于任何广告和商用目的。
相关资料
热门搜索
你可能还喜欢
最新资料 资料动态 专题动态

历史搜索

    清空历史搜索