百度地圖API 應用實例

最近在做一個GIS路線查詢頁面，要用到地圖，開始想用GOOGLE，但中國地圖還是百度比較詳細

 

第一步：引用百度API的JS庫

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

第二步：創建放置地圖的DIV

<div id="clientmap" style="width: 100%; height: 100%">
</div>

第三步：創建地圖

 var map = new BMap.Map("clientmap");                             //創建地圖實例

到這里就可以開始實現地圖，接下來是地圖的一些常用操作

map.addControl(new BMap.NavigationControl());                    //添加默認縮放平移控件
map.addControl(new BMap.ScaleControl());                         //添加默認比例尺控件
map.addControl(new BMap.OverviewMapControl());                   //添加默認縮略地圖控件 
map.addControl(new BMap.MapTypeControl());                       //2D圖，衛星圖  
map.enableScrollWheelZoom();                                     //啟用滾輪放大縮小，默認禁用
map.enableContinuousZoom(); 

地址解析器實例

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

myGeo.getPoint(data.rows[i].address, function (point) {             // 將地址解析結果顯示在地圖上,並調整地圖視野
　　if (point) {
　　　　map.centerAndZoom(point, 10);                              //設置中心點並按系數放大
　　}
}, "");

創建標注並點擊標注彈出信息提示

//信息內容
var sContent = "<table>" +
"<tr><td>客戶名稱：</td><td>" + data.rows[i].name + "</td></tr>" +
"<tr><td>聯系人：</td><td>" + data.rows[i].linkman + "</td></tr>" +
"<tr><td>手機號碼：</td><td>" + data.rows[i].mobile + "</td></tr>" +
"<tr><td>固定電話：</td><td>" + data.rows[i].phone + "</td></tr>" +
"<tr><td>傳真：</td><td>" + data.rows[i].fax + "</td></tr>" +
"<tr><td>Email：</td><td>" + data.rows[i].email + "</td></tr>" +
"<tr><td>客戶地址：</td><td>" + data.rows[i].address + "</td></tr>" +
"</table>";

var marker = new BMap.Marker(point);                        // 創建標注
var infoWindow = new BMap.InfoWindow(sContent);             // 創建信息窗口對象
marker.addEventListener("click", function () {              // 標注點擊打開信息窗口
　　this.openInfoWindow(infoWindow);
});

map.addOverlay(marker);                                    // 將標注添加到地圖中

將折線添加到地圖中

var polyline = new BMap.Polyline([points, point]);     //折線藍色、寬度為6
map.addOverlay(polyline);                              // 將折線添加到地圖中