百度地图文档

1、百度地图研究摘要文档一 创建地图实例1. 用城市名作为地图中心点的创建方式。body, html,#allmap width: 100%;height: 100%;overflow: hidden;margin:0;script type=text/javascript src=用城市名设置地图中心点/ 百度地图API功能var map = new BMap.Map(allmap); / 创建Map实例map.centerAndZoom(合肥,15); / 初始化地图,设置中心点坐标和地图级别。2./ 百度地图API功能var map = new BMap.Map(allmap); / 创建M

2、ap实例map.centerAndZoom(new BMap.Point(116.4035,39.915),15); /初始化时，即可设置中心点和地图缩放级别。setTimeout(function() map.setCenter(广州); /设置地图中心点。center除了可以为坐标点以外，还支持城市名 map.setZoom(10); /将视图切换到指定的缩放等级，中心点坐标不变 , 1500);二地图的拖拽和缩放功能1.当地图创建成功之后，默认是可以拖拽的。添加上如下语句就不支持拖拽。map.disableDragging(); /禁止拖拽setTimeout(function() ma

3、p.enableDragging(); /三秒后开启拖拽 /map.enableInertialDragging(); /三秒后开启惯性拖拽, 3000);地图可以实现鼠标滑动缩放。map.enableScrollWheelZoom(); /启用滚轮放大缩小，如果不添加本句话，不可缩放。获取坐标中心方法：alert(当前地图中心点： + map.getCenter().lng + , + map.getCenter().lat);鼠标点击获取坐标：map.addEventListener(click,function(e)/鼠标点击获取坐标 alert(e.point.lng + , + e.

4、point.lat););二 地图的相关控件1. 在地图的四个拐角放置4个缩放的控件菜单map.addControl(new BMap.NavigationControl(); /添加默认缩放平移控件map.addControl(new BMap.NavigationControl(anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL); /右上角，仅包含平移和缩放按钮map.addControl(new BMap.NavigationControl(anchor: BMAP_ANCHOR_BOTTOM_LEFT,

5、 type: BMAP_NAVIGATION_CONTROL_PAN); /左下角，仅包含平移按钮map.addControl(new BMap.NavigationControl(anchor: BMAP_ANCHOR_BOTTOM_RIGHT, type: BMAP_NAVIGATION_CONTROL_ZOOM); /右下角，仅包含缩放按钮map.addControl(new BMap.OverviewMapControl(); /添加默认缩略地图控件map.addControl(new BMap.OverviewMapControl(isOpen:true, anchor: BMAP_

6、ANCHOR_TOP_RIGHT); /右上角，打开2. 添加比例尺控件var map = new BMap.Map(allmap);map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);map.addControl(new BMap.ScaleControl(); / 添加默认比例尺控件map.addControl(new BMap.ScaleControl(anchor: BMAP_ANCHOR_TOP_LEFT); / 左上map.addControl(new BMap.ScaleControl(anchor: BMAP_ANCHO

7、R_TOP_RIGHT); / 右上map.addControl(new BMap.ScaleControl(anchor: BMAP_ANCHOR_BOTTOM_LEFT); / 左下map.addControl(new BMap.ScaleControl(anchor: BMAP_ANCHOR_BOTTOM_RIGHT); / 右下3. 添加版权控制/ 百度地图API功能var map = new BMap.Map(allmap);map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);var cr = new BMap.Copyrig

8、htControl(anchor: BMAP_ANCHOR_TOP_RIGHT); /设置版权控件位置map.addControl(cr); /添加版权控件var bs = map.getBounds(); /返回地图可视区域cr.addCopyright(id: 1, content: 我是自定义版权控件呀, bounds: bs); /Copyright(id,content,bounds)类作为CopyrightControl.addCopyright()方法的参数4. 添加标注点和弹出信息/ 百度地图API功能var map = new BMap.Map(allmap);map.cen

9、terAndZoom(new BMap.Point(116.404, 39.915), 14);var marker1 = new BMap.Marker(new BMap.Point(116.384, 39.925); / 创建标注map.addOverlay(marker1); / 将标注添加到地图中/创建信息窗口var infoWindow1 = new BMap.InfoWindow(普通标注);marker1.addEventListener(click, function()this.openInfoWindow(infoWindow1););/创建小狐狸var pt = new

10、BMap.Point(116.417, 39.909);var myIcon = new BMap.Icon(fox.gif, new BMap.Size(300,157);var marker2 = new BMap.Marker(pt,icon:myIcon); / 创建标注map.addOverlay(marker2); / 将标注添加到地图中/让小狐狸说话（创建信息窗口）var infoWindow2 = new BMap.InfoWindow(哈哈，你看见我啦！我可不常出现哦！赶快查看源代码，看看我是如何添加上来的！);marker2.addEventListener(click,

11、function()this.openInfoWindow(infoWindow2););5.添加动态的标注/ 百度地图API功能var map = new BMap.Map(allmap);var point = new BMap.Point(116.404, 39.915);map.centerAndZoom(point, 15);var marker = new BMap.Marker(point); / 创建标注map.addOverlay(marker); / 将标注添加到地图中marker.setAnimation(BMAP_ANIMATION_BOUNCE); /跳动的动画5.

12、随机添加标注点/ 编写自定义函数,创建标注function addMarker(point) var marker = new BMap.Marker(point); map.addOverlay(marker);/ 随机向地图添加25个标注var bounds = map.getBounds();var sw = bounds.getSouthWest();var ne = bounds.getNorthEast();var lngSpan = Math.abs(sw.lng - ne.lng);var latSpan = Math.abs(ne.lat - sw.lat);for (var

13、 i = 0; i 25; i +) var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7); addMarker(point);6. 添加折线ar polyline = new BMap.Polyline( new BMap.Point(116.399, 29.910), new BMap.Point(116.405, 39.920), new BMap.Point(116.425, 39.900), strokeColor:bl

14、ue, strokeWeight:6, strokeOpacity:0.5);map.addOverlay(polyline);7. 添加多边形/ 百度地图API功能var map = new BMap.Map(allmap);var point = new BMap.Point(116.404, 39.915);map.centerAndZoom(point, 11);var polygon = new BMap.Polygon( new BMap.Point(116.256515,39.995242), new BMap.Point(116.502579,39.951893), new B

15、Map.Point(116.534775,39.998338), new BMap.Point(116.256515,39.866882), strokeColor:blue, strokeWeight:6, strokeOpacity:0.5);map.addOverlay(polygon);8. 添加圆形/ 百度地图API功能var map = new BMap.Map(allmap);var point = new BMap.Point(116.404, 39.915);map.centerAndZoom(point, 16);var circle = new BMap.Circle(p

16、oint,50);map.addOverlay(circle);9. 添加矩形图var pStart = new BMap.Point(116.236106,39.994579);var pEnd = new BMap.Point(116.58508,39.857356);var polygon = new BMap.Polygon( new BMap.Point(pStart.lng,pStart.lat), new BMap.Point(pEnd.lng,pStart.lat), new BMap.Point(pEnd.lng,pEnd.lat), new BMap.Point(pStar

17、t.lng,pEnd.lat), strokeColor:blue, strokeWeight:6, strokeOpacity:0.5);map.addOverlay(polygon);10. 添加弧形（是否可以编辑）/ 百度地图API功能var map = new BMap.Map(container);map.centerAndZoom(new BMap.Point(118.454, 32.955), 6);map.enableScrollWheelZoom();var beijingPosition=new BMap.Point(116.432045,39.910683),hangzh

18、ouPosition=new BMap.Point(120.129721,30.314429),taiwanPosition=new BMap.Point(121.491121,25.127053);var points = beijingPosition,hangzhouPosition, taiwanPosition;var curve = new BMapLib.CurveLine(points, strokeColor:blue, strokeWeight:3, strokeOpacity:0.5); /创建弧线对象map.addOverlay(curve); /添加到地图中curve

19、.enableEditing(); /开启编辑功能11. 添加文本标注/ 百度地图API功能var map = new BMap.Map(allmap);var point = new BMap.Point(116.417854,39.921988);map.centerAndZoom(point, 15);var opts = position : point, / 指定文本标注所在的地理位置 offset : new BMap.Size(30, -30) /设置文本偏移量 var label = new BMap.Label(欢迎使用百度地图，这是一个简单的文本标注哦, opts); /

20、创建文本标注对象label.setStyle( color : red, fontSize : 12px, height : 20px, lineHeight : 20px, fontFamily:微软雅黑 );map.addOverlay(label);12. 在地图上标注热点信息/ 百度地图API功能var map = new BMap.Map(allmap);var point = new BMap.Point(116.404, 39.915); / 创建点坐标map.centerAndZoom(point,15); / 初始化地图,设置中心点坐标和地图级别。/在天安门添加一个热区,鼠标

21、放在地图天安门上，会出现提示文字var hotSpot = new BMap.Hotspot(point, text: 我爱北京天安门!, minZoom: 8, maxZoom: 18);map.addHotspot(hotSpot);/在王府井地铁处，再添加一个热区var point2 = new BMap.Point(116.41787,39.914391);var hotSpot2 = new BMap.Hotspot(point2, text: 王府井地铁);map.addHotspot(hotSpot2);13. 画出行政区范围/ 百度地图API功能var map = new BM

22、ap.Map(allmap);map.centerAndZoom(new BMap.Point(116.403765, 39.914850), 5);map.enableScrollWheelZoom();function getBoundary() var bdary = new BMap.Boundary(); bdary.get(重庆, function(rs) /获取行政区域 /map.clearOverlays(); /清除地图覆盖物 var count = rs.boundaries.length; /行政区域的点有多少个 for(var i = 0; i count; i+) v

23、ar ply = new BMap.Polygon(rs.boundariesi, strokeWeight: 2, strokeColor: #ff0000); /建立多边形覆盖物 map.addOverlay(ply); /添加覆盖物 map.setViewport(ply.getPath(); /调整视野 ); setTimeout(function() getBoundary();, 2000);/两秒后出现重庆行政区的轮廓14. 自定义覆盖物出现在地图之上mp.enableScrollWheelZoom();/ 复杂的自定义覆盖物 function ComplexCustomOver

24、lay(point, text, mouseoverText) this._point = point; this._text = text; this._overText = mouseoverText; ComplexCustomOtotype = new BMap.Overlay(); ComplexCustomOtotype.initialize = function(map) this._map = map; var div = this._div = document.createElement(div); div.style.positio

25、n = absolute; div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat); div.style.backgroundColor = #EE5D5B; div.style.border = 1px solid #BC3B3A; div.style.color = white; div.style.height = 18px; div.style.padding = 2px; div.style.lineHeight = 18px; div.style.whiteSpace = nowrap; div.style.MozUse

26、rSelect = none; div.style.fontSize = 12px var span = this._span = document.createElement(span); div.appendChild(span); span.appendChild(document.createTextNode(this._text); var that = this; var arrow = this._arrow = document.createElement(div); arrow.style.background = url( no-repeat; arrow.style.po

27、sition = absolute; arrow.style.width = 11px; arrow.style.height = 10px; arrow.style.top = 22px; arrow.style.left = 10px; arrow.style.overflow = hidden; div.appendChild(arrow); div.onmouseover = function() this.style.backgroundColor = #6BADCA; this.style.borderColor = #0000ff; this.getElementsByTagNa

28、me(span)0.innerHTML = that._overText; arrow.style.backgroundPosition = 0px -20px; div.onmouseout = function() this.style.backgroundColor = #EE5D5B; this.style.borderColor = #BC3B3A; this.getElementsByTagName(span)0.innerHTML = that._text; arrow.style.backgroundPosition = 0px 0px; mp.getPanes().label

29、Pane.appendChild(div); return div; ComplexCustomOtotype.draw = function() var map = this._map; var pixel = map.pointToOverlayPixel(this._point); this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + px; this._div.style.top = pixel.y - 30 + px; var txt = 银湖海岸城, mouseoverTxt =

30、txt + + parseInt(Math.random() * 1000,10) + 套 ; var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(116.407845,39.914101), 银湖海岸城,mouseoverTxt);mp.addOverlay(myCompOverlay);15. 定义标注的显示和隐藏 / 百度地图API功能var map = new BMap.Map(l-map);map.centerAndZoom(北京, 15);var marker = new BMap.Marker(new BMap.

31、Point(116.404, 39.915); / 创建标注map.addOverlay(marker); / 将标注添加到地图中marker.enableDragging(); /可拖拽 var label = new BMap.Label(我是文字标注哦,offset:new BMap.Size(20,-10);marker.setLabel(label);16. 显示是否可编辑区域 开启编辑功能 关闭编辑功能/ 百度地图API功能var map = new BMap.Map(allmap);map.centerAndZoom(合肥市, 7);map.enableScrollWheelZo

32、om();var ply;function getBoundary() var bdary = new BMap.Boundary(); bdary.get(蜀山区, function(rs) /获取行政区域 map.clearOverlays(); /清除地图覆盖物 var count = rs.boundaries.length; /行政区域的点有多少个 for(var i = 0; i count; i+) console.log(rs.boundariesi.length); ply = new BMap.Polygon(rs.boundariesi, strokeWeight: 2,

33、 strokeColor: #ff0000); /建立多边形覆盖物 map.addOverlay(ply); /添加覆盖物 map.setViewport(ply.getPath(); /调整视野 ply.enableEditing(); /开启线编辑功能 ); setTimeout(function() getBoundary();, 500);17. 添加鼠标右键功能var map = new BMap.Map(allmap);var point = new BMap.Point(116.404, 39.915);map.centerAndZoom(point,15);var menu =

34、 new BMap.ContextMenu();var txtMenuItem = text:放大, callback:function()map.zoomIn() , text:缩小, callback:function()map.zoomOut() ; for(var i=0; i txtMenuItem.length; i+) menu.addItem(new BMap.MenuItem(txtMenuItemi.text,txtMenuItemi.callback,100); map.addContextMenu(menu);17在地图上添加标注/ 百度地图API功能var map =

35、 new BMap.Map(allmap);var point = new BMap.Point(116.404, 39.915);map.centerAndZoom(point,15);var contextMenu = new BMap.ContextMenu();var txtMenuItem = text:放大, callback:function()map.zoomIn() , text:缩小, callback:function()map.zoomOut() , text:放置到最大级, callback:function()map.setZoom(18) , text:查看全国,

36、 callback:function()map.setZoom(4) , text:在此添加标注, callback:function(p) var marker = new BMap.Marker(p), px = map.pointToPixel(p); map.addOverlay(marker); ; for(var i=0; i txtMenuItem.length; i+) contextMenu.addItem(new BMap.MenuItem(txtMenuItemi.text,txtMenuItemi.callback,100); if(i=1 | i=3) contextMenu.addSeparator(); map.addContextMenu(contextMenu);18. 鼠标测量距离/ 百度地图API功能var map = new BMap.Map(allmap); / 创建Map实例map.centerAndZoom(重庆,12); / 初始化地图,设置城市和地图级别。var myDis = new BMapLib.DistanceTool(map);map