百度地图 map核心类 自定义控件 地图样式(setMapStyle) 获取全景示例(getPanorama())
@[TOC](map核心类 自定义控件 地图样式(setMapStyle) 获取全景示例(getPanorama())
申请秘钥
代码在此
<!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>