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

原文地址：http://qiufeihu.iteye.com/blog/1817758

准备：
百度地图在线文档：http://developer.baidu.com/map/reference/
百度地图在线实例：http://developer.baidu.com/map/jsdemo.htm

1.百度地图实例化
   需要在页面引入百度地图API

Java代码  
  1. <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>  

 

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

 

Html代码 
  1. <div id="allmap" style="width: 1000px;height: 1000px;" ></div>  

 

之后编写初始化代码

   

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

 

    2.百度地图位置搜索

   

Js代码 
  1. var map = new BMap.Map("allmap");  //实例化百度地图  
  2. var address = "海淀区国家图书馆";      //详细地址  
  3. var lableName = "国家图书馆";        //建筑名称  
  4. var city = "北京";                 //城市  
  5.   
  6. var myGeo = new BMap.Geocoder();   //地址解析器  
  7. /** 
  8.  * 根据地址获得位置坐标，然后实例化百度地图 
  9.  */  
  10. myGeo.getPoint(address, function(point){      
  11.       
  12.   if(point){                
  13.       map.enableScrollWheelZoom();          //启用滚轮放大缩小        
  14.       map.centerAndZoom(point,15);          //初始化地图,设置中心点坐标和地图级别。  
  15.       map.addControl(new BMap.NavigationControl());  //添加平移缩放控件  
  16.       map.addControl(new BMap.OverviewMapControl());  //添加地图缩略图控件        
  17.        //创建标注（类似定位小红旗）  
  18.        var marker = new BMap.Marker(point);   
  19.        //标注提示文本  
  20.        var label = new BMap.Label(lableName,{"offset":new BMap.Size(20,-20)});         
  21.        marker.setLabel(label); //添加提示文本    
  22.        //创建消息框  
  23.        var infoWindow = new BMap.InfoWindow(address);    
  24.        //绑定标注单击事件，设置显示的消息框  
  25.        marker.addEventListener("click",function(){this.openInfoWindow(infoWindow);});  
  26.        map.addOverlay(marker);  //把标注添加到地图  
  27.   }  
  28. }, city);  

    页面效果：


      
 

3.公交线路查询

   

Html代码 
  1. <html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  4. <title>百度地图公交查询</title>  
  5. <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>  
  6. <script type="text/javascript">  
  7.   
  8. var map = null;  //实例化百度地图  
  9. var address = "海淀区国家图书馆";      //详细地址  
  10. var lableName = "国家图书馆";        //建筑名称  
  11. var city = "北京";                 //城市  
  12.   
  13. var myGeo = new BMap.Geocoder();   //地址解析器  
  14.   
  15. function initMap(){  
  16.     /**  
  17.      * 根据地址获得位置坐标，然后实例化百度地图  
  18.      */  
  19.     myGeo.getPoint(address, function(point){      
  20.           
  21.       if(point){  
  22.           map = new BMap.Map("allmap");  //实例化百度地图  
  23.           map.enableScrollWheelZoom();          //启用滚轮放大缩小        
  24.           map.centerAndZoom(point,15);          //初始化地图,设置中心点坐标和地图级别。  
  25.           map.addControl(new BMap.NavigationControl());  //添加平移缩放控件  
  26.           map.addControl(new BMap.OverviewMapControl());  //添加地图缩略图控件        
  27.            //创建标注（类似定位小红旗）  
  28.            var marker = new BMap.Marker(point);   
  29.            //标注提示文本  
  30.            var label = new BMap.Label(lableName,{"offset":new BMap.Size(20,-20)});         
  31.            marker.setLabel(label); //添加提示文本    
  32.            //创建消息框  
  33.            var infoWindow = new BMap.InfoWindow(address);    
  34.            //绑定标注单击事件，设置显示的消息框  
  35.            marker.addEventListener("click",function(){this.openInfoWindow(infoWindow);});  
  36.            map.addOverlay(marker);  //把标注添加到地图  
  37.       }  
  38.     }, city);  
  39. }  
  40.   
  41.   
  42.   
  43. //查询公交  
  44. function findPath(){  
  45.  var b = document.getElementById("begin").value;  //起始位置  
  46.  var e = document.getElementById("end").value;    //结束位置  
  47.     //初始化公共公交查询系统  
  48.     var transit = new BMap.TransitRoute(map,{  
  49.       renderOptions:{  
  50.           map:map,  
  51.           panel:'panel'  
  52.         }  
  53.      });  
  54.   
  55.     transit.search(b,e);  //查询  
  56. }  
  57.   
  58. window.onload= initMap();   //初始化百度地图  
  59. </script>  
  60. </head>  
  61. <body>  
  62.   <div id="allmap" style="width: 500px;height: 500px;" ></div><br>  
  63.   <input id="begin" type="text"  />到<input id="end" type="text" />&nbsp;&nbsp;&nbsp;<input value="查询" onclick="findPath()"  type="button" />  
  64.   <br>  
  65.   <div id="panel" ></div>  
  66. </body>  
  67. </html>  

    页面效果：