2022年百度地图加载api .pdf

《2022年百度地图加载api .pdf》由会员分享，可在线阅读，更多相关《2022年百度地图加载api .pdf（14页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、1 百度地图API 实例目录百度地图API.3 1 基础知识.3 1.1 百度地图API 概念.3 1.2 百度地图的“Hello,World”.3 1.2.1 引用百度地图API 文件.4 1.2.2 创建地图容器元素.5 1.2.3 命名空间.5 1.2.4 创建地图实例.5 1.2.5 创建点坐标.5 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 中显示百度地图.11 2.3 向地图添加标注.11 2.4 为标注添加信息窗口.12 2.5 标注与数

2、据列表的联动.13 2.6 数据列表与标注的联动.14 2.7 创建可拖拽的标注.16 3 折线.16 2 3.1 添加多边形.17 3.2 样式设置.19 4 自定义标注.20 5 文本标注.21 5.1 添加一个文本标注.21 5.2 文本位置偏移值.22 5.3 自定义 Label.23 5.4 添加滑动门效果.25 6 参考资料.26 3 百度地图API 1 基础知识1.1 百度地图 API 概念百度地图 API 是一套由 JavaScript 语言编写的应用程序接口，它能够帮助您在网站中构建功能丰富、交互性强的地图应用程序。名师资料总结-精品资料欢迎下载-名师精心整理-第 1 页，共

3、 14 页 -百度地图 API 不仅包含构建地图的基本功能接口，还提供了诸如本地搜索、路线规划等数据服务。1.2 百度地图的“Hello,World”开始学习百度地图API 最简单的方式是看一个简单的示例。以下代码创建了一个520 x340 大小的地图区域并以天安门作为地图的中心:Hello,World var map=new BMap.Map(container);/创建 Map 实例var point=new BMap.Point(116.404,39.915);/创建点坐标map.centerAndZoom(point,15);/初始化地图，设置中心点坐标和地图级别。4 您可以查看此示例

4、及下载、编辑和调试该示例。程序运行结果：即使在此简单的示例中，也需要注意五点：1.使用 script 标签包含百度地图 API JavaScript。2.创建名为“container”的 div 元素来包含地图。3.编写 JavaScript 函数创建“map”对象。4.将地图的中心设置为指定的地理点。5.在 标签外面开始初始化地图对象并确保 container div 元素已经存在。1.2.1 引用百度地图 API 文件通过地址 http:/ 加载 API：5 其中参数 key 为密钥，您可以在这里申请密钥。参数 v 为当前 API 的版本号，目前最新版本为1.0，services 参数表示

5、是否加载服务部分，true 表示加载，false 表示不加载。地址http:/ 中的参数 v 表示您加载 API 的版本，例如当前API 的名师资料总结-精品资料欢迎下载-名师精心整理-第 2 页，共 14 页 -最新版本为 1.0。1.2.2 创建地图容器元素 地图需要一个 HTML 元素作为容器，这样才能展现到页面上。这里我们创建了一个div 元素并制定它的大小。地图会根据容器大小调整自身尺寸。1.2.3 命名空间API 使用 BMap 作为命名空间，所有类均在该命名空间之下，比如：BMap.Map、BMap.Control、BMap.Overlay。1.2.4 创建地图实例var map

6、=new BMap.Map(container);位于 BMap 命名空间下的Map 类表示地图，通过new 操作符可以创建一个地图实例。其参数可以是元素 id 也可以是元素对象。注意在调用此构造函数时应确保容器元素已经添加到地图上。构造函数说明Map(container:String|HTMLElement,opts:MapOptions)在指定的容器内创建地图实例，之后需要调用 Map.centerAndZoom()方法对地图进行初始化。未进行初始化的地图将不能进行任何操作。请注意因为 JavaScript 是松散类型的语言，我们可以不填写构造函数的任何可选参数。1.2.5 创建点坐标6

7、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 中的地图对象的外观与行为与百度地图网站

8、上交互的地图非常相似。它支持鼠标拖拽、滚轮缩放、双击放大等交互功能。您也可以修改配置来改变这些功能。您还可以通过编程的方式与地图交互。Map 类提供了若干修改地图状态的方法。例如：名师资料总结-精品资料欢迎下载-名师精心整理-第 3 页，共 14 页 -setCenter()、panTo()、zoomTo()等等。下面示例显示一个地图，等待两秒钟后，它会移动到新中心点。panTo()方法将让地图平滑移动至新中心点，如果移动距离超过了当前地图区域大小，则地图会直跳到该点。var map=new BMap.Map(container);var point=new BMap.Point(116.40

9、4,39.915);map.centerAndZoom(point,15);window.setTimeout(function()map.panTo(new BMap.Point(116.409,39.918);,2000);本节完整参考代码：第一章示例.rar 7 2 应用示例本章节介绍一些地图的基本应用和部分API 的使用。示例代码会结合ExtJS 一起展示，因为 ExtJS 不是本文主要介绍的技术，所以在这里不做过多的讲解，如果想了解详情，请“百度”ExtJS。本文中所写的代码均为示例代码，不能保证程序的正常运行，如需完全代码，请参见每章节结束部分的“本节完整参考代码”。本文不会详细介

10、绍百度API 类与 Ext 类的具体使用方法，如果需要了解，请参考相关的参考资料。2.1 Map 类此类是地图 API 的核心类，用来实例化一个地图。事件介绍事件说明参数click 鼠标点击地图时会触发此事件。eventtype,target,pixel,point 注：这里面的参数是在回调函数中使用的。2.2 ExtJs 本示例使用的 Ext 类：Ext.Viewport：冲当整个浏览器的显示区域，并实现显示区域分割。在右边的区域嵌入百度地图。Ext.grid.GridPanel：装载标注信息列表。位置在页面的左边。Ext.data.Store：表格数据的存储器。Ext.grid.Colum

11、nModel：表格的列信息。Ext.data.Record：数据记录集。与Store 配合使用。注：Ext 的版本为 3.2.0。参考代码：record_Point=Ext.data.Record.create(name:point_id,type:string,name:name,type:string,名师资料总结-精品资料欢迎下载-名师精心整理-第 4 页，共 14 页 -8 name:lat,type:string,name:lng,type:string);store=new Ext.data.Store(proxy:new Ext.data.HttpProxy(url:),read

12、er: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.

13、RowSelectionModel(singleSelect:true),autoHeight:true,stripeRows:true,margins:0 0 0 0,style:width:100%,height:100%,stateful:true,stateId:grid);程序运行结果：9 2.2.1 将百度地图嵌入到 Ext 中1.首先在页面的 标签中引用百度API 与Ext 的三个必要文件。百度地图+Ext 名师资料总结-精品资料欢迎下载-名师精心整理-第 5 页，共 14 页 -Ext.grid.GridPanel 10 2.在 js 中定义装载百度地图的DIV 元素 mapD

14、iv。/装载地图用的div var strHtml=12;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

15、 与数据列表 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,11 items:gridPanel,id:myMap,title:地图 ,html:strHtml,region:center );2.2.2 在 Ext 中显示百度地图1、添加加载地图

16、的代码function initializeMap()名师资料总结-精品资料欢迎下载-名师精心整理-第 6 页，共 14 页 -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 方法体内，不然浏览器会无法将

17、百度地图加载到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);.12 2.获取标注的坐标值。通过参数e 的point 属性获得地理坐标点。其

18、中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 为标注添加信息窗口信息窗口在地图上方的浮动显示H

19、TML 内容。信息窗口可直接在地图上的任意位置打开，也可以在标注对象上打开（此时信息窗口的坐标与标注的坐标一致）。您可以使用BMap.InfoWindow 来创建一个信息窗实例，注意同一时刻地图上只能有一个信息窗口处于打开名师资料总结-精品资料欢迎下载-名师精心整理-第 7 页，共 14 页 -状态。程序运行结果：1.为标注添加 click 事件监听。创建信息窗口对象13/添加标注 click 事件监听marker.addEventListener(click,function(e2)2.创建一个信息窗口对象var infoWindowOpts=width:250,/信息窗口宽度height:

20、100,/信息窗口高度title:Hello/信息窗口标题/创建信息窗口对象var infoWindow=new BMap.InfoWindow(Im +rindex+marker,infoWindowOpts);3.使用标注打开信息窗口，并将地图的中心点设置该标准的坐标点。marker.openInfoWindow(infoWindow);map.centerAndZoom(e2.point,map.getZoom();2.5 标注与数据列表的联动实现当点击某个标注时，其对应的数据列表的行会被选中。程序运行结果：14 1.在标注的 click 事件中添加 gridPanel 的selectR

21、ow 方法。marker.addEventListener(click,function(e2).gridPanel.getSelectionModel().selectRow(rindex-1););2.6 数据列表与标注的联动当选中数据列表中的某条记录时，将地图平移至该记录所对应的标注处，并且该标注会弹出信息窗口。程序运行结果：15 1.为 GridPanel 添加一个 rowclick 事件监听。gridPanel.addListener(rowclick,panelRowSelect);2.添加 panelRowSelect 函数。通过 gird 参数可以获取girdPaenl 的re

22、cord 对象，再使用record 获取数据。gridPanel.addListener(rowclick,panelRowSelect);/gridPanel行选择事件函数function panelRowSelect(grid,rowIndex,e)/返回选区中的第一个记录Record 名师资料总结-精品资料欢迎下载-名师精心整理-第 8 页，共 14 页 -var record=grid.getSelectionModel().getSelected();/创建信息窗口对象var infoW=new BMap.InfoWindow(Im +record.get(name)+marker,

23、infoWindowOpts);3.获得标注的坐标，让标注打开信息窗口，并将地图中心位置移动到标注的位置。function panelRowSelect(grid,rowIndex,e).var pt2=new BMap.Point(record.get(lng),record.get(lat);16 markerListrowIndex.openInfoWindow(infoW);map.centerAndZoom(pt2,map.getZoom();2.7 创建可拖拽的标注标注是可以点击和拖动到新位置的交互式对象。var map=new BMap.Map(container);var po

24、int=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

25、 对象需要浏览器支持矢量绘制功能。在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);程序运行结果：17 3.1 添加多边形这里介绍使用 Pol

26、yline 类向地图添加多边形，使用Polyline 绘制多边形的原理是向地图添加 N 个坐标点，N=3，把起点与终点设置为同一个点，然后将这些点连接起来，这样就可以绘制出一个多边形。名师资料总结-精品资料欢迎下载-名师精心整理-第 9 页，共 14 页 -程序运行结果：18 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.

27、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

28、 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.773714013347

29、3),19 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.988

30、6950160466),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.Polylin

31、e(new BMap.Point(.116.4207458496090,40.0192013076867),strokeColor:red,strokeWeight:10,strokeOpacity:10);程序运行结果：20 本节完整参考代码：Polyline.htm 4 自定义标注通过 BMap.Icon 类可实现自定义标注的图标，下面示例通过参数BMap.MarkerOptions 的名师资料总结-精品资料欢迎下载-名师精心整理-第 10 页，共 14 页 -icon 属性进行设置，您也可以使用BMap.Marker.setIcon()方法。参考代码如下：var map=new BMap

32、.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:/ BMap.Size(23,25),21 offset:new BMap.Size(10,25),/指定定位位置imageOffset:new BMap.Size(0,0-index*25)/设置图片偏移);var marker=new BMap.Marker(point,ico

33、n: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);

34、5 文本标注表示地图上的文本标注，可以自定义标注的文本内容。如果想给标注（Marker）添加文本与背景时，可以使用文本标注（Label）来替换标注（Marker）。Label 类的使用与 Marker 类似，也是通过addOverlay 方法来添加。5.1 添加一个文本标注实例化一个 Label 对象，通过第一个参数指定Label 的文本内容，第二个参数可以指定文本位置偏移值与文本标注的坐标点。普通情况下只指定文本内容与坐标点即可。参考代码如下：var map=new BMap.Map(container);var point4=new BMap.Point(116.4674377441400

35、,39.9895443931416);map.centerAndZoom(point,10);var label4=new BMap.Label(123,point:point4);map.addOverlay(label4);程序运行结果：22 5.2 文本位置偏移值上文提到了文本位置偏移值，它的作用就是改变Label 的文本位置，为了更好的体现文名师资料总结-精品资料欢迎下载-名师精心整理-第 11 页，共 14 页 -本位置的变化，先给地图添加一个Marker 用来做对比，Marker 的坐标点跟 Label 的坐标点相同。参考代码如下：var mar=new BMap.Marker(p

36、oint4);var label4=new BMap.Label(123,point:point4);map.addOverlay(label4);map.addOverlay(mar);程序运行结果：从图片可以看出来，不加文本位置偏移值的情况下，Label 的坐标点是它的左上角。添加文本位置偏移值的效果图：23 参考代码如下：var mar=new BMap.Marker(point4);var label4=new BMap.Label(123,point:point4,offset:new BMap.Size(0,-35);map.addOverlay(label4);map.addOv

37、erlay(mar);对比以上两幅图片，查看 Label 位置的差别，就可以了解文本位置偏移值的作用，可以根据需要来自行决定是否实用文本位置偏移值。5.3 自定义 Label 本节介绍如何给Label 添加特效文本与背景图。参考下图：24 参考代码如下：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

38、 BMap.Size(0,-35);map.addOverlay(label4);CSS 代码如下：25.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

39、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;名师资料总结-精品资料欢迎下载-名师精心整理-第 12 页，共 14 页 -.marker_0.marker_r background-position:0-24px;.marker_0.marker_b backgroun

40、d: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 的边框，如果

41、不写的话，那么label 会有一个红色的边框。2.label4.setContent：设置文本标注的内容。支持HTML。label4.setContent(ct);利用 label 支持 HTML 元素的特点，定义一个DIV，将其赋给 label，达到自定义文字与背景的目的。3.setOffset(offset:Size)：通过此方法来设置文本标注的偏移值。4.css 中的 background-position 属性，通过它来实现图片的截取。这种技术已经被广泛使用。很多网站都是将很多图标、图片整合到一个图片文件中，然后通过这个属性来进行选择性的截取。在这里就不详细说明了。5.4 添加滑动门效

42、果本节介绍如何给Label 添加滑动门效果。1.为 Label 的div 添加一个。2.给 Label 添加 mouseover、mouseout 事件监听。注：滑动门技术是网页中经常用到的，这里不做原理介绍。参考代码如下：26 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,func

43、tion()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);名师资料总结-精品资料欢迎下载-名师精心整理-第 13 页，共 14 页 -程序运行结果：6 参考资料27 百度地图 API 官方网站：http:/ 14 页，共 14 页 -