大地图的“Hello, World”

开始学习大地图API最简单的方式是看一个简单的示例。以下代码创建了一个地图并以天安门作为地图的中心：

 
var map = new BigMap.Map("map");    // 创建Map实例
map.centerAndZoom(new BigMap.Point(116.404, 39.915), 6);  // 初始化地图,设置中心点坐标和缩放级别
map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

下面我们分步向您介绍：

准备页面

根据HTML标准，每一份HTML文档都应该声明正确的文档类型，我们建议您使用最新的符合HTML5规范的文档声明：

添加两个地图

//加载第一张地图
var map1 = new BigMap.Map("map1");//创建Map实例
var point1 = new BigMap.Point(116.404, 39.915);  
map1.centerAndZoom(point1,9);               
map1.enableScrollWheelZoom(true);//启用滚轮放大缩小
//加载第二张地图
var map2 = new BigMap.Map("map2");//创建Map实例
var point2 = new BigMap.Point(116.404, 39.915);  
map2.centerAndZoom(point2,9);                 
map2.enableScrollWheelZoom(true);//启用滚轮放大缩小

设置地图最大、最小级别

var map = new BigMap.Map("map",{//创建Map实例,设置地图允许的最小/大级别
	minZoom:4,
	maxZoom:8
}); 
map.centerAndZoom(new BigMap.Point(116.4035,39.915),8); 
map.enableScrollWheelZoom(true);

移动地图

var map = new BigMap.Map("map");       
map.centerAndZoom(new BigMap.Point(116.4035,39.915),8); 
setTimeout(function(){
	map.moveTo(new BigMap.Point(113.262232,23.154345));   //两秒后移动到广州
}, 2000)

缩放地图

初始化展示中心点为（116.4035,39.915），缩放级别为4的全国地图，2秒后，通过设置缩放级别将地图放大到10级

var map = new BigMap.Map("map");  
map.centerAndZoom(new BigMap.Point(116.4035,39.915),4); 
setTimeout(function(){
	map.setZoom(10);   
}, 2000);  //2秒后放大到14级
map.enableScrollWheelZoom(true) 

拖拽地图

var map = new BigMap.Map("map");// 创建Map实例
map.centerAndZoom(new BigMap.Point(116.4035,39.915),8); //初始化时，即可设置中心点和地图缩放级别。
map.enableScrollWheelZoom(true);
map.disableDrag();//禁止拖拽
setTimeout(function(){
   map.enableDrag();//五秒后开启拖拽
}, 5000);

获得两点之间的距离

var map = new BigMap.Map("map");
map.centerAndZoom(new BigMap.Point(113.630199,34.755623),10);//设置地图中心点郑州
var pointA = new BigMap.Point(113.654523,34.813753);  // 创建点坐标A--金水区
var pointB = new BigMap.Point(113.768356,34.753036);  // 创建点坐标B--郑东新区
var length = map.getDistance(pointA, pointB);

//在起点和重点之间画线
var pointlineArray = new Array();
pointlineArray.push(new BigMap.Point(113.654523,34.813753));
pointlineArray.push(new BigMap.Point(113.768356,34.753036));
var polyline = new BigMap.Polyline(pointlineArray, {
	strokeColor : "#FF00FF",//线颜色
	strokeWeight : 3,//线宽
	strokeOpacity: 0.8//线透明度
});
map.addOverlay(polyline);

window.setTimeout(function(){
	alert('从金水区到郑东新区的距离是：' + ((map.getDistance(pointA, pointB)).toFixed(2)) + '米。');//获取两点距离
}, 500);

获取地图显示范围

var map = new BigMap.Map("map");            
map.centerAndZoom(new BigMap.Point(116.4035,39.915), 10);  
var b = map.getBounds();   //获取可视区域
var bsw= b.getSouthWest();   //可视区域左下角
var bne = b.getNorthEast();   //可视区域右上角
alert("当前地图可视范围是：" + bsw.lng + "," + bsw.lat + "到" + bne.lng + "," + bne.lat);