百度地圖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); //讓標註顯示在最佳視野內