<!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>
转载至：https://blog.csdn.net/weixin_42448623/article/details/100690842