高德云图

    最近云图很火，各种宣传。一直也想尝试了解一下，到高德注册个号，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）小南国本帮菜

      我们的第一个定制云图做好了！