【高德地圖API】從零開始學高德JS API（一）地圖展示

摘要：關於地圖的顯示，我想你們最關心的就是麻點圖，自定義底圖的解決方案了吧。在過去，marker大於500以後，瀏覽器開始逐漸卡死，你們都開始尋找解決方案，好比聚合marker啊，好比麻點圖啊。聚合marker裏面還有一些複雜的算法，而麻點圖，最讓你們頭疼的，就是如何生成麻點圖，如何切圖，如何把圖片貼到地圖上，還有如何定位圖片的位置吧。之前那麼複雜的一系列操做，竟然讓雲圖的可視化操做一會兒解決了。如今只要點一點鼠標，麻點圖就自動生成了。真是廣大LBS開發者的福音。

之前寫過從零開始學百度地圖API系列，寫得比較淺顯。現在，本身在LBS領域成長了幾年，學到比較多的專業知識，因此這次再次寫到」從零系列」，但願加上更多功能，更多想法。好比這期的地圖展示，不僅僅只是告訴你們，一張2D地圖如何用代碼寫出來，同時，還會加上3D地圖，衛星圖，街景，交通流量圖，麻點圖，仙劍奇俠傳地圖等。也但願藉此能夠和你們更多的交流。

---

1、萬物的首先第一步，固然是申請一個key。

申請key：http://yuntu.amap.com/datamanager/index.html

登陸以後，點新建地圖，就有一個自動的key了。

key在右上角密鑰管理處

2、 2D地圖

2D地圖，就是一張普通的高德地圖。只須要簡單幾句話就能夠實現。

var mapObj;
var point = new AMap.LngLat(120.148373,30.290422);
function mapInit(){   //初始化地圖對象，加載地圖。
    mapObj = new AMap.Map("iCenter",{
    center : point, //地圖中心點
    level : 15  //地圖顯示的縮放級別
    });
}

其中，level指的是地圖級別，默認爲[3,18]。3爲世界地圖，18爲街道級地圖。

center指的是地圖的中心點，能夠用座標拾取工具來取點。座標拾取工具：http://zhaoziang.com/amap/picpoint.html

2D效果圖：

3、實時路況

添加實時路況，只須要兩句話

var trafficLayer = new AMap.TileLayer.Traffic({zIndex:10}); //實時路況圖層
trafficLayer.setMap(mapObj);   //添加實時路況圖層
消除實時路況有2種方法，一是隱藏hide方法，二是重置地圖setMap(null)

trafficLayer.setMap(null);   //隱藏實時路況圖層
trafficLayer.hide();   //隱藏實時路況圖層

實時路況效果：

4、路網，衛星圖

路網、衛星圖，都跟實時路況路況差很少，只是換了個類名。

添加路網、衛星圖，只須要兩句話

var roadNetLayer = new AMap.TileLayer.RoadNet({zIndex:10}); //實例化路網圖層
roadNetLayer.setMap(mapObj); //在map中添加路網圖層

var satellLayer = new AMap.TileLayer.Satellite({zIndex:10}); //實例化衛星圖
satellLayer.setMap(mapObj); //在map中添加衛星圖
消除路網、衛星圖，有2種方法，一是隱藏hide方法，二是重置地圖setMap(null)

roadNetLayer.setMap(null); //隱藏路網
roadNetLayer.hide(); //隱藏路網

satellLayer.setMap(null);   //隱藏衛星圖
satellLayer.hide();   //隱藏衛星圖

路網、衛星圖效果：

5、3D地圖

3D地圖，是在地圖比較詳細的級別17-18的時候，有三維樓塊效果的地圖。

因此，要看到3D效果，必須把地圖級別調整到17-18才能夠看到。

var buildingLayer = new AMap.Buildings(); //實例化3D地圖圖層
buildingLayer.setMap(mapObj); //在map中添加3D圖層
mapObj.setZoom(18); //改變地圖級別到17-18
3D地圖沒有hide方法，因此隱藏他，須要重置地圖。

buildingLayer.setMap(null);

3D地圖效果：

6、麻點圖

（記得之前研究百度地圖API的時候，麻點圖的製做很苦難，要本身去對準座標，本身生成麻點圖，而後本身切片……實在費力……）

高德地圖API最好用的就是麻點圖。不用本身生成麻點圖，不用本身切圖。只須要在雲圖上點一點，就能夠完成全部操做。

打開雲圖管理臺：http://yuntu.amap.com/datamanager/index.html

新建或打開已有的地圖：

點右上角的按鈕，能夠手工一個一個標註你本身的麻點。

固然也能夠批量導入你的數據。

數據填充完畢後，記錄下你的tableid。這就是你的雲圖層（麻點圖）的id，放到下面的代碼裏。

//加載雲圖層插件  
    mapObj.plugin('AMap.CloudDataLayer', function () {  
        var layerOptions = {   
            query:{keywords: ''},   
            clickable:true  
        };  
        var cloudDataLayer = new AMap.CloudDataLayer('【您的tableid】', layerOptions); //實例化雲圖層類  
        cloudDataLayer.setMap(mapObj); //疊加雲圖層到地圖 
        });

雲圖層，就是麻點圖，是實時渲染的，你在雲圖管理臺操做以後，立馬在你的前臺獲得顯示。

這真是我用過最好用的麻點圖了。marker大於500以後，終於有如此方便的解決方案了。

更多關於雲圖的教程，能夠看我之前發過的教程

雲存儲：http://www.cnblogs.com/milkmap/p/3623775.html

三甲醫院例子：http://www.cnblogs.com/milkmap/p/3637899.html

東莞酒店例子：http://www.cnblogs.com/milkmap/p/3657829.html

7、仙劍地圖

這個算是投機取巧，將仙劍地圖直接覆蓋在高德地圖上，屬於圖片覆蓋物。

圖片覆蓋物須要指定一個顯示範圍，取左下角和右上角。

顯示範圍設定後，無論地圖放大縮小，圖片都只在這個範圍中顯示。

這樣的圖片覆蓋物，比較適合製做校園地圖，廠區地圖，小區地圖等。

並且，跟雲圖同樣，圖片覆蓋物不須要切圖。

（又想感嘆一句！真真是開發者的福音！爲什麼高德API作得那麼好，以前我都不知道！！）

var bounds = new AMap.Bounds(new AMap.LngLat(120.120993,30.271596), new AMap.LngLat(120.184593,30.309171)),  
    groundImageOpts = {  
        opacity: 1,   //圖片透明度  
        clickable: true,//圖片相應鼠標點擊事件，默認：false  
        map: mapObj     //圖片疊加的地圖對象  
    }; 
    //實例化一個圖片覆蓋物對象  
    var groundImage = new AMap.GroundImage('xianjian.jpg', bounds, groundImageOpts);

仙劍地圖效果：

8、自定義地圖

這裏用谷歌的底圖做爲例子，將高德底圖直接換爲谷歌底圖。跟上一段的內容不同，不是圖片覆蓋物那麼簡單哦。

高德的切圖方式，和谷歌的同樣。因此，在網上找的谷歌地圖的切圖工具，均可以適用於高德地圖。

google = new AMap.TileLayer({  
        tileUrl:"http://mt{1,2,3,0}.google.cn/vt/lyrs=m@142&hl=zh-CN&gl=cn&x=[x]&y=[y]&z=[z]&s=Galil"//圖塊取圖地址  
    });  
    google.setMap(mapObj);

谷歌地圖：

9、街景

高德地圖街景覆蓋城市共33個，分別爲：杭州，南京，成都，西安，拉薩，昆明，煙臺，瀋陽，哈爾濱，長春，常州，南通，林芝，泰安，日照，那曲，東營，日喀則，德州，濱州，聊城，萊蕪，鄭州，洛陽，平頂山，開封，安陽，信陽，新鄉，焦做，商丘，周口，駐馬店。

使用街景，必須將您的網頁文件傳到服務器上。

var opts = {  
        pov: {  
            heading:270,  
            pitch:0  
        },  
        position: point  
    };  
var panorama = new AMap.Panorama('iCenter',opts);

position，就是街景的位置，必須在33個城市有街景的範圍內，才能看到街景哦。
能夠先到amap上看一眼，哪裏有街景，而後再設置您的街景位置。高德地圖 http://www.amap.com/
街景效果：

10、所有源代碼，請點擊這裏：

View Code

示例demo在線看：

http://zhaoziang.com/amap/zero_1_1.html

【部分代碼和圖片丟失，請看原文】
http://www.cnblogs.com/milkmap/p/3687855.html