百度地图API应用实例说明文档.doc

百度地图API应用实例说明文档百度地图 API百度地图API应用实例Michael Tian目录百度地图 API31基础知识31.1 百度地图 API 概念31.2 百度地图的“Hello, World”31.2.1 引用百度地图API文件51.2.2创建地图容器元素51.2.3命名空间51.2.4创建地图实例51.2.5创建点坐标61.2.6 初始化地图61.2.7地图操作62应用示例72.1 Map类72.2 ExtJs72.2.1 将百度地图嵌入到Ext中92.2.2 在Ext中显示百度地图102.3 向地图添加标注112.4 为标注添加信息窗口122.5 标注与数据列表的联动122.6 数据列表与标注的联动132.7 创建可拖拽的标注153折线153.1添加多边形163.2样式设置174自定义标注185 文本标注185.1 添加一个文本标注195.2 文本位置偏移值195.3 自定义Label205.4 添加滑动门效果216参考资料22百度地图 API1基础知识1.1 百度地图 API 概念百度地图API是一套由JavaScript语言编写的应用程序接口，它能够帮助您在网站中构建功能丰富、交互性强的地图应用程序。百度地图API不仅包含构建地图的基本功能接口，还提供了诸如本地搜索、路线规划等数据服务。1.2 百度地图的“Hello, World”开始学习百度地图API最简单的方式是看一个简单的示例。以下代码创建了一个520x340大小的地图区域并以天安门作为地图的中心: Hello, World var map = new BMap.Map(container); / 创建Map实例 var point = new BMap.Point(116.404, 39.915); / 创建点坐标 map.centerAndZoom(point,15); / 初始化地图，设置中心点坐标和地图级别。 您可以查看此示例及下载、编辑和调试该示例。程序运行结果：即使在此简单的示例中，也需要注意五点：1. 使用 script 标签包含 百度地图 API JavaScript。2. 创建名为“container”的 div 元素来包含地图。3. 编写 JavaScript 函数创建“map”对象。4. 将地图的中心设置为指定的地理点。5. 在 标签外面开始初始化地图对象并确保container div元素已经存在。1.2.1 引用百度地图API文件通过地址 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。1.2.2创建地图容器元素 地图需要一个HTML元素作为容器，这样才能展现到页面上。这里我们创建了一个div元素并制定它的大小。地图会根据容器大小调整自身尺寸。1.2.3命名空间API使用BMap作为命名空间，所有类均在该命名空间之下，比如：BMap.Map、BMap.Control、BMap.Overlay。1.2.4创建地图实例var map = new BMap.Map(container);位于BMap命名空间下的Map类表示地图，通过new操作符可以创建一个地图实例。其参数可以是元素id也可以是元素对象。注意在调用此构造函数时应确保容器元素已经添加到地图上。 构造函数说明Map(container:String|HTMLElement, opts:MapOptions)在指定的容器内创建地图实例，之后需要调用Map.centerAndZoom()方法对地图进行初始化。未进行初始化的地图将不能进行任何操作。请注意因为 JavaScript 是松散类型的语言，我们可以不填写构造函数的任何可选参数。1.2.5创建点坐标var point = new BMap.Point(116.404, 39.915);这里我们使用BMap命名空间下的Point类来创建一个坐标点。Point类描述了一个地理坐标点，其中116.404表示经度，39.915表示纬度。1.2.6 初始化地图map.centerAndZoom(point,15);在创建地图实例后，我们需要对其进行初始化，BMap.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。地图必须经过初始化才可以执行其他操作。1.2.7地图操作地图被实例化并完成初始化以后，就可以与其进行交互了。API中的地图对象的外观与行为与百度地图网站上交互的地图非常相似。它支持鼠标拖拽、滚轮缩放、双击放大等交互功能。您也可以修改配置来改变这些功能。 您还可以通过编程的方式与地图交互。Map类提供了若干修改地图状态的方法。例如：setCenter()、panTo()、zoomTo()等等。 下面示例显示一个地图，等待两秒钟后，它会移动到新中心点。panTo()方法将让地图平滑移动至新中心点，如果移动距离超过了当前地图区域大小，则地图会直跳到该点。 var map = new BMap.Map(container); var point = new BMap.Point(116.404, 39.915); map.centerAndZoom(point, 15); window.setTimeout(function() map.panTo(new BMap.Point(116.409, 39.918); , 2000);本节完整参考代码： 2应用示例本章节介绍一些地图的基本应用和部分API的使用。示例代码会结合ExtJS一起展示，因为ExtJS不是本文主要介绍的技术，所以在这里不做过多的讲解，如果想了解详情，请 “百度”ExtJS。本文中所写的代码均为示例代码，不能保证程序的正常运行，如需完全代码，请参见每章节结束部分的“本节完整参考代码”。本文不会详细介绍百度API类与Ext类的具体使用方法，如果需要了解，请参考相关的参考资料。2.1 Map类此类是地图API的核心类，用来实例化一个地图。事件介绍事件说明参数click鼠标点击地图时会触发此事件。eventtype, target, pixel, point注：这里面的参数是在回调函数中使用的。2.2 ExtJs本示例使用的Ext类：l Ext.Viewport：冲当整个浏览器的显示区域，并实现显示区域分割。在右边的区域嵌入百度地图。l Ext.grid.GridPanel ：装载标注信息列表。位置在页面的左边。l Ext.data.Store：表格数据的存储器。l Ext.grid.ColumnModel：表格的列信息。l Ext.data.Record：数据记录集。与Store配合使用。注：Ext的版本为3.2.0。参考代码：record_Point = Ext.data.Record.create( name: point_id, type: string, name: name, type: string, name: lat, type: string, name: lng, type: string ); store = new Ext.data.Store( proxy: new Ext.data.HttpProxy( url: ), reader: new Ext.data.JsonReader(,record_Point) ); colModel = new Ext.grid.ColumnModel( header: 坐标id, dataIndex:point_id, hidden:true , header: 编号, width: 100, dataIndex:name , header: 纬度, width: 100, dataIndex:lat , header: 经度, width: 100, dataIndex:lng ); gridPanel = new Ext.grid.GridPanel( store: store, cm: colModel, sm: new Ext.grid.RowSelectionModel(singleSelect:true), autoHeight:true, stripeRows: true, margins: 0 0 0 0, style: width: 100%, height: 100% , stateful: true, stateId: grid ) ;程序运行结果：Ext.grid.GridPanel 2.2.1 将百度地图嵌入到Ext中1.首先在页面的标签中引用百度API与Ext的三个必要文件。 百度地图+ Ext 2.在js中定义装载百度地图的DIV元素mapDiv。/ 装载地图用的divvar strHtml = 12;3.添加数据列表GridPanelgridPanel = new Ext.grid.GridPanel( store: store, cm: colModel, sm: new Ext.grid.RowSelectionModel(singleSelect:true), autoHeight:true, /title: 位置信息, stripeRows: true, margins: 0 0 0 0, style: width: 100%, height: 100% , stateful: true, stateId: grid4.在Ext.Viewport中嵌入mapDiv与数据列表GridPanelnew Ext.Viewport( id : mapView,title : Ext.Viewport示例,layout:border, /表格布局items: title: north Panel, html : 上边, region: north, height: 100 ,title: 坐标信息列表, collapsible: true, region:west, width: 300, layout:fit, items: gridPanel , id : myMap, title: 地图, html : strHtml, region: center );2.2.2 在Ext中显示百度地图1、添加加载地图的代码function initializeMap()map = new BMap.Map(mapDiv);/ 创建Map实例var point1 = new BMap.Point( 116.404, 39.915 ); map.centerAndZoom( point1, 12 ); 2调用initializeMap()方法new Ext.onReady( function().initializeMap(););注：此处需要注意initializeMap()方法的位置，一定要写在new Ext.onReady方法体内，不然浏览器会无法将百度地图加载到mapDiv中，程序会出现异常。2.3 向地图添加标注通过鼠标左键点击地图，并在点击的坐标点上添加一个图像标注。1.首先为地图添加一个click事件响应。为地图添加一个click事件监听，并取得当前点击的坐标，通过这个坐标创建一个Marker，map.addOverlay方法将Marker添加到地图上。map.addEventListener( click, function(e) var marker = new BMap.Marker( e.point ); map.addOverlay( marker ); .2.获取标注的坐标值。通过参数e的point属性获得地理坐标点。其中e.point. lng可以获取经度值，e.point. lat可以获取纬度值。3.将添加的标注坐标信息存入到GridPanel中。先创建一条record记录，然后通过store.add方法存入到store中。var r = new record_Point( point_id : storeIndex, name : storeIndex, lat : e.point.lat, lng : e.point.lng ); store.add( r );完成以上两部分代码后，每次在地图上点击鼠标左键的同时会添加一个标注，并将标注的坐标信息存入到浏览器的左边列表中。2.4 为标注添加信息窗口信息窗口在地图上方的浮动显示HTML内容。信息窗口可直接在地图上的任意位置打开，也可以在标注对象上打开（此时信息窗口的坐标与标注的坐标一致）。 您可以使用BMap.InfoWindow来创建一个信息窗实例，注意同一时刻地图上只能有一个信息窗口处于打开状态。程序运行结果：1.为标注添加click事件监听。创建信息窗口对象/ 添加标注click 事件监听marker.addEventListener(click, function( e2 )2.创建一个信息窗口对象var infoWindowOpts = width : 250, / 信息窗口宽度 height: 100, / 信息窗口高度 title : Hello / 信息窗口标题/ 创建信息窗口对象var infoWindow = new BMap.InfoWindow( Im + rindex + marker, infoWindowOpts);3.使用标注打开信息窗口，并将地图的中心点设置该标准的坐标点。marker.openInfoWindow( infoWindow );map.centerAndZoom( e2.point, map.getZoom() );2.5 标注与数据列表的联动实现当点击某个标注时，其对应的数据列表的行会被选中。程序运行结果：1.在标注的click事件中添加gridPanel的selectRow方法。marker.addEventListener(click, function( e2 ) . gridPanel.getSelectionModel().selectRow( rindex - 1 ););2.6 数据列表与标注的联动当选中数据列表中的某条记录时，将地图平移至该记录所对应的标注处，并且该标注会弹出信息窗口。程序运行结果：1.为GridPanel添加一个rowclick事件监听。gridPanel.addListener( rowclick, panelRowSelect );2.添加panelRowSelect函数。通过gird参数可以获取girdPaenl的record对象，再使用record获取数据。gridPanel.addListener( rowclick, panelRowSelect );/gridPanel行选择事件函数function panelRowSelect( grid, rowIndex, e )/返回选区中的第一个记录Record var record = grid.getSelectionModel().getSelected(); / 创建信息窗口对象 var infoW = new BMap.InfoWindow( Im + record.get(name) + marker, infoWindowOpts); 3.获得标注的坐标，让标注打开信息窗口，并将地图中心位置移动到标注的位置。function panelRowSelect( grid, rowIndex, e ). . var pt2 = new BMap.Point( record.get(lng), record.get(lat) ); markerListrowIndex.openInfoWindow( infoW ); map.centerAndZoom( pt2 ,map.getZoom() ); 2.7 创建可拖拽的标注标注是可以点击和拖动到新位置的交互式对象。var map=newBMap.Map(container);varpoint=newBMap.Point(116.404,39.915);map.centerAndZoom(point,15);varmarker=newBMap.Marker(point);map.addOverlay(marker);marker.enableDragging(true);/设置标注可拖拽3折线BMap.Polyline对象表示地图上的折线覆盖物。它包含一组点，并将这些点连接起来形成折线。折线在地图上绘制为一系列直线段。可以自定义这些线段的颜色、粗细和透明度。颜色可以是十六进制数字形式（比如：#ff0000）或者是颜色关键字（比如：red）。 BMap.Polyline对象需要浏览器支持矢量绘制功能。在Internet Explorer中，地图使用VML（请参阅VML）绘制折线；在其他浏览器中使用SVG（如果可用）。 以下代码段会在两点之间创建6像素宽的蓝色折线：varpolyline=newBMap.Polyline(newBMap.Point(116.399,39.910),newBMap.Point(116.405,39.920),strokeColor:blue,strokeWeight:6,strokeOpacity:0.5);map.addOverlay(polyline);程序运行结果：3.1添加多边形这里介绍使用Polyline类向地图添加多边形，使用Polyline绘制多边形的原理是向地图添加N个坐标点，N =3，把起点与终点设置为同一个点，然后将这些点连接起来，这样就可以绘制出一个多边形。程序运行结果：var map = new BMap.Map(container);var point = new BMap.Point(116.4674377441400 ,39.7895443931116);map.centerAndZoom(point, 10);var polyline = new BMap.Polyline( new BMap.Point(116.3960266113280 ,40.0192013076867 ),new BMap.Point(116.4578247070310 ,40.0128907795261 ),new BMap.Point(116.5045166015620 ,39.9929035908019 ),new BMap.Point(116.5457153320310 ,39.9371189329902 ),new BMap.Point(116.5443420410150 ,39.9044690755304 ),new BMap.Point(116.5498352050780 ,39.8623172262438 ),new BMap.Point(116.5443420410150 ,39.8433404404499 ),new BMap.Point(116.5086364746090 ,39.8138105685145 ),new BMap.Point(116.4674377441400 ,39.7895443931116 ),new BMap.Point(116.4234924316400 ,39.7652696551221 ),new BMap.Point(116.3768005371090 ,39.7642140375156 ),new BMap.Point(116.3438415527340 ,39.7737140133473 ),new BMap.Point(116.2902832031250 ,39.7716030208971 ),new BMap.Point(116.2669372558590 ,39.8053711309438 ),new BMap.Point(116.2298583984370 ,39.8412315848450 ),new BMap.Point(116.2161254882810 ,39.8918262417255 ),new BMap.Point(116.2147521972650 ,39.9465950077389 ),new BMap.Point(116.2257385253900 ,39.9886950160466 ),new BMap.Point(116.2861633300780 ,40.0107871404655 ),new BMap.Point(116.3520812988280 ,40.0213046873970 ),new BMap.Point(116.4207458496090 ,40.0192013076867 ), strokeColor:blue, strokeWeight:6, strokeOpacity:0.5);map.addOverlay(polyline);3.2样式设置可以根据需要来修改折线的样式。参考代码如下：var polyline = new BMap.Polyline(new BMap.Point( . . .116.4207458496090,40.0192013076867 ), strokeColor:red, strokeWeight:10, strokeOpacity:10);程序运行结果：本节完整参考代码： 4自定义标注通过BMap.Icon类可实现自定义标注的图标，下面示例通过参数BMap.MarkerOptions的icon属性进行设置，您也可以使用BMap.Marker.setIcon()方法。参考代码如下：var map = new BMap.Map(container);var point = new BMap.Point(116.404, 39.915);map.centerAndZoom(point, 15);/ 编写自定义函数，创建标注function addMarker(point, index) var myIcon = new BMap.Icon(http:/api.map.baidu.com/img/markers.png, new BMap.Size(23, 25), offset: new BMap.Size(10, 25), / 指定定位位置 imageOffset: new BMap.Size(0, 0 - index * 25) / 设置图片偏移 ); var marker = new BMap.Marker(point, icon: myIcon); map.addOverlay(marker);/ 随机向地图添加10个标注var bounds = map.getBounds();var lngSpan = bounds.maxX - bounds.minX;var latSpan = bounds.maxY - bounds.minY;for (var i = 0; i 10; i +) var point = new BMap.Point(bounds.minX + lngSpan * (Math.random() * 0.7 + 0.15),bounds.minY + latSpan * (Math.random() * 0.7 + 0.15); addMarker(point, i);5 文本标注表示地图上的文本标注，可以自定义标注的文本内容。如果想给标注（Marker）添加文本与背景时，可以使用文本标注（Label）来替换标注（Marker）。Label类的使用与Marker类似，也是通过addOverlay方法来添加。5.1 添加一个文本标注实例化一个Label对象，通过第一个参数指定Label的文本内容，第二个参数可以指定文本位置偏移值与文本标注的坐标点。普通情况下只指定文本内容与坐标点即可。参考代码如下：var map = new BMap.Map(container);var point4 = new BMap.Point(116.4674377441400 ,39.9895443931416);map.centerAndZoom(point, 10);var label4 = new BMap.Label(123, point:point4 );map.addOverlay(label4);程序运行结果：5.2 文本位置偏移值上文提到了文本位置偏移值，它的作用就是改变Label的文本位置，为了更好的体现文本位置的变化，先给地图添加一个Marker用来做对比，Marker的坐标点跟Label的坐标点相同。参考代码如下：var mar = new BMap.Marker(point4);var label4 = new BMap.Label(123, point:point4 );map.addOverlay(label4);map.addOverlay(mar);程序运行结果：从图片可以看出来，不加文本位置偏移值的情况下，Label的坐标点是它的左上角。添加文本位置偏移值的效果图：参考代码如下：var mar = new BMap.Marker(point4);var label4 = new BMap.Label(123, point:point4,offset:new BMap.Size(0,-35) );map.addOverlay(label4);map.addOverlay(mar);对比以上两幅图片，查看Label位置的差别，就可以了解文本位置偏移值的作用，可以根据需要来自行决定是否实用文本位置偏移值。5.3 自定义Label本节介绍如何给Label添加特效文本与背景图。参考下图：参考代码如下：var label4 = new BMap.Label(, point:point4 ); label4.setStyle(position:absolute,border:none,background:none,zIndex:1);var ct = 文本标注;ct += ;label4.setContent(ct);label4.setOffset(new BMap.Size(0,-35);map.addOverlay(label4);CSS代码如下：.marker div position:absolute; z-index:1;.marker .marker_hoverz-index:2.marker_0 height:40px; white-space:nowrap;_width:20px;.marker_0 .marker_word, .marker_0 .marker_r background:url(po.png); .marker_0 .marker_word height:24px; line-height:24px; padding:0 10px; cursor:pointer;font-family:simsun .marker_0 .marker_word background-position:0 0; color:#FFF; .marker_0 .marker_r width:3px; height:24px; position:absolute; right:-2px; top:1px; z-index:110px; .marker_0 .marker_r background-position: 0 -24px; .marker_0 .marker_b background:url(po_titie6.png) no-repeat; bottom:7px;height:11px;left:13px;overflow:hidden;position:absolute;width:10px;.marker_0 .marker_b background-position: 0 0; 重点的代码讲解：1. label4.setStyle方法：设置文本标注样式，该样式将作用于文本标注的容器元素上。label4.setStyle(position:absolute,border:none,background:none,zIndex:1);这段代码主要就是去掉label的边框，如果不写的话，那么label会有一个红色的边框。2. label4.setContent：设置文本标注的内容。支持HTML。label4.setContent(ct);利用label支持HTML元素的特点，定义一个DIV，将其赋给label，达到自定义文字与背景的目的。3. setOffset(offset:Size) ：通过此方法来设置文本标注的偏移值。4. css中的 background-position 属性，通过它来实现图片的截取。这种技术已经被广泛使用。很多网站都是将很多图标、图片整合到一个图片文件中，然后通过这个属性来进行选择性的截取。在这里就不详细说明了。5.4 添加滑动门效果本节介绍如何给Label添加滑动门效果。1. 为Label的div添加一个。2. 给Label添加mouseover、mouseout事件监听。注：滑动门技术是网页中经常用到的，这里不做原理介绍。参考代码如下：var label4 = new BMap.Label(, point:point4 ); label4.setStyle(position:absolute,border:none,background:none,zIndex:1);var ct = 文本标注;ct+= ;ct+=我被隐藏了;ct+=;label4.addEventListener(mouseover,function() this.setStyle(zIndex:4); document.getElementById(cname).style.display = ;);label4.addEventListener(mouseout,function()this.setStyle(zIndex:1);document.getElementById(cname).style.display = none;);label4.setContent(ct);label4.setOffset(new BMap.Size(0,-35);map.addOverlay(label4);程序运行结果：6参考资料百度地图API官方网站：http:/openapi.baidu.com/map/index.html 21 / 21