代碼在此
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v3.0版本 map核心類 自定義控件 地圖樣式(setMapStyle) 獲取全景示例(getPanorama())</title>
<style>
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:80%}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你的祕鑰"></script>
</head>
<body>
<div id="container"></div>
<div>
<button id="bound" >返回地圖可視區域</button>
<button id="center" >中心點</button>
<button id="nanhua" >南華大學</button>
<div id="adds">
<button name="btns" id="add" >+</button>
<span>視圖等級</span>
<button name="btns" id="del" >-</button>
</div>
</div>
<script>
window.onload = function(){
// 創建地圖實例
var map = new BMap.Map("container");
// 創建點座標
var point = new BMap.Point(112.5527201488,26.9273408603); //衡陽縣第六中學
// 設初始化地圖
// 若調用高清底圖（針對移動端開發）時，zoom可賦值範圍爲3-18級
// 如果center類型爲字符串時，比如“北京”，zoom可以忽略，地圖將自動根據center適配最佳zoom級別
map.centerAndZoom(point, 15);// 初始化地圖，設置中心點座標和地圖級別 3-19
//設置地圖類型
//BMAP_NORMAL_MAP 此地圖類型展示普通街道視圖
//BMAP_SATELLITE_MAP 此地圖類型展示衛星視圖
//BMAP_HYBRID_MAP 此地圖類型展示衛星和路網的混合視圖
//map.setMapType(); //格式不清楚 ？？
map.addControl(new BMap.MapTypeControl({ mapTypes: [BMAP_SATELLITE_MAP] }));// 地圖類型
//map.addControl(new BMap.MapTypeControl());// 地圖類型
map.enableScrollWheelZoom(true); //開啓鼠標滾輪縮放
map.enableDragging(); //啓用地圖拖拽，默認啓用
//map.disableDragging(); //禁用地圖拖拽
map.enableScrollWheelZoom(); //啓用滾輪放大縮小，默認禁用
//map.disableScrollWheelZoom(); //禁用滾輪放大縮小
map.enableDoubleClickZoom(); //啓用雙擊放大，默認啓用
//map.disableDoubleClickZoom(); //禁用雙擊放大
map.enableKeyboard(); //啓用鍵盤操作，默認禁用。
//上、下、左、右鍵可連續移動地圖。同時按下其中兩個鍵可使地圖進行對角移動。
//PgUp、PgDn、Home和End鍵會使地圖平移其1/2的大小。+、-鍵會使地圖放大或縮小一級
map.disableKeyboard();//禁用鍵盤操作
map.enableInertialDragging(); //啓用地圖慣性拖拽，默認禁用
//map.disableInertialDragging(); //禁用地圖慣性拖拽
map.enableContinuousZoom(); //啓用連續縮放效果，默認禁用
//map.disableContinuousZoom(); //禁用連續縮放效果
map.enablePinchToZoom(); //啓用雙指操作縮放，默認啓用
//map.disablePinchToZoom(); //禁用雙指操作縮放
map.enableAutoResize(); //啓用自動適應容器尺寸變化，默認啓用
//map.disableAutoResize(); //禁用自動適應容器尺寸變化
//設置地圖默認的鼠標指針樣式。參數cursor應符合CSS的cursor屬性規範
//map.setDefaultCursor("copy");
//設置拖拽地圖時的鼠標指針樣式
//map.setDraggingCursor("copy");
//返回地圖默認的鼠標指針樣式
console.log(map.getDefaultCursor()); //url(http://api0.map.bdimg.com/images/openhand.cur) 8 8,default
//返回拖拽地圖時的鼠標指針樣式
console.log(map.getDraggingCursor()); //url(http://api0.map.bdimg.com/images/closedhand.cur) 8 8,move
//設置地圖允許的最小級別
map.setMinZoom(1);
//設置地圖允許的最大級別
map.setMaxZoom(19);
//設置地圖樣式，樣式包括地圖底圖顏色和地圖要素是否展示兩部分
map.setMapStyle({style:'midnight'})
//模板
//默認地圖樣式(normal)
//清新藍風格(light)
//黑夜風格(dark)
//清新藍綠風格(bluish)
//高端灰風格(grayscale)
//強邊界風格(hardedge)
//青春綠風格(darkgreen)
//浪漫粉風格(pink)
//午夜藍風格(midnight)
//自然綠風格(grassgreen)
//精簡風格(googlelite)
//紅色警戒風格(redalert)
//自定義地圖樣式 調試樣式http://wiki.lbsyun.baidu.com/custom/ JavaScript API v3.0 -->個性化地圖-->個性化編輯方式
// var setstyle = [ {
// "featureType": "water",
// "elementType": "geometry.fill",
// "stylers": {
// "color": "#ff0000ff",
// "hue": "#ff0000",
// "weight": "1",
// "lightness": 1,
// "saturation": 100,
// "visibility": "on"
// }
// }]
// map.setMapStyle({
// styleJson:setstyle
// })
//返回地圖可視區域
var boundspan = document.getElementById("bound");
// boundspan.click = function(){
boundspan.addEventListener('click',function(){
var ss = map.getBounds(); //返回了地圖視野的 左下角 右上角座標
console.log(ss+"getBounds")
});
//返回地圖當前中心點
var centerbtn = document.getElementById("center");
centerbtn.addEventListener('click',function(){
var cen = map.getCenter(); //返回地圖當前中心點
var cen_point = new BMap.Point(cen.lng,cen.lat);
var cen_mark = new BMap.Marker(cen_point);
map.addOverlay(cen_mark);
var cen_label = new BMap.Label("地圖當前中心點",{position:cen_point});
map.addOverlay(cen_label);
console.log(cen.lng,cen.lat,"getCenter")
})
var points = [ //百度座標 lng,lat
{"point":new BMap.Point(112.638886,27.052889),"name":"點一"},
{"point":new BMap.Point(112.243344,26.748755),"name":"點二"},
{"point":new BMap.Point(112.552509,26.926427),"name":"衡州別院"},
{"point":new BMap.Point(112.5783703713,26.8995635436),"name":"衡陽市人民政府"},
{"point":new BMap.Point(112.6379079719,26.8948866350),"name":"衡陽火車站"},
{"point":new BMap.Point(112.5962682402,26.9041238628),"name":"南華大學"},
{"point":new BMap.Point(112.5600814819,26.8928800357),"name":"南華大學附屬第二醫院"},
{"point":new BMap.Point(112.5561869144,26.8928034872),"name":"生態公園-北門"},
{"point":new BMap.Point(112.6234089966,26.9170718962),"name":"石鼓書院"},
];
var arrPoints = [];
for(var i=0;i<points.length;i++){
var marks = new BMap.Marker(points[i].point);
var labels = new BMap.Label(points[i].name,{position:points[i].point});
map.addOverlay(marks);
map.addOverlay(labels);
arrPoints.push(points[i].point);
}
//返回兩點之間的距離，單位是米
var distance = map.getDistance(points[4].point,points[6].point);
console.log(points[4].name +"到"+points[6].name+"的距離是："+distance+"m");
//返回地圖類型 getMapType
var name = map.getMapType().getName();//返回地圖類型名稱
var Layer = map.getMapType().getTileLayer();//返回地圖類型對應的圖層
//var jection = map.getMapType().ggetProjection();//返回地圖類型所使用的投影實例
var Color = map.getMapType().getTextColor();//返回地圖類型對應的前景色
var Tips = map.getMapType().getTips();//返回地圖類型的提示說明，用於在地圖類型控件中提示
console.log(
JSON.stringify(map.getMapType())+
"地圖類型名稱:"+ name+
"地圖類型對應的圖層:"+Layer+
//"地圖類型所使用的投影實例"+jection+
"地圖類型對應的前景色:"+Color+
"地圖類型的提示說明:"+Tips
);
//返回地圖視圖的大小，以像素表示
console.log("地圖視圖"+JSON.stringify(map.getSize()));
//此方法僅返回視野信息(中心點座標，縮放），不會將新的中心點和級別做用到當前地圖上
console.log("視野信息"+JSON.stringify(map.getViewport()));
//返回地圖當前縮放級別
console.log(map.getZoom())
//將地圖的中心點更改爲給定的點 並移動到
var nanhua = document.getElementById("nanhua");
nanhua.addEventListener("click",function(){
map.panTo(points[5].point)
})
//將地圖在水平位置上移動x像素，垂直位置上移動y像素。
//如果指定的像素大於可視區域範圍或者在配置中指定沒有動畫效果，則不執行滑動效果
// setTimeout(function(){
// map.panBy(600,600,{
// noAnimation:true //是否在平移過程中禁止動畫
// })
// },2000)
//重新設置地圖，恢復地圖初始化時的中心點和級別
//map.reset();
//設置地圖中心點。center除了可以爲座標點以外，還支持城市名
//map.setCenter(points[5].point);
//設置地圖城市
//注意當地圖初始化時的類型設置爲BMAP_NORMAL_MAP時，需要在調用centerAndZoom之前調用此方法設置地圖所在城市
map.setCurrentCity('衡陽')
//根據提供的地理區域或座標設置地圖視野，調整後的視野會保證包含提供的地理區域或座標
// map.setViewport(arrPoints,{//ViewportOptions
// enableAnimation:true,//是否啓用動畫效果移動地圖，默認爲true。當調整後的級別與當前地圖級別一致時，將使用動畫效果移動地圖
// margins:[30, 20, 0, 20] ,//視野調整的預留邊距，例如： margins: [30, 20, 0, 20] 表示座標點會限制在上述區域內
// //地圖級別的偏移量，您可以在方法得出的結果上增加一個偏移值。
// //例如map.setViewport計算出地圖的級別爲10，如果zoomFactor爲-1，則最終的地圖級別爲9
// zoomFactor:-1,
// //改變地圖視野的延遲執行時間，單位毫秒，默認爲200ms。此延時僅針對動畫效果有效
// delay:3000
// });
// map.setViewport({//Viewport
// center:arrPoints[5],//視野中心點
// zoom:4 //視野級別
// },{//ViewportOptions 同上});
map.setViewport(arrPoints);
var opts = {
width : 250, // 信息窗口寬度
height: 100, // 信息窗口高度
title : "Hello" // 信息窗口標題
}
var infoWindow = new BMap.InfoWindow("World", opts);
map.openInfoWindow(infoWindow,arrPoints[1]);
//將視圖切換到指定的縮放等級，中心點座標不變
//注意：當有信息窗口在地圖上打開時，地圖縮放將保證信息窗口所在的座標位置不動
var btn = document.getElementsByName("btns")
var zoom = 15;
btn[0].addEventListener("click",function(e){ //+
zoom++;
//map.setZoom(zoom);
map.zoomIn();//放大一級視圖
})
btn[1].addEventListener("click",function(e){ //-
zoom--;
//map.setZoom(zoom);
map.zoomOut();//縮小一級視圖
})
var kon = new BMap.OverviewMapControl();
//添加控件
//map.addControl(kon);// 縮略地圖
//移除控件
//map.removeControl(kon);// 縮略地圖
//返回地圖的容器元素。
console.log(map.getContainer());
var Menu = new BMap.ContextMenu();
Menu.addItem(new BMap.MenuItem("dd"))
//添加右鍵菜單--->右鍵菜單.html
//將全景實例與Map類進行綁定 ---> 全景.html
//map.setPanorama()
//獲取與Map類綁定的全景實例
//?當創建用戶自定義控件時，需要自行實現Control.initialize()方法，並將控件的容器元素添加到地圖上，通過此方法可獲得地圖容器
console.log(map.getPanorama())
// 控件 ---> 控件.html
}
</script>
</body>
</html>
