百度地图使用教程(Javascript版)-优快云博客

本文链接：https://blog.youkuaiyun.com/only_love_java/article/details/84396710

本文介绍如何使用百度地图API实现地图实例化、位置搜索、公交线路查询及搜索附近信息等功能，并提供详细的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

准备：

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

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

1.百度地图实例化

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

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

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

<div id="allmap" style="width: 1000px;height: 1000px;" ></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.公交线路查询

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>百度地图公交查询</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
<script type="text/javascript">

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

var myGeo = new BMap.Geocoder();   //地址解析器

function initMap(){
	/**
	 * 根据地址获得位置坐标，然后实例化百度地图
	 */
	myGeo.getPoint(address, function(point){	
		
	  if(point){
		  map = new BMap.Map("allmap");  //实例化百度地图
	      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);
}



//查询公交
function findPath(){
 var b = document.getElementById("begin").value;  //起始位置
 var e = document.getElementById("end").value;    //结束位置
	//初始化公共公交查询系统
    var transit = new BMap.TransitRoute(map,{
      renderOptions:{
	      map:map,
	      panel:'panel'
	    }
     });

    transit.search(b,e);  //查询
}

window.onload= initMap();   //初始化百度地图
</script>
</head>
<body>
  <div id="allmap" style="width: 500px;height: 500px;" ></div><br>
  <input id="begin" type="text"  />到<input id="end" type="text" />&nbsp;&nbsp;&nbsp;<input value="查询" onclick="findPath()"  type="button" />
  <br>
  <div id="panel" ></div>
</body>
</html>

页面效果：

5.搜索附近信息

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
<script type="text/javascript">

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

var myGeo = new BMap.Geocoder();   //地址解析器

function initMap(){
	/**
	 * 根据地址获得位置坐标，然后实例化百度地图
	 */
	myGeo.getPoint(address, function(point){	
	  if(point){
		  map = new BMap.Map("allmap");  //实例化百度地图
	      map.enableScrollWheelZoom();          //启用滚轮放大缩小      
	      map.centerAndZoom(point,15);          //初始化地图,设置中心点坐标和地图级别。
	      map.addControl(new BMap.NavigationControl());  //添加平移缩放控件
		  map.addControl(new BMap.OverviewMapControl());  //添加地图缩略图控件      
	       //创建标注（类似定位小红旗）
		   var marker = new BMap.Marker(point); 
		   map.addOverlay(marker);  //把标注添加到地图
		   
		   initPanel(point);  //调用搜索
	  }
	}, city);
}

//右侧信息面板初始化
function initPanel(point){
	  //创建圆形范围
	  var circle = new BMap.Circle(point,1000,{
		    strokeWeight: 1 ,
		    fillOpacity: 0.3, 
		    strokeOpacity: 0.3
		  });
	    map.addOverlay(circle);  //显示到地图
		//创建搜索范围，根据搜索关键词分类
	    var local =  new BMap.LocalSearch(map, {renderOptions: {autoViewport: false},onSearchComplete:function(){
		   
	    	var res = local.getResults();   //返回值
	        var str = ""; //内容
			var id = ""; //显示的位置
            
			//根据查询关键词判断
	        if(res.keyword == "公交车"){
	           var busStopArr = new Array();  //车站数组
	           var busNameArr = new Array();  //公交车名称数组
			   id = "busList";
			   
			   //把信息存储到数组
			   for(var i=0;i<res.getNumPois();i++){
				  var r = res.getPoi(i);
				  if(r == undefined){
	               break;
		          }else{
	                 var arr = r.address.split(";");
					 busStopArr.push(r.title.replace(/[ ]/g,""));
	                 for(var j=0;j<arr.length;j++){
	                   busNameArr.push(arr[j].replace(/[ ]/g,""));
				     }
				  }
			   }
			   //去掉重复的车站信息
			   for(var i=0;i<busStopArr.length;i++){
					  for(var j=i+1;j<busStopArr.length;j++){
						 if(busStopArr[i] == busStopArr[j]){
							 busStopArr.splice(j,1);
							   j--;
						 }
					  }
				  }
			   //去掉重复的公交车名称
			   for(var i=0;i<busNameArr.length;i++){
					  for(var j=i+1;j<busNameArr.length;j++){
						 if(busNameArr[i] == busNameArr[j]){
							 busNameArr.splice(j,1);
							   j--;
						 }
					  }
				  }
			   
			   //整理结果
			   str=str+"<li>公交站:";
			   for(var i=0;i<busStopArr.length;i++){
				  str=str+' '+busStopArr[i];  
			   }
			   str=str+"</li>";
			   str=str+"<li>公交线路：";
			   for(var j=0;j<busNameArr.length;j++){
				   str=str+' '+busNameArr[j];
			   }
			   str=str+"</li>";
			}
		    //查询地铁信息
	        if(res.keyword == "地铁"){
	          var arr = new Array();
			   id = "metroList";  
			   for(var i=0;i<res.getNumPois();i++){
				  var r = res.getPoi(i);
				  if(r == undefined){
	               break;
		          }else{
		        	  //截取信息，存储到数组
		        	  if(r.title.substring(0,(r.title.indexOf('站')+1)) != ''){
	                    arr.push({title:r.title.substring(0,(r.title.indexOf('站')+1)),mm:Math.round(map.getDistance(point,r.point))});
		        	  } 
				        
	              }
			   }
				  //去掉重复的地铁站信息
				  for(var i=0;i<arr.length;i++){
					  for(var j=i+1;j<arr.length;j++){
						 if(arr[i].title == arr[j].title){
							   arr.splice(j,1);
							   j--;
						 }
					  }
				  }
				  
				  //整理结果
				  for(var k=0;k<arr.length;k++){
					str=str+'<li><span class="gj_lx" >'+arr[k].title+" ";
		                 
	                str=str+'<span class="lan" >&nbsp;</span>';

				    str = str+'</span><span class="gj_m" >'+arr[k].mm+'米</span></li>';
					  
				  }
				  
			  	  
			}
			document.getElementById(id).innerHTML = str;	
		
		}});  
		
	    //获得搜索范围
	    var bounds = getSquareBounds(circle.getCenter(),circle.getRadius());
		
		//开始搜索
	    local.searchInBounds("公交车",bounds); 
	    local.searchInBounds("地铁",bounds);
   }


  //封装好处理圆形范围的算法
  function getSquareBounds(centerPoi,r){
      var a = Math.sqrt(2) * r;
      var getMecator = map.getMapType().getProjection().lngLatToPoint;
	  var getPoi = map.getMapType().getProjection().pointToLngLat;

      mPoi = getMecator(centerPoi);
      var x0 = mPoi.x, y0 = mPoi.y;
   
      var x1 = x0 + a / 2 , y1 = y0 + a / 2;
      var x2 = x0 - a / 2 , y2 = y0 - a / 2;
      
      var ne = getPoi(new BMap.Pixel(x1, y1)), sw = getPoi(new BMap.Pixel(x2, y2));
      return new BMap.Bounds(sw, ne);        
      
  }

window.onload= initMap();   //初始化百度地图
</script>
</head>
<body style="float: left;margin-left: 10px;" >
  <div id="allmap" style="width: 500px;height: 500px;" ></div>
<h3>公交车</h3>
<ul id="busList" ></ul><br>
<h3>地铁</h3>
<ul id="metroList" ></ul>	
</body>
</html>

结果：