javascript調用百度地圖，以及城市的初始化，javascript調用
地圖的構建非常簡單，官方的API文檔也寫得很清晰，我只做一總結：
一、引入JS：這個很容易理解，既然是調用JS版的百度地圖，肯定得引用外部的JS檔案了，而這個檔案來自百度的伺服器（所以必須得連網，不然就沒戲。。），我們以後用到的所有方法都寫在這個JS檔案當中。
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
這裡的1.4為JS版百度地圖的版本號碼，目前最新版本為1.4。（理論上這條語句是可以放在html檔案中的任何位置，但是一般人們都放在</head>標籤之前，不過我曾看到一本書上說放在</body>前，效率是最高的。）精心開發5年的UI前端架構！
二、在你的html檔案中建立一個<div>容器：添加一個id屬性（這裡為<div id="container"></div>）。這個容器是用來放置百度地圖的，地圖的大小可以通過調節div的樣式實現。
三、建立一個百度地圖
<script type="text/javascript"> var map = new BMap.Map("container"); // 建立地圖執行個體；（"container"）就是剛才建立的div的id屬性值 var point = new BMap.Point(116.404, 39.915); // 建立點座標；這個點是由經度和緯度構成的，點可以隨意選取 map.centerAndZoom(point, 15); // 初始化地圖，設定中心點座標和地圖層級 //map.centerAndZoom("杭州");//這條語句可以代替上面那一條，系統會自動定位到該城市，城市名可以根據使用者需要自己定//當然，如果這樣子寫，那就不需建立point點了 </script>
只要這三步，就可以建立一個百度地圖web應用。當然，還需要調節樣式之類的。
下面是一個完整的HTML檔案：（該例子來自百度官網）精心開發5年的UI前端架構！
<!DOCTYPE html><!--HTML5--> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Hello, World</title> <style type="text/css"> html{height:100%} body{height:100%;margin:0px;padding:0px}#container{height:100%} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script> </head> <body> <div id="container"></div> <script type="text/javascript"> var map = new BMap.Map("container"); // 建立地圖執行個體 var point = new BMap.Point(116.404, 39.915); // 建立點座標 map.centerAndZoom(point, 15); // 初始化地圖，設定中心點座標和地圖層級 </script> </body> </html>
要想讓容器裡展示地圖還需要給API提供兩個東西：地理位置和展示層級。地理位置就是告訴API顯示哪裡的地圖，在北京還是在上海？還是在廣州？地理位置是通過經緯度來描述的，百度地圖也如此。展示層級告訴API以多大的比例顯示地圖。在初中地理課上學過，地圖是有比例尺的，比例尺通常會告訴地圖上一厘米代表實際多少公裡。地圖API也如此，但是它是以像素作為基準的，不同的層級下每個像素所代表的米數是不同的，層級越高每像素等於的米數就越少，反之則越大。視覺上看就是層級越高地圖越詳細。目前百度地圖支援的層級範圍是1到19，在19級下，地圖上一個像素表示0.5米（註：目前1.2版本支援到19級，1.1及以前版本支援到18級）。
下面代碼提供一個經緯度和一個層級，進行地圖初始化： 精心開發5年的UI前端架構！
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
東經116.404度，北緯39.915度大約是在天安門的位置，當然經緯度後面的位元越多越能精確的表示一個點，層級給11，現在會在瀏覽器看到這個效果：
方法centerAndZoom接收到一個座標和一個層級後就開始進行相應的計算，接著會根據計算結果擷取相應的圖塊，最終顯示在瀏覽器中。至此，地圖初始化才全部完成。
如果你不知道北京的經緯度資訊怎麼辦？1.2版本的API有個更方便的功能：通過城市名稱進行地圖初始化。
map.centerAndZoom('北京');
此時API會根據你提供城市名來尋找其中心位置，並根據容器大小來決定層級，保證城市中心地區都能顯示在視野中，假如我們不改變容器大小使用上述方式來初始化地圖，你將得到和之前一致的結果，但如果你把容器寬高改為300x200，則會得到以下效果：
我們看到中心沒有變但是層級發生了變化，因為容器變小了，這是為了保證能夠在視野範圍內展示北京市中心地區。通過這種方式初始化地圖的好處就是你不必知道經緯度、層級這些概念就能讓API開始顯示地圖，API這麼做也是最大限度降低開發人員的使用成本。當然，任何事物都有兩面性（彷彿是政治課的內容），這種方式初始化有兩個問題：首先，初始化過程是非同步，你不能立刻在centerAndZoom代碼之後擷取地圖狀態（比如中心點、視野範圍等），而需要通過監聽地圖load事件來進行後續的操作，第二，初始化過程會比前者稍慢，因為此時會有網路請求，請求返回之後才能確定地圖中心和層級。精心開發5年的UI前端架構！
比如你只能通過如下方式擷取地圖中心點：
map.addEventListener('load', function(){ alert(map.getCenter().lng + ', ' + map.getCenter().lat);}); map.centerAndZoom('上海');
Map類提供了isLoaded方法，通過它就能知道地圖是否載入完成，我們可以來看看在兩種不同的初始化方式中調用此方法的結果如何：
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);alert(map.isLoaded()); // true
如果用城市名這種方式，你會發現centerAndZoom方法執行完成後地圖並沒有初始化完成：
map.centerAndZoom('上海');alert(map.isLoaded()); // false
百度地圖API應該有說明文檔
一個javascript實現的仿百度map的程式
我前段時間做的，不知是否符合要求
首先定義個頁面
<html>
<head>
<title>我的地圖</title>
<link rel='stylesheet' type='text/css' href='<%=request.getContextPath()%>/css/map.css'/>
<script type='text/javascript' src='<%=request.getContextPath()%>/js/prototype.js'></script>
<script type="text/javascript">
ContextPath = '<%=request.getContextPath()%>';
</script>
<script type='text/javascript' src='<%=request.getContextPath()%>/js/map.js'></script>
</head>
<body onload='InitMapObj()'>
<table border='0' cellspacing='0' cellpadding='0' id='mainTable'>
<tr>
<td height='400' width='600' id='mainTd'> </td>
<td width='20'> </td>
<td height='400' width='41' id='miniatureTd'> </td>
</tr>
</table>
</body>
</html>
prototype.js自己去下載，我用的是1.4版本
指令碼存為map.js，其內容如下
//====================初始化頁面
//載入控制項
function InitMapObj() {
InitMainMap();
InitMiniature();
}
var map = null;
//初始化主地圖
function InitMainMap() {
var obj = $('mainTd');
var divobj = document.createElement('div');
divobj.style.cssText = 'position:absolu......餘下全文>>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
