百度地图API开发(修改)_第1页
百度地图API开发(修改)_第2页
百度地图API开发(修改)_第3页
百度地图API开发(修改)_第4页
百度地图API开发(修改)_第5页
已阅读5页，还剩50页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

大众GIS快速开发(kāifā)

——百度地图API开发

程钢

2015年6月19日共五十五页共五十五页主要(zhǔyào)内容百度地图APILBS开发模式JavascriptAPI大众版JavascriptAPI开发综合(zōnghé)实例学习建议共五十五页（1）百度地图API是什么百度地图API是一套由JavaScript语言编写的应用程序接口，提供各种地图基本功能，用Javascript语言进行调用(diàoyòng)它能够在网站中构建功能丰富、交互性强的地图应用。百度地图(dìtú)API简介共五十五页1.百度地图(dìtú)API是什么百度(bǎidù)地图API简介共五十五页百度(bǎidù)地图API简介（2）知识准备HTMLJavascript面向对象程序开发地图（3）注意事项公开地图，国内必须(bìxū)至少使用国测局制定的GCJ-02,对地理位置进行首次加密。百度坐标在此基础上，进行了BD-09二次加密。共五十五页百度地图(dìtú)API简介

（4）版本说明及申请(shēnqǐng)APIak为了统一平台服务的配额管理，JavaScriptAPI在新版本引入ak机制。v1.4及以前版本无须申请密钥（ak），自v1.5版本开始需要先申请密钥（ak），才可使用。（5）地址（参数V表示加载API的版本）

/api?v=1.4///api?v=1.5&ak=您的密钥//申请网址：/user/reg共五十五页主要(zhǔyào)内容百度地图API简介LBS开发模式(móshì)JavascriptAPI大众版JavascriptAPI开发综合实例学习建议共五十五页LBS开发(kāifā)模式（1）Web开发使用网页中嵌入地图服务，支持2D/3D、卫星、街景、室内实景、定制化地图展现。JavascriptAPI大众版JavascriptAPI极速版JavascriptAPI极速版是专为手机浏览器提供的API，该版更适配移动设备，体积更小，加载地图速度(sùdù)更快，更省流量。适用手机浏览器类型：Android自带、UC、百度、QQ等主流浏览器共五十五页LBS开发(kāifā)模式（2）服务接口发送HTTP请求，获取数据存储(cúnchǔ)和检索、POI数据、地址解析、坐标转换、IP定位、车辆网等服务。LBS云

通过开放服务端存储和计算能力，提供海量位置数据存储、检索、展示一体化解决方案。web服务API

开发者通过http形式发起检索请求，获取返回json或xml格式的检索数据。用户可以基于此开发JavaScript、C#、C++、Java等语言的地图应用。共五十五页LBS开发(kāifā)模式（2）服务接口静态图API发送HTTP请求访问百度地图静态图服务，便可在网页上以图片形式显示地图。它根据所设定的参数，通过标准HTTP协议，返回(fǎnhuí)PNG格式的地图图片。车联网API适用车载终端应用的开发接口，您可以在C#、C++、Java等应用程序中使用该服务，通过发起HTTP请求方式调用百度地图车联网服务，返回检索后的JSON或XML数据。共五十五页LBS开发(kāifā)模式

（2）服务接口URIAPI开发者只需按照接口规范(guīfàn)构造一条标准的URI，便可在PC和移动端浏览器或移动开发应用中调起百度地图产品。鹰眼旨在为LBS行业从业者，提供最贴心的位置轨迹行业解决方案。共五十五页LBS开发(kāifā)模式（3）Android开发使用Android平台APP中实现地图展示、信息搜索、定位、导航等功能，提供全面的LBS解决方案。Android地图SDK适用于Android系统移动设备的地图应用，通过调用地图SDK接口，可以轻松访问百度地图服务(fúwù)和数据，构建功能丰富、交互性强的地图类应用程序。Android定位SDK为Android移动端应用提供的一套简单易用的LBS定位服务接口，可以轻松为应用程序实现智能、精准、高效的定位功能。共五十五页LBS开发(kāifā)模式（3）Android开发Andriod导航SDK为Android移动端应用提供了一套简单易用的导航服务接口，可以为应用程序实现专业、高效、精准的导航功能Android全景(quánjǐnɡ)SDK是为Android移动平台提供的一套全景图服务接口，提供全景图的检索、显示和交互功能。共五十五页LBS开发(kāifā)模式（4）IOS开发适用iOS移动设备应用中实现地图(dìtú)展示、POI搜索、导航等功能，搭建专业LBS类应用。iOS地图SDKiOS导航SDKiOS全景SDK共五十五页主要(zhǔyào)内容百度地图API简介(jiǎnjiè)LBS开发模式JavascriptAPI大众版JavascriptAPI开发综合实例学习建议共五十五页JavascriptAPI大众版功能(gōngnéng)介绍基本地图功能：展示（支持2D图、3D图、卫星图）、平移、缩放、拖拽等地图(dìtú)控件展示功能：可以在地图上添加/删除鹰眼、工具条、比例尺、自定义版权、地图类型及定位控件，并可以设置各类控件的显示位置覆盖物功能：支持在地图上添加/删除点、线、面、热区、行政区划、用户自定义覆盖物等；开源库提供富标注、标注管理器、聚合marker、自定义覆盖物等功能覆盖物功能共五十五页JavascriptAPI大众版功能(gōngnéng)介绍工具类：提供经纬度坐标与屏幕坐标互转功能；开源库里提供测距、几何运算及GPS坐标/国测局坐标转百度坐标等功能定位功能：支持IP定位及浏览器（支持html5特性浏览器）定位功能右键菜单：支持在地图上添加右键菜单鼠标交互(jiāohù)：支持动态修改鼠标样式、鼠标拖拽/缩放地图及鼠标绘制等功能图层功能：支持重设地图底图、地图上叠加实时交通图层或自定义图层功能给地图添加右键菜单共五十五页JavascriptAPI大众版功能(gōngnéng)介绍本地搜索功能：包括根据城市、矩形范围、圆形范围等条件进行POI搜索；且支持用户自有数据的检索公交检索：支持起始点坐标、起始点名称、LocalSearchPoi实例(shílì)三种检索条件的检索；检索结果支持便捷、可换乘、少步行、不乘地铁四种方案驾车检索：支持三种检索条件的检索；返回最短时间、最短距离、避开高速的驾车导航结果；且提供计算打车费用服务本地搜索功能共五十五页JavascriptAPI大众版功能(gōngnéng)介绍步行导航：提供步行导航方案逆/地理编码：支持百度坐标与地址描述信息之间的转换(zhuǎnhuàn)服务个性化数据展示功能：用户自有数据存储到LBS.云后，JavaScriptAPI可以提供以麻点图形式展示自有数据功能逆/地理编码共五十五页JavascriptAPI大众版开发(kāifā)指南<!DOCTYPEhtml>//准备页面<html><head><metaname="viewport"content="initial-scale=1.0,user-scalable=no"/>//添加meta标签，以便使页面更好的在移动平台上展示<metahttp-equiv="Content-Type"content="text/html;charset=utf-8“/>//注意此处的编码方式百度地图JavaScriptAPIv1.0开发指南<title>Hello,World</title>//网页标题<styletype="text/css">html{height:100%}body{height:100%;margin:0px;padding:0px}#container{height:100%}</style>//设置样式，使地图充满(chōngmǎn)整个浏览器窗口<scripttype="text/javascript“src=/api?v=1.0</script></head><body><divid=“container”></div>//创建div元素//用来作为展示地图的容器<scripttype="text/javascript">varmap=newBMap.Map("container");//创建地图实例varpoint=newBMap.Point(116.404,39.915);//创建点坐标map.centerAndZoom(point,15);//设置中心点坐标和级别</script></body>1.百度地图的“Hello,World”共五十五页JavascriptAPI大众版开发(kāifā)指南1.百度(bǎidù)地图的“Hello,World”共五十五页JavascriptAPI大众版开发(kāifā)指南2.控件：

百度地图上负责与地图交互的UI元素称为控件Control：控件的抽象基类，通过此类您可实现自定义控件NavigationControl：地图平移缩放控件，它包含(bāohán)控制地图的平移和缩放的功能OverviewMapControl：缩略地图控件，默认位于地图右下方ScaleControl：比例尺控件，显示地图的比例关系MapTypeControl：地图类型控件，默认位于地图右上方CopyrightControl：版权控件，默认位于地图左下方GeolocationControl：定位控件，针对移动端开发共五十五页JavascriptAPI大众版开发(kāifā)指南2.控件：使用Map.addControl()方法(fāngfǎ)向地图添加控件：map.addControl(newBMap.NavigationControl());map.addControl(newBMap.ScaleControl());map.addControl(newBMap.OverviewMapControl());map.addControl(newBMap.MapTypeControl());map.setCurrentCity(“北京”);共五十五页JavascriptAPI大众版开发(kāifā)指南2.控件：共五十五页JavascriptAPI大众版开发(kāifā)指南自定义控件百度地图(dìtú)API允许通过继承Control来创建自定义地图控件。步骤如下：定义一个自定义控件的构造函数设置自定义控件构造函数的prototype属性为Control的实例，以便继承控件基类实现initialize()方法并提供defaultAnchor和defaultOffset属性共五十五页JavascriptAPI大众版开发(kāifā)指南functionZoomControl(){//定义一个控件类，即function

this.defaultAnchor=BMAP_ANCHOR_TOP_LEFT;this.defaultOffset=newBMap.Size(10,10);}ZoomCtotype=newBMap.Control();//通过prototype属性继承于BMap.Control//在本方法中创建个div元素作为控件的容器，并将其添加到地图容器中ZoomCtotype.initialize=function(map){//实现initialize方法，将控件DOM元素返回vardiv=document.createElement(“div”);//创建一个DOM元素div.appendChild(document.createTextNode(“放大2级”));//

添加文字说明div.style.cursor=“pointer”;//设置样式

div.style.border="1pxsolidgray";div.style.backgroundColor="white";div.onclick=function(e){map.zoomTo(map.getZoom()+2);}//绑定事件，点击一次放大两级map.getContainer().appendChild(div);//

添加DOM元素到地图中returndiv;}//将DOM元素返回varmyZoomCtrl=newZoomControl();//创建控件实例(shílì)

map.addControl(myZoomCtrl);//添加到地图当中共五十五页JavascriptAPI大众版开发(kāifā)指南3.覆盖类所有叠加或覆盖到地图的内容，统称为地图覆盖物。如标注、矢量图形元素(折线和多边形和圆)、信息窗口等。Overlay：抽象基类，所有的覆盖物均继承此类的方法Marker：标注表示地图上的点，可自定义标注的图标Label：表示地图上的文本标注Polyline：表示地图上的折线Polygon：表示地图上的多边形Circle:

表示地图上的n圆InfoWindow：信息窗口展示更为丰富(fēngfù)的文字和多媒体信息共五十五页JavascriptAPI大众版开发(kāifā)指南3.覆盖(fùgài)类使用map.addOverlay方法向地图添加覆盖物，使用map.removeOverlay方法移除覆盖物varmarker=newBMap.Marker(point);//创建标注

map.addOverlay(marker);//将标注添加到地图中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);varopts={width:250,height:100,title:“Hello”};varinfoWindow=newBMap.InfoWindow(“World”,opts);//创建窗口

map.openInfoWindow(infoWindow,map.getCenter());//打开窗口

共五十五页添加(tiānjiā)行政区划共五十五页JavascriptAPI大众版开发(kāifā)指南4.事件(shìjiàn)浏览器中的JavaScript是“事件驱动的”，用户的鼠标和键盘交互可以创建在DOM内传播的事件。对某些事件感兴趣的程序会为这些事件注册JavaScript事件监听器，并在接收这些事件时执行代码。百度地图API拥有一个自己的事件模型，可监听地图API对象的自定义事件。共五十五页JavascriptAPI大众版开发(kāifā)指南百度地图API可以通过addEventListener方法来监听对象事件该方法有两个参数：监听事件名称和事件触发时调用的函数

varmap=newBMap.Map("container");map.centerAndZoom(newBMap.Point(116.404,39.915),11);map.addEventListener("dragend",function(){

varcenter=map.getCenter();

alert("地图中心点变更为："+center.lng+","+center.lat);});当不希望(xīwàng)监听事件时，removeEventListener

用来移除事件监听函数。4.事件共五十五页JavascriptAPI大众版开发(kāifā)指南5.地图(dìtú)图层地图可以包含一个或多个图层，如

TrafficLayer交通流量图层通过map.addTileLayer方法可向地图添加图层

调用map.removeTileLayer方法从地图上移除图层

varmap=newBMap.Map(“l-map”);

//创建地图实例varpoint=newBMap.Point(116.404,39.915);//创建点坐标

map.centerAndZoom(point,15);//初始化地图vartraffic=newBMap.TrafficLayer();//创建交通流量图层实例map.addTileLayer(traffic);//将图层添加到地图上map.removeTileLayer(traffic);//将图层移除共五十五页JavascriptAPI大众版开发(kāifā)指南6.工具(gōngjù)工具已经制作成开源库（lib）对外免费开放，可直接访问JavaScript开源库。MarkerTool：标注工具。用户可在地图任意区域添加标注。MarkerClusterer：多标注聚合器，解决加载大量点要素到地图上造成缓慢。MarkerManager：标注管理工具。此工具提供展示、隐藏、清除所有标注。RichMarker：富标注工具，为用户提供自定义Marker样式，并添加点击、双击、拖拽等事件。共五十五页JavascriptAPI大众版开发(kāifā)指南6.工具varmap=newBMap.Map("container");map.centerAndZoom(newBMap.Point(116.404,39.915),15);varmyPushpin=newBMap.PushpinTool(map);//

创建(chuàngjiàn)标注工具myPushpin.addEventListener("markend",function(e){alert("您标注的位置："+e.marker.getPoint().lng+","+e.marker.getPoint().lat);});myPushpin.open();

//

开启标注工具

共五十五页JavascriptAPI大众版开发(kāifā)指南6.工具(gōngjù)LuShu：路书，轨迹运动工具，实现marker沿路线运动。CityList：城市列表工具。AreaRestriction：区域限制工具。此工具为用户提供百度地图浏览区域限制设置。GeoUtils：几何运算工具，提供判断点与矩形、圆形、多边形线、多边形面的关系,提供计算折线长度和多边形面积的公式。TrafficControl：实时交通控件。此工具提供将交通流量图层在地图上的实时显示，隐藏等。共五十五页JavascriptAPI大众版开发(kāifā)指南6.工具(gōngjù)DrawingManager：鼠标绘制工具，用户可以在地图任意位置上画点、画线、画面并显示线的距离及面的面积EventWrapper：事件封装工具，提供了人性化的事件使用方法TextIconOverlay：自定义覆盖物工具，使用该工具在地图上添加文字和图标样式的覆盖物SearchInRectangle：拉框缩放工具，实现三种拉框搜索效果SearchInfoWindow：“百度地图样式”的信息窗口工具，提供带搜索框的信息窗口，该窗口内容可自由定制多种风格。SearchControl：检索控件，针对移动端，提供城市列表选择、本地检索框、公交驾车查询框。共五十五页JavascriptAPI大众版开发(kāifā)指南7.服务(fúwù)地图服务是指那些提供数据信息的接口，比如本地搜索、路线规划LocalSearch：本地搜索，提供某一特定地区的位置搜索服务TransitRoute：公交导航，提供公交出行方案的搜索服务DrivingRoute：驾车导航，提供驾车出行方案的搜索服务WalkingRoute：步行导航，提供步行出行方案的搜索服务Geocoder：地址解析，提供将地址信息转换为坐标点信息的服务LocalCity：本地城市，提供自动判断您所在城市的服务TrafficControl：实时路况控件，提供实时和历史路况信息服务共五十五页JavascriptAPI大众版开发(kāifā)指南7.服务(fúwù)LocalSearch需要设置一个检索区域，可以是BMap.Map对象、BMap.Point对象或者是省市名称（“北京市”）的字符串LocalSearch构造函数的第二个参数，BMap.RenderOptions类提供了若干控制呈现的属性varmap=newBMap.Map("container");varlocal=newBMap.LocalSearch(map,{renderOptions:{map:map}});local.search("天安门");BMap.LocalSearch还提包含searchNearby和searchInBounds方法，提供周边搜索和范围搜索服务共五十五页JavascriptAPI大众版开发(kāifā)指南8.用户(yònghù)数据图层

百度地图API可以将用户上传到LBS云里的位置数据实时渲染成图层，然后通过CustomLayer对象叠加到地图上。CustomLayer类提供读取LBS云数据接口，并自动渲染用户数据生成数据图层，同时提供单击叠加图层返回poi数据的功能。共五十五页JavascriptAPI大众版开发(kāifā)指南9.全景图展现(zhǎnxiàn)百度全景地图提供沿着全景覆盖城市指定道路、指定位置点360度的全景视图，相比二维地图全景图更加真实、直观百度LBS开放平台通过JavaScriptAPI对外提供全景功能共五十五页JavascriptAPI大众版开发(kāifā)指南<divid="panorama"style="width:100%;height:100%"></div><scripttype="text/javascript">window.onload=function(){varpanorama=newBMap.Panorama('panorama');panorama.setPosition(newBMap.Point(120.320032,31.589666));panorama.setId('010001000013050112241601//5Z1');panorama.setPov({heading:-40,pitch:6});}</script>经除纬度外，还可通过指定全景的id设置当前显示的全景视图

heading和pitch两个参数用于设置全景的视角，heading指摄像头水平(shuǐpíng)方向（“摇头”）的角度，正北方向为0，正东为90，正南为180，正西为270pitch指摄像头的垂直方向（“点头”）共五十五页JavascriptAPI大众版开发(kāifā)指南10.定制(dìnɡzhì)个性地图定制个性地图是支持用户使用JavaScriptAPI设置地图底图的样式风格（展现颜色为普通、深色、浅色）以及控制组成地图底图的元素类的显示和隐藏，创建满足用户特定需求的与众不同的地图，如通过隐藏某类地图元素，突出展示自己的数据共五十五页JavascriptAPI大众版开发(kāifā)指南10.定制(dìnɡzhì)个性地图共五十五页主要(zhǔyào)内容百度地图API简介LBS开发(kāifā)模式Web开发之JavascriptAPI大众版开发JavascriptAPI开发综合实例学习建议共五十五页综合(zōnghé)实例<div><p><inputid="startBtn"type="button"onclick="startTool();"value="开启取点工具"/><inputtype="button"onclick="map.clearOverlays();document.getElementById('info').innerHTML='';document.getElementById('name').value='';points=[];key=1;document.getElementById('startBtn').style.background='red';document.getElementById('startBtn').value='关闭状态';"value="清除(qīngchú)"/><inputtype="text"value="深圳"id="name"/><inputtype="button"id="btn"value="查找"onclick="startQuery();writeToTxt(document.getElementById('name').value+'，')"/><inputtype="button"id="over"value="闭合多边形"<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>获取区域边界坐标</title><scripttype="text/javascript"src="/api?v=1.2"></script><scripttype="text/javascript"src="/library/GeoUtils/1.2/src/GeoUtils_min.js"></script></head><body><divstyle="weight:100px;height:450px;border:1pxsolidgray"id="container"></div>代码

在实际地理应用中，我们经常需要对一面状地物的边界、面积等信息进行分析，但是对一些小区域我们并不能直接从地图上获取该方面的信息，因此如何获取某区域的边界，显得尤为重要。该实例就是综合利用百度地图API的相关控件，函数等进行地物的有效查询，并通过加载不同类型的地图控件，对不同形式的地图进行比较获取更为准确的边界范围，最后调用相关函数获取边界坐标信息共五十五页综合(zōnghé)实例<scripttype="text/javascript">varmap=newBMap.Map(“container”);//创建Map实例map.centerAndZoom("深圳",11);//初始化地图,设置中心点坐标(zuòbiāo)和地图级别map.enableScrollWheelZoom();//使鼠标滚轮可用varmapType1=newBMap.MapTypeControl({mapTypes:[BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]});varmapType2=newBMap.MapTypeControl({anchor:BMAP_ANCHOR_TOP_LEFT});varoverView=newBMap.OverviewMapControl(); varoverViewOpen=newBMap.OverviewMapControl({isOpen:true,anchor:BMAP_ANCHOR_BOTTOM_RIGHT});

//添加地图类型和缩略图onclick="closePolyline();document.getElementById('startBtn').style.background='red';document.getElementById('startBtn').value='关闭状态';key=1;"/><inputtype="button"value="添加地图类型控件"onclick="add_control()"/><inputtype="button"value="删除地图类型控件"onclick="delete_control()"/></p></div><divid="info"></div></body></html>代码共五十五页综合(zōnghé)实例//根据输入的名称进行查询，并显示出来functionstartQuery(){varlocal=newBMap.LocalSearch(map,{renderOptions:{map:map},autoViewPoint:true});varname=document.getElementById("name").value;local.search(name);//查询alert("查找完毕，请谨慎选择！");}//打开txt文档并将数据写入functionwriteToTxt(s){//权限只读(只读=1，只写=2，追加(zhuījiā)=8等权限)varForReading=1,ForAppending=8;varfso=newActiveXObject("Scripting.FileSystemObject");varaddss="C:\\Users\\Administrator\\Desktop\\区域坐标\\坐标(new).txt"Varf=fso.OpenTextFile(addss,ForAppending,false);f.Write(s);}//functionadd_control(){ map.addControl(mapType1);//2D图，卫星图 map.addControl(mapType2);//左上角，默认地图控 map.setCurrentCity("北京");//由于有3D图，需要设置城市哦 map.addControl(overView);//添加默认缩略地图控件 map.addControl(overViewOpen);//右下角，打开

}//移除地图类型和缩略图

functiondelete_control(){ map.removeControl(mapType1);//移除2D图，卫星图

map.removeControl(mapType2); map.removeControl(overView); map.removeControl(overViewOpen);}//代码共五十五页综合(zōnghé)实例map.addEventListener("click",function(e){//单击地图，形线覆盖成折物

newpoint=newBMap.Point(e.point.lng,e.point.lat);if(key==0){points.push(newpoint);//将新增的点放到数组中

polyline.setPath(points);//设置折线的点数组

map.addOverlay(polyline);//将折线添加到地图上

document.getElementById("info").innerHTML+=e.point.lng+","+e.point.lat+";"+"\n";//输出数组里的经纬度//调用writeToTxt()函数，将数据(shùjù)写入指定文档中varcoor=e.point.lng+"，"+e.point.lat+"；";writeToTxt(coor);alert("该点坐标已写入，请选择下一个有效点！");}});varkey

人人文库> 全部分类> 教育资料 > 作文作品

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论