因为最近用到的百度地图的api挺多,所以总结一下,以便以后用到,如果还能方便到大家,那么心中亦甚是欢喜。
1.创建一个实例:
var map = new BMap.Map("allmap");//此处的allmap为ID名称;
var map = new BMap.Map("allmap",{minZoom:4,maxZoom:8}); // 创建Map实例,设置地图允许的最小/大级别
2.设初始化地图。 如果center类型为Point时,zoom必须赋值,范围3-19级,若调用高清底图(针对移动端开发)时,zoom可赋值范围为3-18级。如果center类型为字符串时,比如“北京”,zoom可以忽略,地图将自动根据center适配最佳zoom级别。
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
初始化地图,设置中心点坐标和地图级别(级别数字越大地图放大的越大)
3.开启鼠标滚轮缩放
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
4.设置地图城市,注意当地图初始化时的类型设置为BMAP_PERSPECTIVE_MAP(此地图类型展示透视图像视图)时,需要在调用centerAndZoom之前调用此方法设置地图所在城市。
var map = new BMap.Map(“container”, {mapType: BMAP_PERSPECTIVE_MAP}); map.setCurrentCity(“北京市”); map.centerAndZoom(new BMap.Point(116.404, 39.915), 18);
注意:初始化的坐标应与您设置的城市对应,否则地图将无法正常显示。如果地图初始化为BMAP_NORMAL_MAP类型,则在调用setMapType切换地图类型时也要调用此方法.
5.创建坐标
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
6.移动地图(根据自己写的方法用panTo来移动地图到某一个坐标上)和设置缩放。
setTimeout(function(){
map.panTo(new BMap.Point(113.262232,23.154345));
}, 2000);//两秒后移动到point坐标位置
setTimeout(function(){
map.setZoom(14);
}, 2000); //两秒后放大到14级
7.开启拖拽功能
setTimeout(function(){
map.enableDragging(); //两秒后开启拖拽
//map.enableInertialDragging(); //两秒后开启惯性拖拽
}, 2000);
disableInertialDragging()//禁用惯性拖拽
8.设置地图显示范围
Bounds(sw: Point, ne: Point) | 创建一个包含所有给定点坐标的矩形区域。其中sw表示矩形区域的西南角,参数ne表示矩形区域的东北角 |
例如:var b = new BMap.Bounds(new BMap.Point(116.027143, 39.772348),new BMap.Point(116.832025, 40.126349));
BMapLib.AreaRestriction.setBounds(map, b);//设置显示的矩形区域
9.获取地图的显示范围
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(116.4035,39.915), 14);
var bs = map.getBounds(); //获取可视区域
var bssw = bs.getSouthWest(); //可视区域左下角
var bsne = bs.getNorthEast(); //可视区域右上角
alert("当前地图可视范围是:" + bssw.lng + "," + bssw.lat + "到" + bsne.lng + "," + bsne.lat);//(ing:经度;lat:纬度)
10.获取两点间的距离
getDistance(start: [Point],end: [Point])返回值为number单位是米;
// 百度地图API功能
var map = new BMap.Map("allmap");
map.centerAndZoom("重庆",12); //初始化地图,设置城市和地图级别。
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)+' 米。'); //获取两点距离,保留小数点后两位
var polyline = new BMap.Polyline([pointA,pointB], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}); //定义折线
map.addOverlay(polyline); //添加折线到地图上
11.创建地图标注
Marker(point: Point, opts: MarkerOptions) | 创建一个图像标注实例。point参数指定了图像标注所在的地理位置
例:var map = new BMap.Map("allmap");
var point = new BMap.Point(116.404, 39.915);
var marker = new BMap.Marker(point);
12.创建一个窗口实例
InfoWindow(content: String | HTMLElement, opts: [InfoWindowOptions])//创建一个信息窗实例,其中content支持HTML内容。1.2版本开始content参数支持传入DOM节点。
marker.addEventListener("click", function(){
this.openInfoWindow(infoWindow)//当点击当前的标注的时候打开创建的信息窗口
});
给多个点添加信息窗口参考:http://lbsyun.baidu.com/jsdemo.htm#d0_5(百度事例)