【高德地圖API】從零開始學高德JS API（一）地圖展現——仙劍地圖，麻點圖，街景，室內圖

</pre><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; line-height:19.5px; font-size:13px; font-family:Verdana,Arial,Helvetica,sans-serif; background-color:rgb(254,254,242)">關於地圖的顯示，我想大家最關心的就是麻點圖，自定義底圖的解決方案了吧。在過去，marker大於500之後，瀏覽器開始逐漸卡死，大家都開始尋找解決方案，比如聚合marker啊，比如麻點圖啊。聚合marker裏面還有一些複雜的算法，而麻點圖，最讓大家頭疼的，就是如何生成麻點圖，如何切圖，如何把圖片貼到地圖上，還有如何定位圖片的位置吧。以前那麼複雜的一系列操作，居然讓雲圖的可視化操作一下子解決了。現在只要點一點鼠標，麻點圖就自動生成了。真是廣大LBS開發者的福音。</p><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; line-height:19.5px; font-size:13px; font-family:Verdana,Arial,Helvetica,sans-serif; background-color:rgb(254,254,242)">以前寫過從零開始學百度地圖API系列，寫得比較淺顯。如今，自己在LBS領域成長了幾年，學到比較多的專業知識，所以此次再次寫到”從零系列”，希望加上更多功能，更多想法。比如這期的地圖展現，不單單只是告訴大家，一張2D地圖如何用代碼寫出來，同時，還會加上3D地圖，衛星圖，街景，交通流量圖，麻點圖，仙劍奇俠傳地圖等。也希望藉此可以和大家更多的交流。</p><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; line-height:19.5px; font-size:13px; font-family:Verdana,Arial,Helvetica,sans-serif; background-color:rgb(254,254,242)"><img src="http://images.cnitblog.com/i/249635/201404/250834443102265.gif" alt="" style="margin:0px; padding:0px; border:0px" /></p><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; line-height:19.5px; font-size:13px; font-family:Verdana,Arial,Helvetica,sans-serif; background-color:rgb(254,254,242)">-----------------------------------------------------------------------</p><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; line-height:19.5px; font-size:13px; font-family:Verdana,Arial,Helvetica,sans-serif; background-color:rgb(254,254,242)">一、萬物的首先第一步，當然是申請一個key。</p><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; line-height:19.5px; font-size:13px; font-family:Verdana,Arial,Helvetica,sans-serif; background-color:rgb(254,254,242)">申請key：<a target=_blank target="_blank" href="http://yuntu.amap.com/datamanager/index.html" style="margin:0px; padding:0px; color:rgb(7,93,179)">http://yuntu.amap.com/datamanager/index.html</a></p><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; line-height:19.5px; font-size:13px; font-family:Verdana,Arial,Helvetica,sans-serif; background-color:rgb(254,254,242)">登錄之後，點新建地圖，就有一個自動的key了。</p><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; line-height:19.5px; font-size:13px; font-family:Verdana,Arial,Helvetica,sans-serif; background-color:rgb(254,254,242)"> <img src="http://images.cnitblog.com/i/249635/201404/250824024829514.png" alt="" style="margin:0px; padding:0px; border:0px" /></p><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; line-height:19.5px; font-size:13px; font-family:Verdana,Arial,Helvetica,sans-serif; background-color:rgb(254,254,242)">key在右上角密鑰管理處</p><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; line-height:19.5px; font-size:13px; font-family:Verdana,Arial,Helvetica,sans-serif; background-color:rgb(254,254,242)"><img src="http://images.cnitblog.com/i/249635/201404/250825098108178.png" alt="" style="margin:0px; padding:0px; border:0px" /></p><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; line-height:19.5px; font-size:13px; font-family:Verdana,Arial,Helvetica,sans-serif; background-color:rgb(254,254,242)"> </p><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; line-height:19.5px; font-size:13px; font-family:Verdana,Arial,Helvetica,sans-serif; background-color:rgb(254,254,242)"> </p><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; line-height:19.5px; font-size:13px; font-family:Verdana,Arial,Helvetica,sans-serif; background-color:rgb(254,254,242)">二、 2D地圖</p><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; line-height:19.5px; font-size:13px; font-family:Verdana,Arial,Helvetica,sans-serif; background-color:rgb(254,254,242)">2D地圖，就是一張普通的高德地圖。只需要簡單幾句話就可以實現。 </p><div class="cnblogs_code" style="margin:5px 0px; padding:5px; background-color:rgb(245,245,245); border:1px solid rgb(204,204,204); overflow:auto; font-family:'Courier New'!important"><div class="cnblogs_code_toolbar" style="margin:5px 0px 0px; padding:0px"><span class="cnblogs_code_copy" style="margin:0px; padding:0px 5px 0px 0px; line-height:1.5"><a target=_blank target="_blank" title="複製代碼" style="margin:0px; padding:0px; color:rgb(7,93,179); text-decoration:underline; border:none!important"><img src="http://common.cnblogs.com/images/copycode.gif" alt="複製代碼" style="margin:0px; padding:0px; border:none!important" /></a></span></div><pre style="margin-top:0px; margin-bottom:0px; padding:0px; white-space:pre-wrap; word-wrap:break-word; font-family:'Courier New'!important"><span style="margin:0px; padding:0px; line-height:1.5; color:rgb(0,0,255)">var</span><span style="margin:0px; padding:0px; line-height:1.5"> mapObj;
</span><span style="margin:0px; padding:0px; line-height:1.5; color:rgb(0,0,255)">var</span> point = <span style="margin:0px; padding:0px; line-height:1.5; color:rgb(0,0,255)">new</span> AMap.LngLat(120.148373,30.290422<span style="margin:0px; padding:0px; line-height:1.5">);
</span><span style="margin:0px; padding:0px; line-height:1.5; color:rgb(0,0,255)">function</span> mapInit(){   <span style="margin:0px; padding:0px; line-height:1.5; color:rgb(0,128,0)">//</span><span style="margin:0px; padding:0px; line-height:1.5; color:rgb(0,128,0)">初始化地圖對象，加載地圖。</span>
    mapObj = <span style="margin:0px; padding:0px; line-height:1.5; color:rgb(0,0,255)">new</span> AMap.Map("iCenter"<span style="margin:0px; padding:0px; line-height:1.5">,{
    center : point, </span><span style="margin:0px; padding:0px; line-height:1.5; color:rgb(0,128,0)">//</span><span style="margin:0px; padding:0px; line-height:1.5; color:rgb(0,128,0)">地圖中心點</span>
    level : 15  <span style="margin:0px; padding:0px; line-height:1.5; color:rgb(0,128,0)">//</span><span style="margin:0px; padding:0px; line-height:1.5; color:rgb(0,128,0)">地圖顯示的縮放級別</span>
<span style="margin:0px; padding:0px; line-height:1.5">    });
}</span>

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

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

2D效果圖：

三、實時路況

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

var trafficLayer = new AMap.TileLayer.Traffic({zIndex:10}); //實時路況圖層
trafficLayer.setMap(mapObj);   //添加實時路況圖層

消除實時路況有2種方法，一是隱藏hide方法，二是重置地圖setMap(null)

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

實時路況效果：

四、路網，衛星圖

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

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

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();   //隱藏衛星圖

路網、衛星圖效果：

五、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地圖效果：

六、麻點圖

（記得以前研究百度地圖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

七、仙劍地圖

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

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

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

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

而且，跟雲圖一樣，圖片覆蓋物不需要切圖。

（又想感嘆一句！真真是開發者的福音！爲何高德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);

仙劍地圖效果：

八、自定義地圖

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

高德的切圖方式，和谷歌的一樣。所以，在網上找的谷歌地圖的切圖工具，都可以適用於高德地圖。

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);

谷歌地圖：

九、街景

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

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

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

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

街景效果：

十、全部源代碼，請點擊這裏：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>地圖展示</title>
<link rel="stylesheet" type="text/css" href="zero.css" />
<script language="javascript" src="http://webapi.amap.com/maps?v=1.2&key=【您的key】"></script>
</head>
<body onLoad="mapInit()">
    <div id="iCenter"></div>
    <div id="iControlbox">
        <p id="lnglat"></p>
        <ul>
            <li>
                <button οnclick="to2D();">2D地圖</button>
                <p>是一張普通的地圖，地圖級別是13。</p>
            </li>
            <li>
                <button οnclick="addTraffic();">實時路況</button>
                <p>疊加上實時交通，路況信息。紅色最堵。</p>
            </li>
            <li>
                <button οnclick="addRoadNetLayer();">路網</button>
                <p>疊加上路網</p>
            </li>            
            <li>
                <button οnclick="yunLayer();">麻點圖</button>
                <p>麻點圖，就是雲圖的雲圖層顯示。</p>
            </li>            
            <li>
                <button οnclick="addsatellLayer();">衛星圖</button>
                <p>換上衛星圖</p>
            </li>
            <li>
                <button οnclick="addBuildingLayer();">3D地圖</button>
                <p>顯示3D樓塊，只有地圖級別在會顯示。</p>
            </li>            
            <li>
                <button οnclick="googlMap();">自定義底圖</button>
                <p>自定義底圖，是需要自己切圖的。這裏展示了谷歌的底圖。</p>
            </li>
            <li>
                <button οnclick="xianjianLayer();">仙劍地圖</button>
                <p>顯示的仙劍地圖，感覺很帥。其實這是一個圖片覆蓋物，而不是圖層。</p>
            </li>
            <li>
                <button οnclick="jiejing();">街景</button>
                <p>顯示街景，點了這個要刷新才能回來，哈哈。</p>
            </li>
        </ul>
    </div>
<!-- tongji begin-->
<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Faeff88f19045b513af7681b011cea3bd' type='text/javascript'%3E%3C/script%3E"));
</script>
<!-- tongji end -->
</body>
<script language="javascript">
var mapObj;
var point = new AMap.LngLat(120.148373,30.290422);
var buildingLayer = new AMap.Buildings(); //實例化3D地圖圖層
var trafficLayer = new AMap.TileLayer.Traffic({zIndex:10}); //實時路況圖層
var roadNetLayer = new AMap.TileLayer.RoadNet({zIndex:10}); //實例化路網圖層
var satellLayer = new AMap.TileLayer.Satellite({zIndex:10}); //實例化衛星圖
function mapInit(){   //初始化地圖對象，加載地圖。
    mapObj = new AMap.Map("iCenter",{
    center : point, //地圖中心點
    level : 15  //地圖顯示的縮放級別
    });
    AMap.event.addListener(mapObj,'click',getLnglat); //點擊事件
}
//鼠標點擊，獲取經緯度座標  
function getLnglat(e){    
    var x = e.lnglat.getLng();
    var y = e.lnglat.getLat(); 
    document.getElementById("lnglat").innerHTML = x + "," + y;    
}
function addBuildingLayer(){   //3D網
    buildingLayer.setMap(mapObj); //在map中添加3D圖層
    satellLayer.setMap(null);   //隱藏衛星圖
    //cloudDataLayer.setMap(null);
    mapObj.setZoom(18);
}
function addTraffic(){  //交通，實時路況
    trafficLayer.setMap(mapObj);   //添加實時路況圖層
    roadNetLayer.setMap(null);        //隱藏路網圖層
    satellLayer.setMap(null);   //隱藏衛星圖
    //cloudDataLayer.setMap(null);
    mapObj.setZoom(15);
}
function addRoadNetLayer(){   //路網
    roadNetLayer.setMap(mapObj); //在map中添加路網圖層
    trafficLayer.setMap(null);   //隱藏實時路況圖層
    satellLayer.setMap(null);   //隱藏衛星圖
    //cloudDataLayer.setMap(null);
    mapObj.setZoom(15);
}
function to2D(){
    buildingLayer.setMap(null);
    roadNetLayer.setMap(null);
    trafficLayer.setMap(null);
    mapObj.setZoom(15);
    groundImage.hide();
    google.setMap(null); 
    //cloudDataLayer.setMap(null);
}
function addsatellLayer(){
    satellLayer.setMap(mapObj); //在map中添加衛星圖
    buildingLayer.setMap(null);
    roadNetLayer.setMap(null);
    trafficLayer.setMap(null);
    //cloudDataLayer.setMap(null);
    mapObj.setZoom(18);
}

function yunLayer(){
    buildingLayer.setMap(null);
    roadNetLayer.setMap(null);
    trafficLayer.setMap(null);
    mapObj.setZoom(15);
    //groundImage.hide();

    //加載雲圖層插件  
    mapObj.plugin('AMap.CloudDataLayer', function () {  
        var layerOptions = {   
            query:{keywords: ''},   
            clickable:true  
        };  
        var cloudDataLayer = new AMap.CloudDataLayer('5358f853e4b01214f369d851', layerOptions); //實例化雲圖層類  
        cloudDataLayer.setMap(mapObj); //疊加雲圖層到地圖 
        });
}
function xianjianLayer(){
    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);  
    //mapObj.setBounds(bounds);  
    mapObj.setZoom(15);
}
function googlMap(){
    buildingLayer.setMap(null);
    //mapObj.setZoom(15);
    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);  
}
function jiejing(){
    var opts = {  
        pov: {  
            heading:270,  
            pitch:0  
        },  
        position: point  
    };  
    var panorama = new AMap.Panorama('iCenter',opts); 
}
</script>
</html>

示例demo在線看：

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

效果預覽：

學到新知識了？快來2014高德LBS應用大賽操練起來吧！

http://2014lbs.amap.com/

【高德地圖API】從零開始學高德JS API（一）地圖展現——仙劍地圖，麻點圖，街景，室內圖

【高德地圖API】從零開始學高德JS API（三）覆蓋物——標註|折線|多邊形|信息窗口|聚合marker|麻點圖|圖片覆蓋物

【高德地圖API】從零開始學高德JS API（一）地圖展現——仙劍地圖，麻點圖，街景，室內圖

高德地圖API中覆蓋物的精準定位體系——基點+偏移量

高德地圖 Android API 的定位原理及使用方法

【雲圖】如何建立北京三甲醫院雲圖，不用數據庫持有自己數據！

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結