百度地圖文檔

1、百度地圖研究摘要文檔一 創(chuàng)建地圖實(shí)例1. 用城市名作為地圖中心點(diǎn)的創(chuàng)建方式。body, html,#allmap width: 100%;height: 100%;overflow: hidden;margin:0;script type=text/javascript src=用城市名設(shè)置地圖中心點(diǎn)/ 百度地圖API功能var map = new BMap.Map(allmap); / 創(chuàng)建Map實(shí)例map.centerAndZoom(合肥,15); / 初始化地圖,設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別。2./ 百度地圖API功能var map = new BMap.Map(allmap); / 創(chuàng)建M

2、ap實(shí)例map.centerAndZoom(new BMap.Point(116.4035,39.915),15); /初始化時(shí)，即可設(shè)置中心點(diǎn)和地圖縮放級(jí)別。setTimeout(function() map.setCenter(廣州); /設(shè)置地圖中心點(diǎn)。center除了可以為坐標(biāo)點(diǎn)以外，還支持城市名 map.setZoom(10); /將視圖切換到指定的縮放等級(jí)，中心點(diǎn)坐標(biāo)不變 , 1500);二地圖的拖拽和縮放功能1.當(dāng)?shù)貓D創(chuàng)建成功之后，默認(rèn)是可以拖拽的。添加上如下語句就不支持拖拽。map.disableDragging(); /禁止拖拽setTimeout(function() ma

3、p.enableDragging(); /三秒后開啟拖拽 /map.enableInertialDragging(); /三秒后開啟慣性拖拽, 3000);地圖可以實(shí)現(xiàn)鼠標(biāo)滑動(dòng)縮放。map.enableScrollWheelZoom(); /啟用滾輪放大縮小，如果不添加本句話，不可縮放。獲取坐標(biāo)中心方法：alert(當(dāng)前地圖中心點(diǎn)： + map.getCenter().lng + , + map.getCenter().lat);鼠標(biāo)點(diǎn)擊獲取坐標(biāo)：map.addEventListener(click,function(e)/鼠標(biāo)點(diǎn)擊獲取坐標(biāo) alert(e.point.lng + , + e.

4、point.lat););二 地圖的相關(guān)控件1. 在地圖的四個(gè)拐角放置4個(gè)縮放的控件菜單map.addControl(new BMap.NavigationControl(); /添加默認(rèn)縮放平移控件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(); /添加默認(rèn)縮略地圖控件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(); / 添加默認(rèn)比例尺控件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. 添加版權(quán)控制/ 百度地圖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); /設(shè)置版權(quán)控件位置map.addControl(cr); /添加版權(quán)控件var bs = map.getBounds(); /返回地圖可視區(qū)域cr.addCopyright(id: 1, content: 我是自定義版權(quán)控件呀, bounds: bs); /Copyright(id,content,bounds)類作為CopyrightControl.addCopyright()方法的參數(shù)4. 添加標(biāo)注點(diǎn)和彈出信息/ 百度地圖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); / 創(chuàng)建標(biāo)注map.addOverlay(marker1); / 將標(biāo)注添加到地圖中/創(chuàng)建信息窗口var infoWindow1 = new BMap.InfoWindow(普通標(biāo)注);marker1.addEventListener(click, function()this.openInfoWindow(infoWindow1););/創(chuàng)建小狐貍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); / 創(chuàng)建標(biāo)注map.addOverlay(marker2); / 將標(biāo)注添加到地圖中/讓小狐貍說話（創(chuàng)建信息窗口）var infoWindow2 = new BMap.InfoWindow(哈哈，你看見我啦！我可不常出現(xiàn)哦！趕快查看源代碼，看看我是如何添加上來的！);marker2.addEventListener(click,

11、function()this.openInfoWindow(infoWindow2););5.添加動(dòng)態(tài)的標(biāo)注/ 百度地圖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); / 創(chuàng)建標(biāo)注map.addOverlay(marker); / 將標(biāo)注添加到地圖中marker.setAnimation(BMAP_ANIMATION_BOUNCE); /跳動(dòng)的動(dòng)畫5.

12、隨機(jī)添加標(biāo)注點(diǎn)/ 編寫自定義函數(shù),創(chuàng)建標(biāo)注function addMarker(point) var marker = new BMap.Marker(point); map.addOverlay(marker);/ 隨機(jī)向地圖添加25個(gè)標(biāo)注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); /創(chuàng)建弧線對(duì)象map.addOverlay(curve); /添加到地圖中curve

19、.enableEditing(); /開啟編輯功能11. 添加文本標(biāo)注/ 百度地圖API功能var map = new BMap.Map(allmap);var point = new BMap.Point(116.417854,39.921988);map.centerAndZoom(point, 15);var opts = position : point, / 指定文本標(biāo)注所在的地理位置 offset : new BMap.Size(30, -30) /設(shè)置文本偏移量 var label = new BMap.Label(歡迎使用百度地圖，這是一個(gè)簡單的文本標(biāo)注哦, opts); /

20、創(chuàng)建文本標(biāo)注對(duì)象label.setStyle( color : red, fontSize : 12px, height : 20px, lineHeight : 20px, fontFamily:微軟雅黑 );map.addOverlay(label);12. 在地圖上標(biāo)注熱點(diǎn)信息/ 百度地圖API功能var map = new BMap.Map(allmap);var point = new BMap.Point(116.404, 39.915); / 創(chuàng)建點(diǎn)坐標(biāo)map.centerAndZoom(point,15); / 初始化地圖,設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別。/在天安門添加一個(gè)熱區(qū),鼠標(biāo)

21、放在地圖天安門上，會(huì)出現(xiàn)提示文字var hotSpot = new BMap.Hotspot(point, text: 我愛北京天安門!, minZoom: 8, maxZoom: 18);map.addHotspot(hotSpot);/在王府井地鐵處，再添加一個(gè)熱區(qū)var point2 = new BMap.Point(116.41787,39.914391);var hotSpot2 = new BMap.Hotspot(point2, text: 王府井地鐵);map.addHotspot(hotSpot2);13. 畫出行政區(qū)范圍/ 百度地圖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) /獲取行政區(qū)域 /map.clearOverlays(); /清除地圖覆蓋物 var count = rs.boundaries.length; /行政區(qū)域的點(diǎn)有多少個(gè) 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(); /調(diào)整視野 ); setTimeout(function() getBoundary();, 2000);/兩秒后出現(xiàn)重慶行政區(qū)的輪廓14. 自定義覆蓋物出現(xiàn)在地圖之上mp.enableScrollWheelZoom();/ 復(fù)雜的自定義覆蓋物 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. 定義標(biāo)注的顯示和隱藏 / 百度地圖API功能var map = new BMap.Map(l-map);map.centerAndZoom(北京, 15);var marker = new BMap.Marker(new BMap.

31、Point(116.404, 39.915); / 創(chuàng)建標(biāo)注map.addOverlay(marker); / 將標(biāo)注添加到地圖中marker.enableDragging(); /可拖拽 var label = new BMap.Label(我是文字標(biāo)注哦,offset:new BMap.Size(20,-10);marker.setLabel(label);16. 顯示是否可編輯區(qū)域 開啟編輯功能 關(guān)閉編輯功能/ 百度地圖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(蜀山區(qū), function(rs) /獲取行政區(qū)域 map.clearOverlays(); /清除地圖覆蓋物 var count = rs.boundaries.length; /行政區(qū)域的點(diǎn)有多少個(gè) 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(); /調(diào)整視野 ply.enableEditing(); /開啟線編輯功能 ); setTimeout(function() getBoundary();, 500);17. 添加鼠標(biāo)右鍵功能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在地圖上添加標(biāo)注/ 百度地圖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:放置到最大級(jí), callback:function()map.setZoom(18) , text:查看全國,

36、 callback:function()map.setZoom(4) , text:在此添加標(biāo)注, 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. 鼠標(biāo)測量距離/ 百度地圖API功能var map = new BMap.Map(allmap); / 創(chuàng)建Map實(shí)例map.centerAndZoom(重慶,12); / 初始化地圖,設(shè)置城市和地圖級(jí)別。var myDis = new BMapLib.DistanceTool(map);map