学步园

JavaScript 帮助文档-链接： http://developer.baidu.com/map/jsdevelop-2.htm

JavaScript  API-链接： http://developer.baidu.com/map/reference/index.php?title=Class:%E6%80%BB%E7%B1%BB/%E6%A0%B8%E5%BF%83%E7%B1%BB

JavaScript  Demo-链接： http://developer.baidu.com/map/jsdemo.htm#a1_1

JavaScript  开源库-链接：http://developer.baidu.com/map/library.htm

地图API中提供的控件有：
Control：控件的抽象基类，所有控件均继承此类的方法、属性。通过此类您可实现自定义控件。
NavigationControl：地图平移缩放控件，PC端默认位于地图左上方，它包含控制地图的平移和缩放的功能。移动端提供缩放控件，默认位于地图右下方。
OverviewMapControl：缩略地图控件，默认位于地图右下方，是一个可折叠的缩略地图。
ScaleControl：比例尺控件，默认位于地图左下方，显示地图的比例关系。
MapTypeControl：地图类型控件，默认位于地图右上方。
CopyrightControl：版权控件，默认位于地图左下方。
GeolocationControl：定位控件，针对移动端开发，默认位于地图左下方。

地图API提供了如下几种覆盖物：
Overlay：覆盖物的抽象基类，所有的覆盖物均继承此类的方法。
Marker：标注表示地图上的点，可自定义标注的图标。
Label：表示地图上的文本标注，您可以自定义标注的文本内容。
Polyline：表示地图上的折线。
Polygon：表示地图上的多边形。多边形类似于闭合的折线，另外您也可以为其添加填充颜色。
Circle: 表示地图上的圆。
InfoWindow：信息窗口也是一种特殊的覆盖物，它可以展示更为丰富的文字和多媒体信息。注意：同一时刻只能有一个信息窗口在地图上打开。
可以使用map.addOverlay方法向地图添加覆盖物，使用map.removeOverlay方法移除覆盖物，注意此方法不适用于InfoWindow。

demo - HelloWorld：

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=您的密钥"></script>

<div id="container"></div> 

<script type="text/javascript"> 
var map = new BMap.Map("container");          // 创建地图实例  
var point = new BMap.Point(116.404, 39.915);  // 创建点坐标  
map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别  
</script>  

事件监听
百度地图API中的大部分对象都含有addEventListener方法，您可以通过该方法来监听对象事件。例如，BMap.Map包含click、dblclick等事件。
map.addEventListener("click", function(){    
 alert("您点击了地图。");    
});   
在标准的DOM事件模型中（DOM Level 2 Events），监听函数会得到一个事件对象e，在e中可以获取有关该事件的信息。同时在监听函数中this会指向触发该事件的DOM元素。
map.addEventListener("click", function(e){    
 alert(e.point.lng + ", " + e.point.lat);    
}); 
map.addEventListener("zoomend", function(){    
 alert("地图缩放至：" + this.getZoom() + "级");    
});   
当您不再希望监听事件时，可以将事件监听进行移除。每个API对象提供了removeEventListener用来移除事件监听函数。
map.removeEventListener("click", showInfo);    


图层：
TrafficLayer：交通流量图层。
var traffic = new BMap.TrafficLayer();        // 创建交通流量图层实例    
map.addTileLayer(traffic);                    // 将图层添加到地图上   
map.removeTileLayer(traffic);                // 将图层移除    

地图工具概述
提示：工具已经制作成开源库（lib）对外免费开放，可直接访问JavaScript 开源库。
若您需要运行以下示例代码，请先确认已在开发工程中引入lib文件，具体引用方法可查看JavaScript 开源库提供的示例源文件。
注意，开源库必须与百度地图JS API同时使用。

地图服务概述
地图服务是指那些提供数据信息的接口，比如本地搜索、路线规划等等。百度地图API提供的服务有：
LocalSearch：本地搜索，提供某一特定地区的位置搜索服务，比如在北京市搜索“公园”。
TransitRoute：公交导航，提供某一特定地区的公交出行方案的搜索服务。
DrivingRoute：驾车导航，提供驾车出行方案的搜索服务。
WalkingRoute：步行导航，提供步行出行方案的搜索服务。
Geocoder：地址解析，提供将地址信息转换为坐标点信息的服务。
LocalCity：本地城市，提供自动判断您所在城市的服务。
TrafficControl：实时路况控件，提供实时和历史路况信息服务。
搜索类的服务接口需要指定一个搜索范围，否则接口将不能工作。

用户数据图层
百度地图API可以将用户上传到LBS云里的位置数据实时渲染成图层，然后通过CustomLayer对象叠加到地图上。

全景图展现

定制个性地图

// 百度地图API功能
var map = new BMap.Map("allmap");                        // 创建Map实例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);     // 初始化地图,设置中心点坐标和地图级别

    map.setCenter("广州");   //设置地图中心点。center除了可以为坐标点以外，还支持城市名
    map.setZoom(10);  //将视图切换到指定的缩放等级，中心点坐标不变 

map.disableDragging();   //禁止拖拽
map.enableDragging();   //三秒后开启拖拽

var bs = map.getBounds();   //获取可视区域
var bssw = bs.getSouthWest();   //可视区域左下角
var bsne = bs.getNorthEast();   //可视区域右上角
alert("当前地图可视范围是：" + bssw.lng + "," + bssw.lat + "到" + bsne.lng + "," + bsne.lat);
	
map.addEventListener("click",function(e){
    alert(e.point.lng + "," + e.point.lat);
});

var pointA = new BMap.Point(106.486654,29.490295);  // 创建点坐标A--大渡口区
  map.setCenter(point);
  
  var marker = new BMap.Marker(point);
     map.addOverlay(marker);
	 
 BMap.Convertor.transMore(points,2,callback);        //一秒之后开始进行坐标转换。参数2，表示是从GCJ-02坐标到百度坐标。参数0，表示是从GPS到百度坐标
  
var polyline = new BMap.Polyline([pointA,pointB], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});  //定义折线
map.addOverlay(polyline);   //添加折线到地图上


 map.clearOverlays();    //清除地图上所有覆盖物

 
 
 //==============控件
map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件：左上
map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}));  //右上角，仅包含平移和缩放按钮
map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT, type: BMAP_NAVIGATION_CONTROL_PAN}));  //左下角，仅包含平移按钮
map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, type: BMAP_NAVIGATION_CONTROL_ZOOM}));  //右下角，仅包含缩放按钮

map.addControl(new BMap.ScaleControl()); // 添加默认比例尺控件：左下
map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT}));                    // 左上
map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_RIGHT}));                    // 右上
map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT}));                    // 右下

map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]}));     //2D图，卫星图
map.addControl(new BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_LEFT}));    //左上角，默认地图控件
map.setCurrentCity("北京");   //由于有3D图，需要设置城市哦

map.addControl(new BMap.OverviewMapControl());              //添加默认缩略地图控件
map.addControl(new BMap.OverviewMapControl({isOpen:true, anchor: BMAP_ANCHOR_TOP_RIGHT}));   //右上角，打开



//====================覆盖物
var marker1 = new BMap.Marker(new BMap.Point(116.384, 39.925));  // 创建标注
map.addOverlay(marker1);              // 将标注添加到地图中

//创建信息窗口
var infoWindow1 = new BMap.InfoWindow("普通标注");
marker1.addEventListener("click", function(){this.openInfoWindow(infoWindow1);});

marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

//点聚合：最简单的用法，生成一个marker数组，然后调用markerClusterer类即可。
var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers});

//折线
var polyline = new BMap.Polyline([
  new BMap.Point(116.399, 39.910),
  new BMap.Point(116.405, 39.920),
  new BMap.Point(116.425, 39.900)
], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});
map.addOverlay(polyline);
//多边形
//圆
//矩形

//弧线：可编辑
var beijingPosition=new BMap.Point(116.432045,39.910683),
hangzhouPosition=new BMap.Point(120.129721,30.314429),
taiwanPosition=new BMap.Point(121.491121,25.127053);
var points = [beijingPosition,hangzhouPosition, taiwanPosition];
var curve = new BMapLib.CurveLine(points, {strokeColor:"blue", strokeWeight:3, strokeOpacity:0.5}); //创建弧线对象
map.addOverlay(curve); //添加到地图中
curve.enableEditing(); //开启编辑功能

//文本标注
var point = new BMap.Point(116.417854,39.921988);
var opts = {
position : point,    // 指定文本标注所在的地理位置
offset   : new BMap.Size(30, -30)    //设置文本偏移量
}
var label = new BMap.Label("欢迎使用百度地图，这是一个简单的文本标注哦~", opts);  // 创建文本标注对象
label.setStyle({
color : "red",
fontSize : "12px",
height : "20px",
lineHeight : "20px",
fontFamily:"微软雅黑"
});
map.addOverlay(label); 

//在天安门添加一个热区,鼠标放在地图天安门上，会出现提示文字
var hotSpot = new BMap.Hotspot(point, {text: "我爱北京天安门!", minZoom: 8, maxZoom: 18});
map.addHotspot(hotSpot);

//添加行政区域的边界划分
function getBoundary(){       
    var bdary = new BMap.Boundary();
    bdary.get("重庆", function(rs){       //获取行政区域
        map.clearOverlays();        //清除地图覆盖物       
        var count = rs.boundaries.length; //行政区域的点有多少个
        for(var i = 0; i < count; i++){
            var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000"}); //建立多边形覆盖物
            map.addOverlay(ply);  //添加覆盖物
            map.setViewport(ply.getPath());    //调整视野         
        }                
    });   
}

    <input type="button" onclick="marker.show();" value="显示" />
    <input type="button" onclick="marker.hide();" value="隐藏" />
    <input type="button" onclick="marker.enableDragging();" value="可拖拽" />
    <input type="button" onclick="marker.disableDragging();" value="不可拖拽" />	
	var p = marker.getPosition();       //获取marker的位置
alert("marker的位置是" + p.lng + "," + p.lat);   
	
var driving2 = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});    //驾车实例
driving2.search(myP1, myP2);    //显示一条公交线路	
	
	
		
//信息窗口
var opts = {
  width : 200,     // 信息窗口宽度
  height: 60,     // 信息窗口高度
  title : "海底捞王府井店" , // 信息窗口标题
  enableMessage:true,//设置允许信息窗发送短息
  message:"亲耐滴，晚上一起吃个饭吧？戳下面的链接看下地址喔~"
}
var infoWindow = new BMap.InfoWindow("地址：北京市东城区王府井大街88号乐天银泰百货八层", opts);  // 创建信息窗口对象
map.openInfoWindow(infoWindow,point); //开启信息窗口	

	
marker.addEventListener("click", function(){          
   this.openInfoWindow(infoWindow);
   //图片加载完毕重绘infowindow
   document.getElementById('imgDemo').onload = function (){
       infoWindow.redraw();   //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
   }
});	
	
	
var infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象
map.openInfoWindow(infoWindow,point); //开启信息窗口
document.getElementById("r-result").innerHTML = "信息窗口的内容是：<br />" + infoWindow.getContent();	
	


//右键菜单
var contextMenu = new BMap.ContextMenu();
var txtMenuItem = [
  {
   text:'放大',
   callback:function(){map.zoomIn()}
  },
  {
   text:'缩小',
   callback:function(){map.zoomOut()}
  },
  {
   text:'放置到最大级',
   callback:function(){map.setZoom(18)}
  },
  {
   text:'查看全国',
   callback:function(){map.setZoom(4)}
  },
  {
   text:'在此添加标注',
   callback:function(p){
    var marker = new BMap.Marker(p), px = map.pointToPixel(p);
    map.addOverlay(marker);
   }
  }
 ];
 for(var i=0; i < txtMenuItem.length; i++){
  contextMenu.addItem(new BMap.MenuItem(txtMenuItem[i].text,txtMenuItem[i].callback,100));
  if(i==1 || i==3) {
   contextMenu.addSeparator();
  }
 }
 map.addContextMenu(contextMenu);



//叠加层
//多边形覆盖物
function getBoundary(){       
    var bdary = new BMap.Boundary();
    bdary.get("上海", function(rs){       //获取行政区域
        map.clearOverlays();        //清除地图覆盖物       
        var count = rs.boundaries.length; //行政区域的点有多少个
        for(var i = 0; i < count; i++){
            var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000"}); //建立多边形覆盖物
            map.addOverlay(ply);  //添加覆盖物
            map.setViewport(ply.getPath());    //调整视野         
        }                
    });   
}


//事件
map.addEventListener("tilesloaded",function(){alert("地图加载完毕");});

map.addEventListener("dragend", function showInfo(){
 var cp = map.getCenter();
 alert(cp.lng + "," + cp.lat);
});

function showInfo(e){
 alert(e.point.lng + ", " + e.point.lat);
}
map.addEventListener("click", showInfo);

map.removeEventListener("click", showInfo);



//服务示例：search
var local = new BMap.LocalSearch(map, {
  renderOptions: {map: map, panel: "r-result"}
});
local.search("餐饮");


var local = new BMap.LocalSearch(map, {
  renderOptions:{map: map, autoViewport:true}
});
local.searchNearby("小吃", "前门");


var local = new BMap.LocalSearch(map, {
  renderOptions:{map: map}
});
local.searchInBounds("银行", map.getBounds());
map.addEventListener("dragend",function(){
    map.clearOverlays();
    local.searchInBounds("银行", map.getBounds());
});


var local = new BMap.LocalSearch("全国", {
  renderOptions: {
    map: map,
    panel : "r-result",
    autoViewport: true,
    selectFirstResult: false
  }
});
local.search("南京路");



//服务示例：公交
var transit = new BMap.TransitRoute(map, {
  renderOptions: {map: map}
});
transit.search("王府井", "西单");



//服务示例：驾车
var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
driving.search("天安门", "百度大厦");



//服务示例：步行
var walking = new BMap.WalkingRoute(map, {renderOptions:{map: map, autoViewport: true}});
walking.search("天坛公园", "故宫");