【雲圖】自有資料的多邊形檢索（雲檢索）

酸奶小妹發表於2014-04-03

摘要：記錄每天的生活軌跡，分享美食心得，哪裡有免費停車，製作班級通訊錄等等，都可以用到雲圖。無論你是開發者，還是app使用者，都可以用雲圖製作一張屬於你的專屬地圖。

---------------------------------------------------------------------------------------------------------

 一、通過座標拾取工具得到經緯度：

http://zhaoziang.com/amap/picpoint.html

 

（當然，如果你是開發者，你可以使用定位SDK，獲取自己的經緯度，詳見：http://api.amap.com/location/index ） 

 

二、建立自己的資料表

 

（ 資料儲存為CSV格式喲）

tag,name,lng,lat,tel,content
免費停車場,免費停車場001,116.430359,39.958175,010-52294832,停過5次沒貼條
免費停車場,免費停車場002,116.279297,40.00132,010-52294832,停過1次沒貼條
免費停車場,免費停車場003,116.202393,39.825413,010-52294832,停過2次沒貼條
免費停車場,免費停車場004,116.564941,39.835959,010-52294832,停過7次沒貼條
免費停車場,免費停車場005,116.437225,39.806426,010-52294832,停過20次沒貼條
通訊錄,酸奶小妹,116.441345,39.961333,18393727348,喝酸奶補鈣
通訊錄,吳蔚,116.374054,39.957122,15000038375,蹦躂的幽默感
通訊錄,王倩,116.233978,39.943436,1348377294,房姐白富美
通訊錄,張小穎,116.353455,39.929748,1869393933,精明俏主婦
美食記錄,望京總店馬蘭拉麵,116.183167,40.022356,010-39382872,嘴巴起泡都要吃！西安辣椒爽到翻！
美食記錄,綠茶,116.411133,39.992904,010-39382872,就是便宜啊，麻婆豆腐才8元。港麗你敢這麼賣麼？
美食記錄,西貝莜麵村,116.507263,39.855992,010-39382872,猜拳贏了115元！老闆叫了11個黃饃饃，11個莜麵！
美食記錄,酷聖石,116.133728,39.880235,010-39382872,K總最愛的酷石頭，全北京最好吃冰淇淋。其實量太大，吃不完就化掉了。
美食記錄,吉野家,116.336975,39.886558,010-39382872,有學生卡啊，就去買啊。
美食記錄,鹿港小鎮,116.383667,39.916056,010-39382872,海南雞飯比三亞的還好吃！愛，贊！
美食記錄,星巴克,116.523743,40.008683,010-39382872,如果不是傻2的買了2張98的會員卡，你以為我會去消費麼！
旅行記錄,天安門,116.483917,39.91395,010-283764648,我愛北京天安門
旅行記錄,紅螺寺,116.419373,39.941331,010-283764648,爬山，沒看到寺廟
旅行記錄,大覺寺,116.411133,39.889719,010-283764648,玉蘭花美，銀杏樹大
旅行記錄,鳥巢,116.27655,39.838068,010-283764648,住的地方，空氣好點
旅行記錄,大興西瓜村,116.433105,39.785323,010-283764648,西瓜貴死人

 

將資料匯入雲圖：

http://yuntu.amap.com/datamanager/index.html

 

 

當然，如果你沒那麼多記錄，一次不能匯入那麼多資料的話。你可以每天記錄一點點喲！

點選右上角的按鈕，可以手工輸入一個點哦！

 

 

三、建立索引（這步灰常重要！很多開發者因為沒建立索引，而導致無法檢索到自己資料哦）

 

 

文字索引

 

 

塞選排序索引

 

 

 

四、好啦，要開始寫程式碼啦。

不用擔心，我都寫好在這裡了，你直接copy去用吧。

當然更多複雜功能，你可以看看官網的開發指南啊，類參考啊，示例啊。http://api.amap.com/yuntu/guide

（如果你是移動端的開發者，可以使用REST API，就是webservice服務，來獲取json資料，並展示在自己的應用上。）

 

顯示雲圖層：

var mapObj;
//初始化地圖物件，載入地圖  
function mapInit(){  
    mapObj = new AMap.Map("iMap",{center:new AMap.LngLat(116.39946,39.907629),level:10});      
    addCloudLayer();  //用於展示麻點圖
} 
//疊加雲資料圖層  
function addCloudLayer() {  
    //清除地圖上資料
    mapObj.clearMap();
    //載入雲圖層外掛  
    mapObj.plugin('AMap.CloudDataLayer', function () {  
        var layerOptions = {   
            query:{keywords: ''},   
            clickable:true  
        };  
        cloudDataLayer = new AMap.CloudDataLayer('533ccc56e4b08ebff7d539eb', layerOptions); //例項化雲圖層類  
        cloudDataLayer.setMap(mapObj); //疊加雲圖層到地圖 
        
        AMap.event.addListener(cloudDataLayer, 'click', function (result) {  
            var clouddata = result.data;  
            var infoWindow = new AMap.InfoWindow({  
                content:"<h3>"+ clouddata._name + "</h3>" + "<p>分類：" + clouddata.tag + "</p><p>一句話："+ clouddata.content +"</p>",  
                size:new AMap.Size(300, 0),  
                autoMove:true,  
                offset:new AMap.Pixel(0,-5)  
            });                
            infoWindow.open(mapObj, clouddata._location);              
        });  
        AMap.event.addListener(mapObj,"click",function(){
            mapObj.clearInfoWindow();
        });        
    });  
}

 

清除圖層

//清除圖層
function clearMap(){
cloudDataLayer.setMap(null);
}

 

這次清除圖層之後，要再次顯示圖層，需要重新建立地圖對應關係。

cloudDataLayer.setMap(mapObj);

 

通過索引渲染圖層，實時渲染的哦

//索引檢索
function getType(tag){
cloudDataLayer.setMap(mapObj);
    var op={
        query:{keywords:tag}
    }
    cloudDataLayer.setOptions(op);    
}

 

 

效果展示圖：

 

 

demo地址：http://zhaoziang.com/amap/mydata.html

 

註冊你自己的key，填在原始碼裡哦：http://api.amap.com/key/index 

全部原始碼：

<!DOCTYPE HTML>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
<title>酸奶小妹-畢設-自有資料</title>  
<style type="text/css">
div,h2{border:none;padding:0;margin:0;line-height:1em;}
#iMap{height:500px;width:600px;float:left;}
.info{width:300px;float:left;margin:0 0 0 10px;height:500px;}
label{width:80px;float:left;}
.menu a{text-decoration:none;}
.detail{border:1px solid #33ffef;padding:10px 0;display:none;}
</style>
<script language="javascript" src="http://webapi.amap.com/maps?v=1.2&key=填寫你的key"></script>  
</head>  
<body onLoad="mapInit()">  
    <div id="iMap"></div>
    <div class="info" id="info">
        <h1>查詢自己的資料</h1>
        <div class="menu">
            <p><a href="javascript:void(0);" onclick="getType('免費停車場|通訊錄|美食記錄|旅行記錄');"> 全部自有資料</a></p>
            <p><a href="javascript:void(0);" onclick="clearMap();"> 清除圖層</a></p>
            <p>
                <a href="javascript:void(0);" onclick="getType('免費停車場')"> 免費停車場</a>
                <a href="javascript:void(0);" onclick="getType('通訊錄')"> 通訊錄</a>
                <a href="javascript:void(0);" onclick="getType('美食記錄')"> 美食記錄</a>
                <a href="javascript:void(0);" onclick="getType('旅行記錄')"> 旅行記錄</a>
            <p>
        </div>
        <div class="detail" id="detail"></div>
    </div>
<!-- tongji begin-->
<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Faeff88f19045b513af7681b011cea3bd' type='text/javascript'%3E%3C/script%3E"));
</script>
<!-- tongji end -->
</body>  
<script language="javascript">  
var mapObj;  
var keywords;
var cloudDataLayer;
var marker = new Array();  
var windowsArr = new Array();  
//初始化地圖物件，載入地圖  
function mapInit(){  
    mapObj = new AMap.Map("iMap",{center:new AMap.LngLat(116.39946,39.907629),level:10});      
    addCloudLayer();  //用於展示麻點圖
    cloudSearch();  //查詢出來的資料，用於展示在右側詳細資料
}  
function cloudSearch(){
    mapObj.clearMap();  
    var arr = new Array();  
    //繪製多邊形     
    arr.push(new AMap.LngLat(116.074677,40.121141));   
    arr.push(new AMap.LngLat(116.065063,39.702961));   
    arr.push(new AMap.LngLat(116.754456,39.718807));   
    arr.push(new AMap.LngLat(116.721497,40.135841));  
    var polygon = new AMap.Polygon({  
        map:mapObj,   
        path:arr,   
        strokeColor:"#3366FF",   
        strokeOpacity:0.2,   
        strokeWeight:2,   
        fillColor: "#3366FF",   
        fillOpacity: 0.2   
    });    
    var search;  
    var searchOptions = {  
        keywords:'免費停車場',  
        //orderBy:'_id:ASC'  
    };  
    //載入CloudDataSearch服務外掛  
    mapObj.plugin(["AMap.CloudDataSearch"], function() {         
        search = new AMap.CloudDataSearch('533ccc56e4b08ebff7d539eb', searchOptions); //構造雲資料檢索類  
        AMap.event.addListener(search, "complete", cloudSearch_CallBack); //查詢成功時的回撥函式  
        AMap.event.addListener(search, "error", errorInfo); //查詢失敗時的回撥函式  
        search.searchInPolygon(arr); //多邊形檢索  
    });  
}
//檢索成功回撥函式   
function cloudSearch_CallBack(data) {   
    var resultStr="";  
    var resultArr = data.datas;  
    var resultNum = resultArr.length;    
    for (var i = 0; i < resultNum; i++) {    
        resultStr += "分類：" + resultArr[i].tag;  
        addmarker(i, resultArr[i]);  
    }  
    mapObj.setFitView();  
    document.getElementById("detail").innerHTML = resultStr;  
}   
//檢索錯誤回撥函式  
function errorInfo(data) {  
    resultStr = data.info;  
    document.getElementById("detail").innerHTML = resultStr;  
} 
//疊加雲資料圖層  
function addCloudLayer() {  
    //清除地圖上資料
    mapObj.clearMap();
    //載入雲圖層外掛  
    mapObj.plugin('AMap.CloudDataLayer', function () {  
        var layerOptions = {   
            query:{keywords: ''},   
            clickable:true  
        };  
        cloudDataLayer = new AMap.CloudDataLayer('533ccc56e4b08ebff7d539eb', layerOptions); //例項化雲圖層類  
        cloudDataLayer.setMap(mapObj); //疊加雲圖層到地圖 
        
        AMap.event.addListener(cloudDataLayer, 'click', function (result) {  
            var clouddata = result.data;  
            var infoWindow = new AMap.InfoWindow({  
                content:"<h3>"+ clouddata._name + "</h3>" + "<p>分類：" + clouddata.tag + "</p><p>一句話："+ clouddata.content +"</p>",  
                size:new AMap.Size(300, 0),  
                autoMove:true,  
                offset:new AMap.Pixel(0,-5)  
            });                
            infoWindow.open(mapObj, clouddata._location);              
            document.getElementById("detail").innerHTML = "<h3>" + clouddata._id + "." + clouddata._name + "</h3><p>分類：" + clouddata.tag + "</p><p>一句話：" + clouddata.content + "</p>";
        });  
        AMap.event.addListener(mapObj,"click",function(){
            mapObj.clearInfoWindow();
        });        
    });  
}  
//索引檢索
function getType(tag){
cloudDataLayer.setMap(mapObj);
    var op={
        query:{keywords:tag}
    }
    cloudDataLayer.setOptions(op);    
}
//清除圖層
function clearMap(){
cloudDataLayer.setMap(null);
}
//點選空白處關閉資訊視窗
document.getElementById("info").onclick = function(){
    mapObj.clearInfoWindow();
}
</script>  
</html>

 

 

#微博上的廣告#

使用高德雲圖輕鬆定製屬於你的個性地圖，分分鐘玩轉地圖開發，零基礎小白&程式猿一樣瀟灑用！

我剛剛製作了一張地圖，快來看看吧：連結，想不想也製作一張屬於你的地圖？ 猛戳： http://yuntu.amap.com/datamanager 

 

相關文章