【雲圖】如何製作東莞酒店地圖？

摘要：今天到深圳參加第二屆電博會，果然不像車展或者漫展那樣，會有萌妹紙，大家都好素淨。晚上去東莞玩一圈，發現訂不到酒店啊！各種商業中心關閉啊。於是想，那自己製作一張東莞酒店地圖玩玩吧。於是在咖啡廳開始寫代碼，順便等別人把酒店定好……啊，我果然是程序猿的命麼？！嗯，回到主題，製作好酒店地圖，需要增加功能，就是按照星級，或者行政區進行分類查詢檢索。而且，還可以在雲圖上任意增減數據。真是出門在外居家旅行必備佳品，哈哈。

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

最終效果如下：

第一步，數據準備。

將東莞酒店的數據準備好。酒店數據來源於互聯網，數據太多，只摘取部分。

注意，將數據格式保存爲CSV。

注意，第一行必須是字段名，只能是字母、數字和下劃線，並且不能以數字開頭。

注意，經緯度必須分開成2個字段！

注意，文件只支持 .csv 格式、UTF-8編碼，數據量不超過 10,000 條，文件大小不超過10M、字段總數不超過 40 個。

字段命名規則：以英文字母開頭，僅由英文字母、數字、下劃線組成，字段名長度不超過20位。

點擊查看東莞酒店數據

第二步，上傳數據至雲圖。

打開雲圖管理臺，http://yuntu.amap.com/datamanager/index.html

點擊添加地圖->導入數據，把剛纔的CSV文件導入進來。

第三步，建立索引。

在文本索引和篩選排序索引處，都建立關於星級，還有行政區域的索引。這是爲了能夠實現雲檢索。

第四步，雲圖的渲染。

記錄雲圖層的id，簡單寫代碼即刻渲染。

雲圖渲染代碼：

<!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></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><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('532b9b3ee4b08ebff7d535b4', layerOptions); //實例化雲圖層類        cloudDataLayer.setMap(mapObj); //疊加雲圖層到地圖    });
}</script></html>

如果要加上信息窗口的展示，就給雲圖層加上點擊事件。當點擊雲圖層時，彈出信息窗口，代碼：

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(300, 0),  
                autoMove:true,  
                offset:new AMap.Pixel(0,-5)  
            });  
              
            infoWindow.open(mapObj, clouddata._location);  
        });

第五步，雲索引。

建立檢索就能直接返回雲圖層了。如果要返回數據，需要使用雲檢索，比如區域檢索。

注意：雲圖層api和雲檢索api都有過濾數據和檢索數據的功能，所以都要用到索引，但是雲圖層返回的結果是圖，雲檢索返回的是數據。

//多邊形檢索函數       function cloudSearch() {  
    mapObj.clearMap();  
    var arr = new Array();  
    //繪製多邊形     
    arr.push(new AMap.LngLat(116.386414,39.920664));   
    arr.push(new AMap.LngLat(116.411648,39.922244));   
    arr.push(new AMap.LngLat(116.413879,39.906708));   
    arr.push(new AMap.LngLat(116.398087,39.904074));  
    arr.push(new AMap.LngLat(116.383667,39.912633));  
    arr.push(new AMap.LngLat(116.386414,39.920664));  
    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('532b9b3ee4b08ebff7d535b4', searchOptions); //構造雲數據檢索類  
        AMap.event.addListener(search, "complete", cloudSearch_CallBack); //查詢成功時的回調函數  
        AMap.event.addListener(search, "error", errorInfo); //查詢失敗時的回調函數  
        search.searchInPolygon(arr); //多邊形檢索      });  
}

大功告成！夜晚東莞更美麗！耶耶耶~~~~

寫完代碼不容易，放送一下今日覺得最素的萌妹紙，覺得很像山楂樹的女主角。

全部源代碼：

<!DOCTYPE HTML>  <html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <meta name="keywords" content="三星 四星 五星 東莞 酒店"><title>東莞酒店分佈圖</title>  <link rel="stylesheet" type="text/css" href="http://api.amap.com/Public/css/demo.Default.css" /><style type="text/css">#iCenter{
    width:600px;
    height:400px;
    border:1px solid #F6F6F6;}br strong{
    color:red;
    }.jiudianpng{
    float:right;
    height:200px;
    margin:0 auto;
    width:100%;}</style><script language="javascript" src="http://webapi.amap.com/maps?v=1.2&key=cd24309ecc6ac333e0d4f3985f55dcbe"></script>  </head>  <body onLoad="mapInit()">  
    <br/>
    <h1>
        <font color="pink">東莞酒店分佈圖</font>
        <img src="http://img.taopic.com/uploads/allimg/120119/2443-12011913310994.jpg" style="width:50px;height:30px;float:left"/>
    </h1>
    （數據來源於網絡，僅供參考哦 >_<）
    <br/>
    <strong>
    <form id="selectStarLevel">
        <strong>   請選擇酒店星級 &nbsp &nbsp  </strong>
        <input type="checkbox" name="StarLevel" value="五星" onclick="getStarLevel('')" checked /> 五星        <input type="checkbox" name="StarLevel" value="四星" onclick="getStarLevel('')" checked /> 四星        <input type="checkbox" name="StarLevel" value="三星" onclick="getStarLevel('')" checked /> 三星        <strong>  &nbsp &nbsp &nbsp 選擇行政區 &nbsp &nbsp  </strong>
        <select name="district"  id="district" onchange="changeSelSearch(this.value);" > <!--// onchange="isSelected(this.value);"-->
            <option value="none" selected style="color:black">所有</option> 
            <!-- <option value="others">其他</option> -->
        </select> 
        <!-- <input type="button" name="searchButton" value="查詢" onclick="searchHotel('')"/> -->
    </form>
    </strong>
    <p>------------------------------------------------------------------</p>
    <div id="iCenter"></div>  
    <div id="info" style="padding:2px 0px 0px 5px;font-size:12px; color:red;height:20px"></div>  </body>  <script language="javascript">  var starLevelArr = new Array();var mapObj;  
var starLayers = new Array();// var districts = new Array();var districts = new Array('黃江鎮','莞城區','塘廈鎮','長安鎮','沙田鎮','南城區','虎門','石碣鎮','東城區','常平鎮','寮步鎮','厚街鎮','橋頭鎮','洪梅鎮','東城區','企石鎮','清溪鎮','鳳崗鎮','高埗鎮','大朗鎮','萬江鎮','橫瀝鎮','東坑鎮');// var keywords;// var cloudDataLayer;function addOpts(arr){    // 顯示帶有自定義文本選項的select
    var selObj = document.getElementById("district");    // 添加input的選項
    for(i=0;i<arr.length;i++)
    {        var op = document.createElement("option");
        op.appendChild(document.createTextNode(arr[i]));
        op.setAttribute("value",arr[i]);
        op.setAttribute("style","color:black");
        selObj.appendChild(op);
    }//    var op = document.createElement("option");//    op.appendChild(document.createTextNode("其他"));//    op.setAttribute("value",'others');//    selObj.appendChild(op);}/* 
 *初始化地圖對象，加載地圖 
 */  function mapInit(){  
    mapObj = new AMap.Map("iCenter",{center:new AMap.LngLat(113.3833,22.9),level:12}); 
    var arr = new Array();//經緯度座標數組                    arr.push(new AMap.LngLat(113.5167 ,22.65));                  
    arr.push(new AMap.LngLat(113.5167,23.15));                  
    arr.push(new AMap.LngLat(114.25,23.15));  
    arr.push(new AMap.LngLat(114.25,22.65));    
    arr.push(new AMap.LngLat(113.5167 ,22.65));                  
    var polyline = new AMap.Polyline({                  
      map:mapObj,                
      path:arr,                  
      strokeColor:"#F00",                  
      strokeOpacity:0.4,                  
      strokeWeight:3,                  
      strokeStyle:"dashed",                  
      strokeDasharray:[10,5]                  
    });                  
    //調整視野到合適的位置及級別                    mapObj.setFitView();                  
    // 顯示帶有自定義文本選項的select    addOpts(districts);    var items = document.getElementsByName("StarLevel");    for(i = 0; i < items.length; i++){       //加載雲數據圖層插件          mapObj.plugin('AMap.CloudDataLayer',InitLayer(starLayers,i));  
    }    
}  
function InitLayer(newLayer,i){  
    //實例化一個雲圖層對象，設置數據表id      addCloudLayer('','',newLayer,i);
}function getStarLevel(){
    searchHotel();
}function getDistrict(){    var mysel = document.getElementById('district').value;    if('none' == mysel){
        mysel = '';
    }//    if('others' == mysel){//        mysel = '';//    }
    return mysel;
}function changeSelection(maplayers,i,starlevel,district)
{    var starlevelfilter = 'starlevel:'+starlevel;    var districtfilter = 'district:'+district;    var queryfilter = starlevelfilter + '+' + districtfilter;    var op={
       query:{filter:queryfilter}
    }
    
    maplayers[i].setOptions(op);
    maplayers[i].setMap(mapObj);
}function changeSelSearch(value){
    searchHotel();
}function searchHotel(){    var items = document.getElementsByName("StarLevel");    var len = items.length;    for (i = 0; i < len; i++) {        if (true == items[i].checked) {
            starLevelArr[i] = items[i].checked;
            district = getDistrict();
            changeSelection(starLayers,i,items[i].value,district);
        }else{            if(null!= starLayers[i])
            {
                delCloudLayer(starLayers,i);
            }
        }
    }    
}/* 
 *根據查詢結果
 *去除雲數據圖層 
*/ function delCloudLayer(maplayers,i) {  
    maplayers[i].setMap(null); //去除地圖上的運圖層 }/* 
 *根據查詢結果
 *疊加雲數據圖層 
*/ function addCloudLayer(levelofstar,seldistrict,maplayers,i) {  
    //加載雲圖層插件  
    var starlevelfilter = 'starlevel:'+levelofstar;    var districtfilter = 'district:'+seldistrict;    var queryfilter = starlevelfilter + '+' + districtfilter;
    mapObj.plugin('AMap.CloudDataLayer', function () {  
        var layerOptions = {   
            query:{filter: queryfilter},   
            clickable:true  
        };  
        // maplayers[i] = undefined;        maplayers[i] = new AMap.CloudDataLayer('53465d24e4b01214f369d491', layerOptions); //實例化雲圖層類          maplayers[i].setMap(mapObj); //疊加雲圖層到地圖  
        AMap.event.addListener(maplayers[i], 'click', function (result) {  
            var clouddata = result.data;            var imgurl=""
            if(clouddata.p_w_picpath!=""){
                imgurl=clouddata.p_w_picpath
            }else{
                imgurl="http://wenwen.soso.com/p/20090808/20090808091931-861961308.jpg"
            }            var infoWindow = new AMap.InfoWindow({  
                content:"<h3><font face=\"微軟雅黑\"color=\"#3366FF\">"+ clouddata._name +"</font></h3><hr />地址："+ 
                clouddata._address + "<br />" + "行政區：" + clouddata.district+ "<br /><strong>" + "星級：<font color='red'>" + clouddata.starlevel+"</font></strong><br /><strong>" + "酒店描述：" +clouddata.description+  "</strong><img class='jiudianpng' src="+imgurl+"></img><br />"  ,  
                size:new AMap.Size(300, 0),  
                autoMove:true,  
                offset:new AMap.Pixel(0,-5)  
            });  
              
            infoWindow.open(mapObj, clouddata._location);  
        });  
    });  
} 


</script>  </html>

demo展示：

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

效果：

【雲圖】如何製作東莞酒店地圖？

基於 Nginx Ingress + 雲效 AppStack 實現灰度發佈

C語言--右移左移

12款高效開源Wiki系統推薦，打造團隊知識管理利器

一個開源且全面的C#算法實戰教程

dotnet 基於 DirectML 控制檯運行 Phi-3 模型

自定義MyBatis插件

一款.NET開源、功能強大、跨平臺的繪圖庫 - OxyPlot

常用的 Git 指令

鼠標控制軟件有可能和虛擬機軟件產生衝突

sm4加密工具類

【雲圖】如何製作東莞酒店地圖？

【高德地圖API】匯潤做愛地圖技術大揭祕

我的友情鏈接

【高德地圖API】從零開始學高德JS API（七）——定位方式大揭祕

【雲圖】如何設置支付寶裏的家樂福全國連鎖店地圖？

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結