百度地图API手册
- 格式:docx
- 大小:131.96 KB
- 文档页数:48
百度地图API⽰例之设置地图显⽰范围代码<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="viewport" content="initial-scale=1.0, user-scalable=no"/><style type="text/css">body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅⿊";}#allmap{width:100%;height:500px;}p{margin-left:5px; font-size:14px;}</style><script type="text/javascript" src="/api?v=2.0&ak=sSelQoVi2L3KofLo1HOobonW"></script><script type="text/javascript" src="/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script><title>设置地图显⽰范围</title></head><body><div id="allmap"></div><p>将地图显⽰范围设定在指定区域,地图拖出该区域后会重新弹回。
引入百度api<script type="text/javascript" src=".com/api?v=1.4"></script> 1.4api版本<script type="text/javascript" src=".com/library/MapWrapper/1.2/src/"></script> 转化gps坐标google坐标用初始化地图var myMap = new BMap.Map("divMap"); //divMap为要在id为divMap的div中myMap.centerAndZoom(new BMap.Point(116.404, 39.915), 12);//地图显示中心坐标为116.404,39.915,放大级别为12myMap.enableScrollWheelZoom(); //允许鼠标滚轮滑动放大缩小地图label添加var point=new BMap.Point(116.404, 39.915);//label显示的位置var myLabel = new bel("海辉房产21000元", //为lable填写内容{offset:new BMap.Size(-60,-60), //label的偏移量,为了让label的中心显示在点上position:point}); //label的位置myLabel.setTitle("我是文本标注label");myLabel.setTitle("我是文本标注label");//为label添加鼠标提示myLabel.setStyle({ //给label设置样式,任意的CSS都是可以的"color":"red", //颜色"fontSize":"14px", //字号"border":"0", //边"height":"120px", //高度" width":"125px", //宽"textAlign":"center", //文字水平居中显示1"lineHeight":"120px", //行高,文字垂直居中显示"background":"url(/icons/CrystalClear/128x128/actions/gohome.png)", //背景图片,这是房产标注的关键!"cursor":"pointer"});myMap.addOverlay(myLabel); //把label添加到地图上以上设置效果如图1添加自定义marker自定义marker图标样式默认为红色水滴形式下面代码为更改图标样式var iconSelf = new BMap.Icon('self.png', new BMap.Size(20, 32), { //设置图标显示图片anchor: new BMap.Size(10, 30)var mkrSelf = new BMap.Marker(new BMap.Point(116.250 + i * 0.01, 39.910), { //设置位置icon: iconSelf});myMap.addOverlay(mkrSelf); //添加到地图中设置效果如下默认图标如下添加maker监听鼠标放上事件及显示信息mkrSelf .addEventListener("mouseover", function(){var infoWin = new Window("Person" + i);//定义显示信息this.openInfoWindow(infoWin);});效果如下3。
百度地图API百度地图API应用实例Michael Tian目录百度地图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应用示例 (6)2.1 Map类 (7)2.2 ExtJs (7)2.2.1 将百度地图嵌入到Ext中 (8)2.2.2 在Ext中显示百度地图 (10)2.3 向地图添加标注 (10)2.4 为标注添加信息窗口 (11)2.5 标注与数据列表的联动 (12)2.6 数据列表与标注的联动 (12)2.7 创建可拖拽的标注 (14)3折线 (14)3.1添加多边形 (14)3.2样式设置 (16)4自定义标注 (16)5 文本标注 (17)5.1 添加一个文本标注 (17)5.2 文本位置偏移值 (18)5.3 自定义Label (19)5.4 添加滑动门效果 (20)6参考资料 (21)百度地图API1基础知识1.1 百度地图 API 概念百度地图API是一套由JavaScript语言编写的应用程序接口,它能够帮助您在网站中构建功能丰富、交互性强的地图应用程序。
百度地图API不仅包含构建地图的基本功能接口,还提供了诸如本地搜索、路线规划等数据服务。
1.2 百度地图的“Hello, World”开始学习百度地图API最简单的方式是看一个简单的示例。
以下代码创建了一个520x340<meta http-equiv="Content-Type"content="text/html; charset=gbk"/> <title>Hello, World</title><scriptsrc=/api?key=46ce9d0614bf7aefe0ba562f8cf87194 &v=1.0&services=false type="text/javascript"></script></head><body><div style="width: 520px; height: 340px; border: 1px solid gray"id="container"></div></body></html><script type="text/javascript">var map = new BMap.Map("container"); // 创建Map实例var point = new BMap.Point(116.404, 39.915); // 创建点坐标map.centerAndZoom(point,15); // 初始化地图,设置中心点坐标和地图级别。
百度地图说明文档1.界面展示界面整体分为4部分,主地图显示区、鼠标测距地图区、按钮与输入区、结果面板区。
主地图显示区用于除测距以外的功能显示,鼠标测距地图区只用于鼠标测距,结果面板区显示部分查询结果。
功能实现包括基本操作功能:鼠标滚轮放大、缩小、全图、拖拽平移、卫星地图切换、鼠标测距,其他功能有(1)定位查询(输入经纬度坐标在图上查询具体位置)(2)经纬度坐标获取(鼠标点击获取图上经纬度坐标)(3)快速查询(不同行政区级别点击查询缩放到当前位置,通过城市定位和关键字提示实现)(4)关键词查询(输入查询内容将查询结果显示到控制面板和图上)(5)覆盖物叠加(点击按钮将覆盖物添加到图上)(6)删除覆盖物(点击按钮删除覆盖物,包括关键字查询、路线查询在图上显示的覆盖物,用于清除查询结果,便于二次查询)(7)信息窗口(点击图上点覆盖物弹出信息窗口)(8)地址解析/逆解析、添加点线面(直接选用工具条上按钮进行绘制)(9)编辑功能(点击按钮开启/关闭编辑)(10)获取绘制的覆盖物个数,清除所有覆盖物(11)步行路线规划(包括地图上显示和结果面板显示)(12)驾车路线规划(信息窗口显示驾车所需时间和行驶距离,地图和结果面板显示路线)(13)公交车和地铁路线查询(输入公交车或地铁号,在结果面板显示经过的站点及发车信息)(14)公交车出行路线规划(地图上显示路线)(15)输入时关键字提示(16)右下角打开路况提示以下为部分功能实现效果截图关键字查询(结果显示在地图上)关键字查询结果显示在结果面板步行路线规划驾车路线规划公交车和地铁路线站点查询,结果显示在查询面板公交路线规划2.框架界面先分成左右两部分,container1、container2分别占70%和30%,左侧上部为主地图allmap占70%,下部按钮输入区container3占30%,右侧鼠标测距区allmap1占30%,结果面板r-result占70%。
核心类∙Map基础类∙Point∙Pixel∙Bounds∙Size控件类∙Control∙ControlAnchor∙NavigationControl∙NavigationControlType∙NavigationControlOptions∙OverviewMapControl∙OverviewMapControlOptions∙ScaleControl∙ScaleControlOptions∙LengthUnit∙CopyrightControl∙Copyright∙CopyrightControlOptions覆盖物类∙Overlay∙InfoWindow∙InfoWindowOptions∙Marker∙MarkerOptions∙Label∙LabelOptions∙Polyline∙PolylineOptions∙Polygon∙PolygonOptions∙Icon∙IconOptions右键菜单类∙ContextMenu∙MenuItem∙MenuItemOptions工具类∙PushpinTool∙PushpinToolOptions∙DistanceTool∙DragAndZoomTool∙DragAndZoomToolOptions∙ZoomType地图图层类∙TileLayer∙TileLayerOptions∙MapType服务类∙LocalSearch∙LocalSearchOptions∙StatusCode∙LocalResult∙LocalResultPoi∙PoiType∙TransitRoute∙TransitRouteOptions∙TransitPolicy∙TransitRouteResult∙TransitRoutePlan∙Line∙LineType∙DrivingRoute∙DrivingRouteOptions∙DrivingPolicy∙DrivingRouteResult∙RoutePlan∙Route∙RouteType∙WalkingRoute∙WalkingRouteOptions∙WalkingRouteResult∙Geocoder∙LocalCity∙LocalCityOptions∙LocalCityResult∙TrafficControlMap 类此类是地图API的核心类,用来实例化一个地图。
百度地图API基本使⽤(⼆)本⽂系作者原创,转载请私信并在⽂章开头附带作者和原⽂地址链接。
违者,作者保留追究权利。
前⾔PS:我所使⽤的的是百度地图Javascript API 3.0本⽂是对之前使⽤的延续,继续对百度地图API的⼀些使⽤去做归纳和总结,本次主要是对地图上的覆盖物这块做介绍,如果有⼩伙伴没有看过之前的,可以先去观看⼀下,前期所需要的⼀些准备,以及⼀些基本的⽤法。
感兴趣的⼩伙伴可以⾃⾏查看百度地图官⽅提供的⽂档开发⽂档中的JavaScript API也可以通过下⽅⽰例中⼼更直观的看到百度地图API的⼀些使⽤,以及它的⼀些特性不过要注意:实例中⼼使⽤的是BMapGL去创建容器的,最新版GL地图命名空间为BMapGL, 可按住⿏标右键控制地图旋转、修改倾斜⾓度。
由于本次使⽤的是BMapGL所以在引⼊API的时候也不太⼀样引⼊⽅式如下:<script type="text/javascript" src="///api?type=webgl&v=1.0&ak=您的密钥"></script>好的,废话不多说,开整百度地图API-覆盖物在讲覆盖物之前,先给⼤家讲⼀下覆盖物的添加和删除的⽅法,这个是通⽤的,下⾯各种类型的覆盖的添加和删除的使⽤是⼀样的。
在我们获取到容器之后,根据⾃⼰的需求创建好⾃⼰的覆盖物对象之后,如果我们需要添加覆盖物的话,就可以使⽤容器对象.addOverlay(覆盖物对象);如果我们需要清除覆盖物的话,只需要使⽤容器对象.clearOverlays();就可以清除所有,但是如果只是想清除某⼀个覆盖物的话,我们需要使⽤容器对象.removeOverlays(覆盖物对象);代码⽰例如下://创建容器var map = new BMapGL.Map('allmap');var point = new BMapGL.Point(116.404, 39.915);map.centerAndZoom(point, 15);// 创建点覆盖物var marker = new BMapGL.Marker(new BMapGL.Point(116.404, 39.915));//添加覆盖物map.addOverlay(marker);//删除具体覆盖物map.removeOverlays(marker);//删除所有覆盖物map.clearOverlays();1. 点覆盖物点覆盖物主要使⽤的是Marker这个⽅法,例如:var marker1 = new BMapGL.Marker(new BMapGL.Point(经度, 纬度));这样就创建好了⼀个点覆盖物对象,我们需要使⽤上⾯介绍的添加覆盖物的⽅法,将覆盖物添加到容器中,即容器对象.addOverlay(marker1)这样就实现了简单的点覆盖物,不过有的时候需要我们的覆盖物能够拖动,所以这个时候就要⽤到⼀个属性enableDragging,默认情况下是false,也就是说在上⾯的那些默认创建的⽅式这个属性都是false,这是属性字⾯意思也很好理解⽀持拖拽,所以如果有需要拖拽的需求,我们只需要将整个属性设置为true。
如何在⽹中使⽤百度地图API⾃定义个性化地图<!DOCTYPE html><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="keywords" content="百度地图,百度地图API,百度地图⾃定义⼯具,百度地图所见即所得⼯具" /><meta name="description" content="百度地图API⾃定义地图,帮助⽤户在可视化操作下⽣成百度地图" /><title>百度地图API⾃定义地图</title><!--引⽤百度地图API--><script type="text/javascript" src="/api?v=2.0&ak=17b7Lhnf06x0CMZLI3aYn5ZIdMxfGcyc"></script> </head><body><!--百度地图容器--><div style="width:100%;height:550px;border:#ccc solid 1px;font-size:12px" id="map"></div></body><script type="text/javascript">//创建和初始化地图函数:function initMap(){createMap();//创建地图setMapEvent();//设置地图事件addMapControl();//向地图添加控件addMapOverlay();//向地图添加覆盖物}function createMap(){map = new BMap.Map("map");map.centerAndZoom(new BMap.Point(116.421218,40.068393),15);}function setMapEvent(){map.enableScrollWheelZoom();map.enableKeyboard();map.enableDragging();map.enableDoubleClickZoom()}function addClickHandler(target,window){target.addEventListener("click",function(){target.openInfoWindow(window);});}function addMapOverlay(){var markers = [{content:"哈哈哈",title:"禹⾠时代",imageOffset: {width:0,height:3},position:{lat:40.072424,lng:116.420931}}];for(var index = 0; index < markers.length; index++ ){var point = new BMap.Point(markers[index].position.lng,markers[index]t);var marker = new BMap.Marker(point,{icon:new BMap.Icon("/lbsapi/createmap/images/icon.png",new BMap.Size(20,25),{imageOffset: new BMap.Size(markers[index].imageOffset.width,markers[index].imageOffset.height)})});var label = new bel(markers[index].title,{offset: new BMap.Size(25,5)});var opts = {width: 200,title: markers[index].title,enableMessage: false};var mapStyle = { style: "dark" };map.setMapStyle(mapStyle);var infoWindow = new Window(markers[index].content,opts);marker.setLabel(label);addClickHandler(marker,infoWindow);map.addOverlay(marker);};}//向地图添加控件function addMapControl(){var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});scaleControl.setUnit(BMAP_UNIT_IMPERIAL);map.addControl(scaleControl);var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE}); map.addControl(navControl);var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:true});map.addControl(overviewControl);}var map;initMap();</script></html>重点:创建应⽤的时候:选项如下图所⽰。
百度地图WebAPI使用指南一、WebAPI介绍百度地图WebAPI是百度提供的一套基于Web的地图应用程序接口,旨在帮助开发者快速构建地图相关应用。
它提供了多种功能,如地图显示、地图搜索、路线规划等,使开发者可以将地图相关功能集成到自己的网站或应用中。
二、地图显示1.地图展示模块百度地图WebAPI提供了地图展示模块,可以在网页中显示地图。
开发者可以通过指定地图的中心点和缩放级别来展示不同区域的地图;还可以添加自定义的覆盖物,如标注、信息窗口等,为地图增加更多的功能和交互体验。
2.地图样式设置百度地图WebAPI支持自定义地图样式,开发者可以根据自己的需求,调整地图的颜色、图标、文字等,打造独特的地图风格。
三、地图搜索1.地点搜索百度地图WebAPI提供了地点搜索功能,开发者可以根据关键词搜索附近的地点信息。
搜索结果包括地点名称、地址、联系方式等详细信息,还可以获取地点的坐标信息,方便进行其他操作。
2.地点详情除了地点搜索,百度地图WebAPI还支持查询具体地点的详细信息,如所属区域、营业时间、评分等。
开发者可以通过API获取这些信息,并在自己的应用中展示。
四、路线规划1.驾车路线规划百度地图WebAPI支持驾车路线规划,开发者可以根据起点和终点计算最优驾车路线,并获取详细的导航信息,如总距离、预计行驶时间、途经路线等。
2.步行和骑行路线规划除了驾车路线规划,百度地图WebAPI还支持步行和骑行路线规划。
开发者可以根据起点和终点,计算出最短的步行或骑行路线,并获取相关的信息。
五、定位与地理编码1.定位功能百度地图WebAPI提供了定位功能,可以通过浏览器获取用户的当前位置。
开发者可以利用这个功能实现位置服务、导航等应用。
2.逆地理编码百度地图WebAPI支持逆地理编码功能,将坐标转换为实际地址。
开发者可以根据坐标信息,获取位置的详细地址,方便展示和使用。
六、云存储与数据可视化1.云存储百度地图WebAPI提供了云存储功能,开发者可以将自定义的数据存储在百度地图云平台上。
核心类
•Map
基础类
•Point
•Pixel
•Bounds
•Size
控件类
•Control •ControlAnchor •NavigationControl •NavigationControlType •NavigationControlOptions •OverviewMapControl •OverviewMapControlOptions •ScaleControl •ScaleControlOptions •LengthUnit •CopyrightControl •Copyright •CopyrightControlOptions 覆盖物类
•Overlay
•InfoWindow •InfoWindowOptions •Marker •MarkerOptions
•Label
•LabelOptions
•Polyline •PolylineOptions •Polygon •PolygonOptions
•Icon
•IconOptions
右键菜单类•ContextMenu •MenuItem •MenuItemOptions
工具类
•PushpinTool •PushpinToolOptions •DistanceTool
•DragAndZoomTool
•DragAndZoomToolOptions
•ZoomType
地图图层类
•TileLayer
•TileLayerOptions
•MapType
服务类
•LocalSearch
•LocalSearchOptions
•StatusCode
•LocalResult
•LocalResultPoi
•PoiType
•TransitRoute
•TransitRouteOptions
•TransitPolicy
•TransitRouteResult
•TransitRoutePlan
•Line
•LineType
•DrivingRoute
•DrivingRouteOptions
•DrivingPolicy
•DrivingRouteResult
•RoutePlan
•Route
•RouteType
•WalkingRoute
•WalkingRouteOptions
•WalkingRouteResult
•Geocoder
•LocalCity
•LocalCityOptions
•LocalCityResult
•TrafficControl
Map 类
此类是地图API的核心类,用来实例化一个地图。
构造函数
此类表示Map构造函数的可选参数。
它没有构造函数,但可通过对象字面量形式表示。
此类表示一个地理坐标点。
此类表示地图上的一点,单位为像素。
Bounds 类
构造函数
此类表示地理坐标的矩形区域。
矩形区域通过两个点的x、y坐标进行描述,其中数值较小的点位于矩形的左下角、数值较大的点位于矩形的右上角。
此类以像素表示一个矩形区域的大小。
Size对象包含两个属性:width、height,分别表
此类是所有控件的基类,您可以通过此类来实现自定义控件。
所有控件均包含Control类的属性、方法和事件。
通过Map.addControl()方法可将控件添加到地图上。
此常量表示控件的定位。
此类表示NavigationControl构造函数的可选参数。
它没有构造函数,但可通过对象字面
此类表示缩略地图控件。
构造函数
此类表示OverviewMapControl构造函数的可选参数。
它没有构造函数,但可通过对象字
此类表示ScaleControl构造函数的可选参数。
它没有构造函数,但可通过对象字面量形
此类表示版权控件,您可以在地图上添加自己的版权信息。
每一个版权信息需要包含如下内
此类表示一条版权信息。
可作为CopyrightControl.addCopyright()方法的参数。
它没
此类表示CopyrightControl构造函数的可选参数。
它没有构造函数,但可通过对象字面
此类表示InfoWindow构造函数的可选参数,它没有构造函数,但可通过对象字面量形式表示。
此类表示Marker构造函数的可选参数。
它没有构造函数,但可通过对象字面量形式表示。
此类表示地图上的文本标注。
此类表示Lable构造函数的可选参数。
它没有构造函数,但可通过对象字面量形式表示。
此类表示Polyline构造函数的可选参数。
它没有构造函数,但可通过对象字面量形式表示。
此类表示Polygon构造函数的可选参数。
它没有构造函数,但可通过对象字面量形式表示。
此类表示标注覆盖物所使用的图标。
此类表示Icon构造函数的可选参数。
它没有构造函数,但可通过对象字面量形式表示。
此类表示标注工具。
此工具用来让使用者在地图上标注一个位置,可以通过该工具提供的事
此类表示PushpinTool构造函数的可选参数。
它没有构造函数,但可通过对象字面量形式
此类表示DragAndZoomTool构造函数的可选参数。
它没有构造函数,但可通过对象字面量
此枚举常量表示区域缩放工具的缩放类型
此类表示一个菜单项。
此枚举常量表示地图图层的类型
此类表示搜索结果呈现的配置。
它没有构造函数,但可通过对象字面量形式表示。
此常量用于描述对象当前状态。
此类表示LocalSearch的检索结果,没有构造函数,通过LocalSearch.getResults()方法或LocalSearch的onSearchComplete回调函数的参数得到。
此枚举常量表示地点的类型。
此类表示TransitRoute构造函数的可选参数。
它没有构造函数,但可通过对象字面量形式表示。
此常量表示公交方案的策略。
此类表示路线导航的结果,没有构造函数,通过访问TransitRoute.getResults()方法或
此类表示一条公交出行方案。
没有构造函数,通过TransitRouteResult.getPlan()方法
此枚举类型表示不同类型的公共交通线路。
此枚举类型表示驾车方案的策略配置。
此类表示路线导航的结果,没有构造函数,通过DrivingRoute.getResults()方法或
此类表示一条驾车或步行出行方案。
它没有构造函数,可通过
DrivingRouteResult.getPlan()方法或WalkingRouteResult类的getPlan()方法获
此常量表示不同的线路类型。
此类表示驾车或步行路线中的一个关键点。
它没有构造函数,通过Route.getStep()方法
此类表示WalkingRoute构造函数的可选参数。
此类表示路线导航的结果,没有构造函数,通过访问WalkingRoute.getResults()方法或
此类表示交通流量控件,它继承Control类,包含该类的所有方法。
该控件的停靠位置常。