百度地圖API JS 2.0
阿新 • • 發佈:2018-12-17
1.初始化地圖,並設定地圖中心點
var map = new BMap.Map("allmap"); // 建立Map例項 map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地圖,設定中心點座標和地圖級別 當然也可以根據城市名稱設定地圖的中心點: map.centerAndZoom("上海",15); map.addControl(new BMap.ScaleControl()); //新增左下方比例尺控制元件 map.enableScrollWheelZoom(true); //開啟滑鼠滾輪縮放 map.setCurrentCity("北京"); // 設定地圖顯示的城市
2.拖拽地圖與滾輪的使用
map.enableScrollWheelZoom(true); map.disableDragging(); //禁止拖拽 map.enableScrollWheelZoom(); //啟用滾輪放大縮小
3.建立地圖的時候,關閉地圖底圖按鈕,建築的可點功能
var map = new BMap.Map("allmap", {enableMapClick:false});//構造底圖時,關閉底圖可點功能
4.移動地圖,設定地圖最大最小的縮放級別
var map = new BMap.Map("allmap",{minZoom:4,maxZoom:8}); // 建立Map例項,設定地圖允許的最小/大級別 //當然也可以動態設定級別: map.setMaxZoom(10); map.setMinZoom(2);
5.獲得地圖當前中心點,返回兩點間的距離
getCenter() getDistance(start:Point, end:Point) var pointA = new BMap.Point(106.486654,29.490295); // 建立點座標A--大渡口區 var pointB = new BMap.Point(106.581515,29.615467); // 建立點座標B--江北區 alert('距離是:'+(map.getDistance(pointA,pointB)).toFixed(2)+' 米。'); //獲取兩點距離,保留小數點後兩位
6.新增覆蓋物,移除覆蓋物,清楚所有覆蓋物
addOverlay(overlay:Overlay) removeOverlay(overlay:Overlay) clearOverlays() getOverlays() //返回地圖上所有的覆蓋物
7.地圖新增控制元件的時候可以設定地圖放在四個角中的哪個角
var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角,新增比例尺 BMAP_ANCHOR_TOP_LEFT //表示控制元件定位於地圖的左上角。 BMAP_ANCHOR_TOP_RIGHT //表示控制元件定位於地圖的右上角。 BMAP_ANCHOR_BOTTOM_LEFT //表示控制元件定位於地圖的左下角。 BMAP_ANCHOR_BOTTOM_RIGHT //表示控制元件定位於地圖的右下角。 //縮放空間的type的四種類型: var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角,僅包含平移和縮放按鈕 BMAP_NAVIGATION_CONTROL_LARGE //表示顯示完整的平移縮放控制元件。 BMAP_NAVIGATION_CONTROL_SMALL //表示顯示小型的平移縮放控制元件。 BMAP_NAVIGATION_CONTROL_PAN //表示只顯示控制元件的平移部分功能。 BMAP_NAVIGATION_CONTROL_ZOOM //表示只顯示控制元件的縮放部分功能
8.地圖採集的經緯度,轉化為度數,再轉化為百度座標點,在用new BMap.Point轉換成打在地圖上的點
9.Marker,新增地圖各個事件
/設定marker的彈跳 marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳動的動畫 var map = new BMap.Map("container"); var point = new BMap.Point(116.404, 39.915); map.centerAndZoom(point, 15); var marker = new BMap.Marker(point); // 建立標註 map.addOverlay(marker); // 將標註新增到地圖中 marker.enableDragging(); //設定點可以拖拽 //設定marker的樣式與偏移 var myIcon = new BMap.Icon(__baseUrl + "/images/circle_blue.png",new BMap.Size(16,16), { offset:new BMap.Size(10,25),// 圖示中央下端的尖角位置。 imageOffset:new BMap.Size(0,0- index *25)// 設定圖片偏移 } ); //新增事件 marker.addEventListener("click", function(e){ alert("您點選了標註"); alert(e.point.lng + ", " + e.point.lat); }); //移除事件 map.removeEventListener("click", showInfo);
10.資訊視窗
資訊視窗在地圖上方的浮動顯示HTML內容。資訊視窗可直接在地圖上的任意位置開啟,也可以在標註物件上開啟(此時資訊視窗的座標與標註的座標一致)。 您可以使用InfoWindow來建立一個資訊窗例項,注意同一時刻地圖上只能有一個資訊視窗處於開啟狀態。
var opts = { width : 250, // 資訊視窗寬度 height: 100, // 資訊視窗高度 title : "Hello" // 資訊視窗標題 } var infoWindow = new BMap.InfoWindow("World", opts); // 建立資訊視窗物件 map.openInfoWindow(infoWindow, map.getCenter()); // 開啟資訊視窗 map.addOverlay(marker); // 將標註新增到地圖中 map.centerAndZoom(point, 15); var opts = { width : 200, // 資訊視窗寬度 height: 100, // 資訊視窗高度 title : "海底撈王府井店" , // 資訊視窗標題 enableMessage:true,//設定允許資訊窗傳送短息 message:"親耐滴,晚上一起吃個飯吧?戳下面的連結看下地址喔~" } var infoWindow = new BMap.InfoWindow("地址:北京市東城區王府井大街88號樂天銀泰百貨八層", opts); // 建立資訊視窗物件 marker.addEventListener("click", function(){ map.openInfoWindow(infoWindow,point); //開啟資訊視窗 });
//新增複雜的資訊視窗 var sContent = "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>天安門</h4>" + "<img style='float:right;margin:4px' id='imgDemo' src='http://app.baidu.com/map/images/tiananmen.jpg' width='139' height='104' title='天安門'/>" + "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>天安門坐落在中國北京市中心,故宮的南側,與天安門廣場隔長安街相望,是清朝皇城的大門...</p>" + "</div>"; var infoWindow = new BMap.InfoWindow(sContent); // 建立資訊視窗物件
//獲取資訊視窗的內容 infoWindow.getContent()
11.折線
Polyline表示地圖上的折線覆蓋物。它包含一組點,並將這些點連線起來形成折線。
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);
12.控制元件工具的建立與開關
var map = new BMap.Map("container"); var myDis = new BMapLib.DistanceTool(map); myDis.open() myDis.close()
13.矩形範圍搜尋
var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 14); var local = new BMap.LocalSearch(map, { renderOptions:{map: map}}); local.searchInBounds("銀行", map.getBounds());
14.根據地址描述獲得座標 與 根據座標得到地址描述
var map = new BMap.Map("l-map"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 建立地址解析器例項 var myGeo = new BMap.Geocoder(); // 將地址解析結果顯示在地圖上,並調整地圖視野 myGeo.getPoint("北京市海淀區上地10街10號", function(point){ if (point) { map.centerAndZoom(point, 16); map.addOverlay(new BMap.Marker(point)); } }, "北京市"); var map =new BMap.Map("l-map"); map.centerAndZoom(new BMap.Point(116.404,39.915),11);// 建立地理編碼例項 var myGeo =new BMap.Geocoder();// 根據座標得到地址描述 myGeo.getLocation(new BMap.Point(116.364,39.993),function(result){if(result){alert(result.address);}});
16.自動移動,縮放地圖
setTimeout(function(){ map.panTo(new BMap.Point(113.262232,23.154345)); //兩秒後移動到廣州 }, 2000); map.setZoom(14);
17.地圖顯示範圍
//設定 var b = new BMap.Bounds(new BMap.Point(116.027143, 39.772348),new BMap.Point(116.832025, 40.126349)); try { BMapLib.AreaRestriction.setBounds(map, b); } catch (e) { alert(e); } //獲取 var bs = map.getBounds(); //獲取可視區域 var bssw = bs.getSouthWest(); //可視區域左下角 var bsne = bs.getNorthEast(); //可視區域右上角 alert("當前地圖可視範圍是:" + bssw.lng + "," + bssw.lat + "到" + bsne.lng + "," + bsne.lat);
18.給地圖新增文字,設定樣式
var opts = { position : point, // 指定文字標註所在的地理位置 offset : new BMap.Size(30, -30) //設定文字偏移量 } var label = new BMap.Label("歡迎使用百度地圖,這是一個簡單的文字標註哦~", opts); // 建立文字標註物件 label.setStyle({ color : "red", fontSize : "12px", height : "20px", lineHeight : "20px", fontFamily:"微軟雅黑" }); map.addOverlay(label);
給覆蓋物新增文字標籤: var marker = new BMap.Marker(point); // 建立標註 map.addOverlay(marker); // 將標註新增到地圖中 var label = new BMap.Label("我是文字標註哦",{offset:new BMap.Size(20,-10)}); marker.setLabel(label);
//獲取覆蓋物資訊: function getAttr(){ var p = marker.getPosition(); //獲取marker的位置 alert("marker的位置是" + p.lng + "," + p.lat); }
19.新增海量點
if (document.createElement('canvas').getContext) { // 判斷當前瀏覽器是否支援繪製海量點 var points = []; // 新增海量點資料 for (var i = 0; i < data.data.length; i++) { points.push(new BMap.Point(data.data[i][0], data.data[i][1])); } var options = { size: BMAP_POINT_SIZE_SMALL, shape: BMAP_POINT_SHAPE_STAR, color: '#d340c3' } var pointCollection = new BMap.PointCollection(points, options); // 初始化PointCollection pointCollection.addEventListener('click', function (e) { alert('單擊點的座標為:' + e.point.lng + ',' + e.point.lat); // 監聽點選事件 }); map.addOverlay(pointCollection); // 新增Overlay } else { alert('請在chrome、safari、IE8+以上瀏覽器檢視本示例'); }
20.自定義右鍵選單
var menu = 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(txtMenuItem[i].text,txtMenuItem[i].callback,100)); } map.addContextMenu(menu);
//給覆蓋物新增右鍵選單 var removeMarker = function(e,ee,marker){ map.removeOverlay(marker); } //建立右鍵選單 var markerMenu=new BMap.ContextMenu(); markerMenu.addItem(new BMap.MenuItem('刪除',removeMarker.bind(marker))); var marker = new BMap.Marker(point); map.addOverlay(marker); marker.addContextMenu(markerMenu);
21.地圖滑鼠
//設定滑鼠樣式 map.setDefaultCursor("url('bird.cur')"); //設定地圖預設的滑鼠指標樣式 //滑鼠拖拽地圖並設定跟鼠文字 var myDrag = new BMapLib.RectangleZoom(map, { followText: "拖拽滑鼠進行操作" }); myDrag.open(); //開啟拉框放大 //myDrag.close(); //關閉拉框放大
//滑鼠測距 var myDis = new BMapLib.DistanceTool(map); map.addEventListener("load",function(){ myDis.open(); //開啟滑鼠測距 //myDis.close(); //關閉滑鼠測距大 });
//單擊獲取點選的經緯度 map.addEventListener("click",function(e){ alert(e.point.lng + "," + e.point.lat); });
22.最佳視野
當地圖打點過多時,我們要使得所有的點都在我們地圖上的可視區域內,就用下面的方法
map.setViewport(points); //讓標註顯示在最佳視野內