日期:2014-05-16  浏览次数:20358 次

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

准备:

百度地图在线文档: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;&a