高德雲圖

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

     首先，要申請一個祕鑰，開發調用api時須要使用。接着我要使用雲圖，通俗的說就是一張本身定製的地圖，這地圖上有我想要展示的標記信息，之因此叫雲能夠理解爲地圖的全部數據信息，都已經在雲端存儲好了，本地不須要再弄個數據庫來存儲地圖信息。咱們須要作的就是調用接口顯示就行了！顯然，生成一張雲圖，該雲圖會產生一個惟一的key，在調用接口時使用。（雲圖管理：http://yuntu.amap.com/datamanager/index.html）

     

   點擊「新建地圖」，就能夠開始咱們的定製雲圖之旅了。製做雲圖的ui以下，經過右側的紅色標記能夠在地圖上生成本身的標記，標記信息會生成左邊的地圖信息列表。咱們能夠添加列來增長咱們所需的信息。好比這裏，我添加了人均消費和描述兩個信息。完成後點擊右側「個人地圖」，就自動保存了。該雲圖中，添加了幾個本幫菜的地址，嘿嘿！吃貨們等什麼！

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

（上面的「導入數據」，爲咱們提供另外一張生成雲圖信息的方法，直接導入信息，並和相關字段映射就能夠了。）

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

 1 <?php
 2 
 3 echo $this->pageTitle = Yii::app()->name;
 4 ?>
 5 
 6 <style type="text/css">
 7 body{padding:10px;}
 8 #container{width:100%;height:400px;border:1px solid #F6F6F6;margin:10px 0 0;}
 9 h1,p{line-height:1.5em;}
10 span{float:right;}
11 </style>
12 <script type="text/javascript"
13 src="http://webapi.amap.com/maps?v=1.2&key=申請的祕鑰">
14 </script>
15 
16 
17 <div id="container"></div>
18 
19 </html>
20 
21 <script type="text/javascript">
22 var mapObj;
23     initialize();
24 function initialize(){
25   //var position=new AMap.LngLat(121.455214,31.248771);//建立中心點座標
26   //mapObj=new AMap.Map("container",{center:position});//建立地圖實例
27   mapObj = new AMap.Map("container",{center:new AMap.LngLat(121.455214,31.248771),level:12});   
28   addCloudLayer();
29 }
30 function addCloudLayer() { 
31     //加載雲圖層插件 
32     mapObj.plugin('AMap.CloudDataLayer', function () { 
33         var layerOptions = {  
34             query:{keywords: ''},  
35             clickable:true 
36         }; 
37         var cloudDataLayer = new AMap.CloudDataLayer('539ff910e4b0755f806954e8', layerOptions); //實例化雲圖層類 
38         cloudDataLayer.setMap(mapObj); //疊加雲圖層到地圖 
39            
40         AMap.event.addListener(cloudDataLayer, 'click', function (result) { 
41             var clouddata = result.data; 
42             var infoWindow = new AMap.InfoWindow({ 
43                 content:"<h3><font face=\"微軟雅黑\"color=\"#3366FF\">"+ clouddata._name +"</font></h3><hr />地址："+ clouddata._address + "<br />" + "菜系：" + clouddata.descript+ "<br />" + "人均消費：￥"+clouddata.consume+"<br/>" + "更新時間：" + clouddata._updatetime, 
44                 size:new AMap.Size(300, 0), 
45                 autoMove:true, 
46                 offset:new AMap.Pixel(0,-5) 
47             }); 
48                
49             infoWindow.open(mapObj, clouddata._location); 
50         }); 
51     }); 
52     mapObj.plugin(["AMap.ToolBar"],function(){   //在地圖中添加ToolBar插件      
53         toolBar = new AMap.ToolBar();  
54         mapObj.addControl(toolBar);       
55     });  
56 }
57  
58 </script>

效果如圖：

1）韻色

2）小南國本幫菜

      咱們的第一個定製雲圖作好了！