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

時間  2019-11-12
標籤 高德地圖API 開始 api 地圖 展示 麻點 街景 室內 欄目 JavaScript 简体版
原文   原文鏈接

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

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

-----------------------------------------------------------------------html

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

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

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

 

key在右上角密鑰管理處api

 

 

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爲街道級地圖。ide

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、所有源代碼，請點擊這裏：

<!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 onclick="to2D();">2D地圖</button>
                <p>是一張普通的地圖，地圖級別是13。</p>
            </li>
            <li>
                <button onclick="addTraffic();">實時路況</button>
                <p>疊加上實時交通，路況信息。紅色最堵。</p>
            </li>
            <li>
                <button onclick="addRoadNetLayer();">路網</button>
                <p>疊加上路網</p>
            </li>            
            <li>
                <button onclick="yunLayer();">麻點圖</button>
                <p>麻點圖，就是雲圖的雲圖層顯示。</p>
            </li>            
            <li>
                <button onclick="addsatellLayer();">衛星圖</button>
                <p>換上衛星圖</p>
            </li>
            <li>
                <button onclick="addBuildingLayer();">3D地圖</button>
                <p>顯示3D樓塊，只有地圖級別在會顯示。</p>
            </li>            
            <li>
                <button onclick="googlMap();">自定義底圖</button>
                <p>自定義底圖，是須要本身切圖的。這裏展現了谷歌的底圖。</p>
            </li>
            <li>
                <button onclick="xianjianLayer();">仙劍地圖</button>
                <p>顯示的仙劍地圖，感受很帥。其實這是一個圖片覆蓋物，而不是圖層。</p>
            </li>
            <li>
                <button onclick="jiejing();">街景</button>
                <p>顯示街景，點了這個要刷新才能回來，哈哈。</p>
            </li>
        </ul>
    </div>
</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

 

效果預覽：

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程