【云图】如何制作东莞酒店地图？

最新推荐文章于 2019-03-14 21:54:00 发布

原创最新推荐文章于 2019-03-14 21:54:00 发布 · 4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#地图API #高德地图 #云图 #支付宝 #地图

高德地图API 同时被 3 个专栏收录

18 篇文章

订阅专栏

LBS

12 篇文章

订阅专栏

地图

6 篇文章

订阅专栏

本文详细介绍了如何使用云图技术为东莞酒店制作分布地图，包括数据准备、上传、索引建立、云图渲染以及检索功能实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

摘要：今天到深圳参加第二届电博会，果然不像车展或者漫展那样，会有萌妹纸，大家都好素净。晚上去东莞玩一圈，发现订不到酒店啊！各种商业中心关闭啊。于是想，那自己制作一张东莞酒店地图玩玩吧。于是在咖啡厅开始写代码，顺便等别人把酒店定好……啊，我果然是程序猿的命麽？！嗯，回到主题，制作好酒店地图，需要增加功能，就是按照星级，或者行政区进行分类查询检索。而且，还可以在云图上任意增减数据。真是出门在外居家旅行必备佳品，哈哈。

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

最终效果如下：

第一步，数据准备。

将东莞酒店的数据准备好。酒店数据来源于互联网，数据太多，只摘取部分。

注意，将数据格式保存为CSV。

注意，第一行必须是字段名，只能是字母、数字和下划线，并且不能以数字开头。

注意，经纬度必须分开成2个字段！

注意，文件只支持 .csv 格式、UTF-8编码，数据量不超过 10,000 条，文件大小不超过10M、字段总数不超过 40 个。

 
  
 点击查看东莞酒店数据

第二步，上传数据至云图。

打开云图管理台，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.image!=""){
                imgurl=clouddata.image
            }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>