原文地址：http://qiufeihu.iteye.com/blog/1817758
準備：
百度地圖在線文檔：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" /> <input value="查詢" onclick="findPath()" type="button" />
- <br>
- <div id="panel" ></div>
- </body>
- </html>
頁面效果：
