百度地图使用教程(Javascript版)

准备：

百度地图在线文档：http://developer.baidu.com/map/reference/

百度地图在线实例：http://developer.baidu.com/map/jsdemo.htm


1.百度地图实例化

   需要在页面引入百度地图API
  

 

然后在Body添加一个Div，用于显示地图，Div大小可自定义

 

 

之后编写初始化代码

   

var map = new BMap.Map("allmap");                // 创建Map实例
var point = new BMap.Point(116.404, 39.915);      // 创建点坐标
map.centerAndZoom(point,15);                       // 初始化地图,设置中心点坐标和地图级别。
map.enableScrollWheelZoom();                       //启用滚轮放大缩小

 

    2.百度地图位置搜索

   

var map = new BMap.Map("allmap");  //实例化百度地图
var address = "海淀区国家图书馆";      //详细地址
var lableName = "国家图书馆";        //建筑名称
var city = "北京";                 //城市

var myGeo = new BMap.Geocoder();   //地址解析器
/**
 * 根据地址获得位置坐标，然后实例化百度地图
 */
myGeo.getPoint(address, function(point){	
	
  if(point){		      
      map.enableScrollWheelZoom();          //启用滚轮放大缩小      
      map.centerAndZoom(point,15);          //初始化地图,设置中心点坐标和地图级别。
      map.addControl(new BMap.NavigationControl());  //添加平移缩放控件
	  map.addControl(new BMap.OverviewMapControl());  //添加地图缩略图控件      
       //创建标注（类似定位小红旗）
	   var marker = new BMap.Marker(point); 
	   //标注提示文本
	   var label = new BMap.Label(lableName,{"offset":new BMap.Size(20,-20)});       
	   marker.setLabel(label); //添加提示文本  
	   //创建消息框
	   var infoWindow = new BMap.InfoWindow(address);  
	   //绑定标注单击事件，设置显示的消息框
	   marker.addEventListener("click",function(){this.openInfoWindow(infoWindow);});
	   map.addOverlay(marker);  //把标注添加到地图
  }
}, city);

    页面效果：

      
 

3.公交线路查询

   

  


  到   
  

  

    页面效果：

    
    
 

    5.搜索附近信息

   

  

公交车


地铁
	

 

     结果：