高德雲圖

    最近雲圖很火，各種宣傳。一直也想嘗試了解一下，到高德注冊個號，http://developer.amap.com/。發現可用的API挺多的，從網頁到手機終端都有可供開發的接口。這里我使用javascript api 了解一下高德地圖。

     首先，要申請一個秘鑰，開發調用api時需要使用。接着我要使用雲圖，通俗的說就是一張自己定制的地圖，這地圖上有我想要展現的標記信息，之所以叫雲可以理解為地圖的所有數據信息，都已經在雲端存儲好了，本地不需要再弄個數據庫來存儲地圖信息。我們需要做的就是調用接口顯示就好了！顯然，生成一張雲圖，該雲圖會產生一個唯一的key，在調用接口時使用。（雲圖管理：http://yuntu.amap.com/datamanager/index.html）

     

   點擊“新建地圖”，就可以開始我們的定制雲圖之旅了。制作雲圖的ui如下，通過右側的紅色標記可以在地圖上生成自己的標記，標記信息會生成左邊的地圖信息列表。我們可以添加列來增加我們所需的信息。比如這里，我添加了人均消費和描述兩個信息。完成后點擊右側“我的地圖”，就自動保存了。該雲圖中，添加了幾個本幫菜的地址，嘿嘿！吃貨們等什么！

怎么查看該雲圖的key呢？仔細看左側列表，會發現一個tableid,這個就是我們需要的雲圖key（標識），接着我們調用接口顯示我們的雲圖吧！

（上面的“導入數據”，為我們提供另一張生成雲圖信息的方法，直接導入信息，並和相關字段映射就可以了。）

        調用api接口如下，詳細可以參考官方的api指南。將在div：container中加載雲圖。

<?php

echo $this->pageTitle = Yii::app()->name;
?>

<style type="text/css">
body{padding:10px;}
#container{width:100%;height:400px;border:1px solid #F6F6F6;margin:10px 0 0;}
h1,p{line-height:1.5em;}
span{float:right;}
</style>
<script type="text/javascript"
src="http://webapi.amap.com/maps?v=1.2&key=申請的秘鑰">
</script>


<div id="container"></div>

</html>

<script type="text/javascript">
var mapObj;
    initialize();
function initialize(){
  //var position=new AMap.LngLat(121.455214,31.248771);//創建中心點坐標
  //mapObj=new AMap.Map("container",{center:position});//創建地圖實例
  mapObj = new AMap.Map("container",{center:new AMap.LngLat(121.455214,31.248771),level:12});   
  addCloudLayer();
}
function addCloudLayer() { 
    //加載雲圖層插件 
    mapObj.plugin('AMap.CloudDataLayer', function () { 
        var layerOptions = {  
            query:{keywords: ''},  
            clickable:true 
        }; 
        var cloudDataLayer = new AMap.CloudDataLayer('539ff910e4b0755f806954e8', layerOptions); //實例化雲圖層類 
        cloudDataLayer.setMap(mapObj); //疊加雲圖層到地圖 
           
        AMap.event.addListener(cloudDataLayer, 'click', function (result) { 
            var clouddata = result.data; 
            var infoWindow = new AMap.InfoWindow({ 
                content:"<h3><font face=\"微軟雅黑\"color=\"#3366FF\">"+ clouddata._name +"</font></h3><hr />地址："+ clouddata._address + "<br />" + "菜系：" + clouddata.descript+ "<br />" + "人均消費：￥"+clouddata.consume+"<br/>" + "更新時間：" + clouddata._updatetime, 
                size:new AMap.Size(300, 0), 
                autoMove:true, 
                offset:new AMap.Pixel(0,-5) 
            }); 
               
            infoWindow.open(mapObj, clouddata._location); 
        }); 
    }); 
    mapObj.plugin(["AMap.ToolBar"],function(){   //在地圖中添加ToolBar插件      
        toolBar = new AMap.ToolBar();  
        mapObj.addControl(toolBar);       
    });  
}
 
</script>

效果如圖：

1）韻色

2）小南國本幫菜

      我們的第一個定制雲圖做好了！