百度地图API

百度地图 API 百度地图API应用实例 Michael Tian 目录 TOC \o "1-3" \h \z \u 百度地图 API 3 1基础知识 3 1.1 百度地图 API 概念 3 1.2 百度地图的“Hello, World” 3 1.2.1 引用百度地图API文件 5 1.2.2创建地图容器元素 5 1.2.3命名空间 5 1.2.4创建地图实例 5 1.2.5创建点坐标 6 1.2.6 初始化地图 6 1.2.7地图操作 6 2应用示例 7 2.1 Map类 7 2.2 ExtJs 7 2.2.1 将百度地图嵌入到Ext中 9 2.2.2 在Ext中显示百度地图 10 2.3 向地图添加标注 11 2.4 为标注添加信息窗口 12 2.5 标注与数据列表的联动 12 2.6 数据列表与标注的联动 13 2.7 创建可拖拽的标注 15 3折线 15 3.1添加多边形 16 3.2样式设置 17 4自定义标注 18 5 文本标注 18 5.1 添加一个文本标注 19 5.2 文本位置偏移值 19 5.3 自定义Label 20 5.4 添加滑动门效果 21 6参考资料 22 百度地图 API 1基础知识 1.1 百度地图 API 概念 百度地图API是一套由JavaScript语言编写的应用程序接口，它能够帮助您在网站中构建功能丰富、交互性强的地图应用程序。 百度地图API不仅包含构建地图的基本功能接口，还提供了诸如本地搜索、路线规划等数据服务。 1.2 百度地图的“Hello, World” 开始学习百度地图API最简单的方式是看一个简单的示例。以下代码创建了一个520x340大小的地图区域并以天安门作为地图的中心: 您可以查看此示例及下载、编辑和调试该示例。 程序运行结果： 即使在此简单的示例中，也需要注意五点： 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 鼠标点击地图时会触发此事件。 event{type, target, pixel, point} 注：这里面的参数是在回调函数中使用的。 2.2 ExtJs 本示例使用的Ext类： ​ Ext.Viewport：冲当整个浏览器的显示区域，并实现显示区域分割。在右边的区域嵌入百度地图。 ​ Ext.grid.GridPanel ：装载标注信息列表。位置在页面的左边。 ​ Ext.data.Store：表格数据的存储器。 ​ Ext.grid.ColumnModel：表格的列信息。 ​ 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' }) ; 程序运行结果： 2.2.1 将百度地图嵌入到Ext中 1.首先在页面的标签中引用百度API与Ext的三个必要文件。 2.在js中定义装载百度地图的DIV元素mapDiv。 // 装载地图用的div var strHtml = ""; 3.添加数据列表GridPanel gridPanel = 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: 'grid' 4.在Ext.Viewport中嵌入mapDiv与数据列表GridPanel new 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( "I'm " + 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( "I'm " + record.get('name') + " marker", infoWindowOpts); } 3.获得标注的坐标，让标注打开信息窗口，并将地图中心位置移动到标注的位置。 function panelRowSelect( grid, rowIndex, e ) { ....... ....... var pt2 = new BMap.Point( record.get('lng'), record.get('lat') ); markerList[rowIndex].openInfoWindow( infoW ); map.centerAndZoom( pt2 ,map.getZoom() ); } 2.7 创建可拖拽的标注 标注是可以点击和拖动到新位置的交互式对象。 var map = new BMap.Map("container"); var point = new BMap.Point(116.404, 39.915); map.centerAndZoom(point, 15); var marker = new BMap.Marker(point); map.addOverlay(marker); marker.enableDragging(true);    // 设置标注可拖拽 3折线 BMap.Polyline对象表示地图上的折线覆盖物。它包含一组点，并将这些点连接起来形成折线。折线在地图上绘制为一系列直线段。可以自定义这些线段的颜色、粗细和透明度。颜色可以是十六进制数字形式（比如：#ff0000）或者是颜色关键字（比如：red）。 BMap.Polyline对象需要浏览器支持矢量绘制功能。在Internet Explorer中，地图使用VML（请参阅VML）绘制折线；在其他浏览器中使用SVG（如果可用）。 以下代码段会在两点之间创建6像素宽的蓝色折线： var polyline = new BMap.Polyline([       new BMap.Point(116.399, 39.910),       new BMap.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 = ''; label4.setContent(ct); label4.setOffset(new BMap.Size(0,-35)); map.addOverlay(label4); CSS代码如下： .marker div { position:absolute; z-index:1;} .marker .marker_hover{z-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