高德雲圖簡單試用體驗

操作步驟：

登錄網站：http:///yuntu.amap.com
沒有註冊的朋友，請先註冊個賬戶。
註冊完登錄

使用嚮導：

創建一幅地圖（比如7-11連鎖店分佈圖）
批量導入數據 or 手工標註（地圖右上角有個標註按鈕）
修改調整屬性或座標
發佈地圖

體驗分享：

默認字段：序號、經緯度、地址、創建時間、更新時間。
對導入數據的一些要求：
文件限制：支持 .csv 格式、UTF8編碼，數據量不超過 10,000 條，文件大小不超過10M、字段總數不超過 40 個。

字段命名規則：以英文字母開頭，僅由英文字母、數字、下劃線組成，字段名長度不超過20位。
導入數據後的字段映射，提供“經緯度、地址"兩種方式

經緯度有項兩種類型：GPS（原始數據）、高德座標/國家座標（估計是GCJ-02）
地址定位：地址解析（準確度跟地址填寫和匹配不一定太高，需後期手工調整）
索引：可在雲圖檢索API進行模糊搜索，適用於字符型字段。
篩選排序：可在雲圖存儲API和雲圖檢索API進行精確篩選和排序。

開發應用：門店點展示、檢索（麻點圖、JavaScript）樣例：http://api.amap.com/javascript/guide#cloudlayer

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>疊加雲數據圖層</title>
<link rel="stylesheet" type="text/css" href="http://api.amap.com/Public/css/demo.Default.css" />
<script language="javascript" src="http://webapi.amap.com/maps?v=1.2&key=【your key】"></script>
<script language="javascript">
var mapObj;
/*
 *初始化地圖對象，加載地圖
 */
function mapInit(){
    mapObj = new AMap.Map("iCenter",{center:new AMap.LngLat(116.39946,39.907629),level:12});    
    addCloudLayer();
}
/*
 *疊加雲數據圖層
 */
function addCloudLayer() {
    //加載雲圖層插件
    mapObj.plugin('AMap.CloudDataLayer', function () {
        var layerOptions = { 
            query:{keywords: ''}, 
            clickable:true
        };
        var cloudDataLayer = new AMap.CloudDataLayer('【your tabel id】', 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._createtime+ "<br />" + "更新時間：" + clouddata._updatetime,
                size:new AMap.Size(0, 0),
                autoMove:true,
                offset:new AMap.Pixel(0,-5)
            });
            
            infoWindow.open(mapObj, clouddata._location);
        });
    });
}
</script>
</head>
<body onLoad="mapInit()">
    <div id="iCenter"></div>
    <div id="info" style="padding:2px 0px 0px 5px;font-size:12px; color:red;height:20px"></div>
</body>
</html>