這是前幾天公司做的新項目，上面需要用到地圖的數據。第一次做這類型的東西沒啥思路，咱們經理說，這東西簡單，截個圖存文件夾里調整好尺寸，數據庫里存上圖片的地址動態調用就行了。心想：恩，這方法好，不過...這么多地址，難道我要一張張截圖，再打開ps調尺寸么？筆者很懶的好吧..
於是筆者就想了，能不能調用百度啊什么的地圖接口呢？會不會很難呢？
好吧，到這里筆者就開始利用搜索引擎了。
搜出來的結果有很多，各個企業提供的接口也都有各自的特色，筆者比較喜歡百度提供的接口，功能比較全面，項目中筆者使用的是騰訊地圖AIP，是因為跟這個項目的版面比較融合。在這里，為大家簡單的演示一下百度地圖接口的調用..其它的呢大家選擇適合自己的去嘗試一下。反正方法已經學到手了，你還怕什么？
首先給出一個百度地圖API的鏈接，大家可以跟着教程先自己做一遍：http://developer.baidu.com/map/index.php?title=jspopular
點進去看標題：JavaScript API大眾版，我們往下翻，選擇地圖展示點進去就是了。左邊的下拉欄提供了很多關於地圖的拓展功能，這里我就不一一去介紹，只給大家講解最基本的，調用地圖的方法，有興趣的可以自己去嘗試使用這些功能。
- <!DOCTYPE html>
- <html>
- <head>
- <style type="text/css">
- body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微軟雅黑";}
- </style>
- <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密鑰"></script>
- <title>地圖展示</title>
- </head>
- <body>
- <div id="allmap"></div>
- </body>
- </html>
- <script type="text/javascript">
- // 百度地圖API功能
- var map = new BMap.Map("allmap"); // 創建Map實例
- map.centerAndZoom(new BMap.Point(118.800398,32.078553), 19); // 初始化地圖,設置中心點坐標和地圖級別
- map.addControl(new BMap.MapTypeControl()); //添加地圖類型控件
- map.setCurrentCity("北京"); // 設置地圖顯示的城市 此項是必須設置的
- map.enableScrollWheelZoom(true); //開啟鼠標滾輪縮放
- </script>
上面這段代碼，大家可以在獲取密鑰后，直接復制粘貼到記事本將密鑰填入，后綴該為html雙擊即可訪問。
關於密鑰，首先得有一個百度賬號，然后點擊我上面發的那個鏈接，沒錯看標題：JavaScript API大眾版就是它，進去我們看左上角會有一個獲取密鑰的鏈接，我們點一下。獲取成功以后，我們點擊創建應用，隨便填就可以的。這時在查看應用里面，我找到“訪問應用（AK）”所對應的一段密鑰，復制粘貼到代碼第七行對應的位置。此時打開編寫好的html頁面就可以顯示地圖的信息了。
此時，你會驚奇的發現，地圖上顯示的位置是南京玄武湖中間的一座小島。傻了吧，想換地址是吧。很簡單，我們看一下代碼第十七行
map.centerAndZoom(new BMap.Point(118.800398,32.078553), 19);
其中118.800398,32.078553是玄武湖的坐標，而19表示的是地圖縮放的級別，不明白什么是縮放級別的把19改成16，再進去看看就明白了。級別不是重點，重點是坐標我們怎么獲取呢？這問題百度已經幫我們解決了，請往回看，我前面提到過一個左邊工具欄，那里面就有生成坐標的js代碼，自己研究一下。不想麻煩的話可以使用百度提供的可視化坐標轉換工具，這里點進去就是了：http://api.map.baidu.com/lbsapi/getpoint/
文章最后提醒一句，需要注意的是，各個企業地圖接口對應的坐標是不同的，就拿騰訊的和百度的來說，騰訊地圖的坐標相對百度坐標向東北方向偏移了數公里，所以大家在這塊一定要注意一下。另外，騰訊地圖提供的坐標查詢系統查詢出來的坐標，跟代碼中加入的坐標x、y軸是相反的，用的時候需要顛倒一下，對於有編程基礎的朋友來說，寫個字符串拆分再拼接的算法就行了。沒編程基礎的，就自己手動改吧。
附：騰訊地圖坐標查詢地址：http://lbs.qq.com/tool/getpoint/index.html
