【云图】如何制作全国KTV查询系统？

时间：2014-06-24 17:42:53 阅读：540 评论：0 收藏：0 [点我收藏+]

摘要：本文以【唱吧】531麦霸音乐节为案例，详细解读了如何导入自有数据到高德云图，并进行检索和展示。最后，调起高德mobile地图来进行路线规划和周边查询。

本案例可以应用在微信开发平台，支付宝公众服务上，适合餐饮商家，汽车4S店，银行，停车场等业务。

由于使用高德云图+URI API的方式实现，开发者无需进行繁琐的数据库操作，即可实现自有数据的存储与检索。

效果图：

bubuko.com,布布扣

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

一、数据准备

从唱吧531麦霸节官网获得数据：http://changba.com/yunying/ktvStaticList.php

拷贝到excel，另存为CSV格式，并改成UTF-8或者GBK编码。

bubuko.com,布布扣

二、导入数据

登录云图：http://yuntu.amap.com/datamanager/index.html

点击新建地图：

bubuko.com,布布扣

导入刚才的数据：

bubuko.com,布布扣

点击预览：

bubuko.com,布布扣

出现全国KTV分布图：

bubuko.com,布布扣

三、UE设计图

1、对于KTV的展示，有列表模式和地图模式2种。

2、按照城市检索并展示KTV数据。

3、点击某个KTV，跳转到高德mobile地图，进行路线规划。

bubuko.com,布布扣

四、云图展示全国KTV

采用云图层的方法，将麻点图展示出来。

//地图-云图层
    mapObj.plugin(‘AMap.CloudDataLayer‘, function () {
        var layerOptions = {
            query:{keywords: ‘‘},
            clickable:true
        };
        cloudDataLayer = new AMap.CloudDataLayer(‘538d71fee4b04192f1f4de77‘, layerOptions); //实例化云图层类
        cloudDataLayer.setMap(mapObj); //叠加云图层到地图    
    });

示例图：

bubuko.com,布布扣

五、列表展示北京市KTV

用云检索，检索出北京市的KTV。

    //列表                 
    mapObj.plugin(["AMap.CloudDataSearch"], function() {       var searchOptions = {  
            keywords:‘‘,  
            orderBy:‘_id:ASC‘  
        };     
        cloudSearch = new AMap.CloudDataSearch(‘538d71fee4b04192f1f4de77‘, searchOptions); //构造云数据检索类  
        AMap.event.addListener(cloudSearch, "complete", cloudSearch_CallBack); //查询成功时的回调函数  
        AMap.event.addListener(cloudSearch, "error", errorInfo); //查询失败时的回调函数
        cloudSearch.searchNearBy(iPoint, 30000); //周边检索
    });

示例图：

bubuko.com,布布扣

六、采用URI API链接到高德mobile地图

在点击列表，和点击麻点图的时候，采取URI API的方式调取地图。

这样我们只需要知道一个经纬度，就可以调取地图。

示例：

http://mo.amap.com/?q=31.234527,121.287689&name=名字

列表调取mo的代码：

//回调函数-成功
function cloudSearch_CallBack(data) {   
    var resultStr="";  
    var resultArr = data.datas;  
    var resultNum = resultArr.length;  
    for (var i = 0; i < resultNum; i++) {    
        resultStr += "<div class=\"item\">";
        resultStr += "<a href=‘http://mo.amap.com/?q=" + resultArr[i]._location.getLat() + "," + resultArr[i]._location.getLng() + "&name=" + resultArr[i]._name + "‘><h3>" + (i+1) + "、" + resultArr[i]._name + "</h3></a>";        
        resultStr += "<p>地址：" + resultArr[i]._address + "</p>";        
        resultStr += "<p>电话：" + resultArr[i].tel + "</p>";        
        resultStr += "</div>";        
    }  
    document.getElementById("list").innerHTML = resultStr;  
}

点击麻点图，出现信息窗口，调取高德mo：

AMap.event.addListener(cloudDataLayer, ‘click‘, function (result) {
            var clouddata = result.data;            
            //云图麻点
            var infoWindow = new AMap.InfoWindow({
                content: "<a href=‘http://mo.amap.com/?q=" + clouddata._location.getLat() + "," + clouddata._location.getLng() + "&name=" + clouddata._name + "‘><h3>" + clouddata._name + "</h3></a>" + "<p>地址：" + clouddata._address + "</p>" + "<p>电话：" + clouddata.tel + "</p>",
                size:new AMap.Size(300, 0),
                autoMove:true,
                offset:new AMap.Pixel(0,-5)
            });
            infoWindow.open(mapObj, clouddata._location);            
        });

高德mo示意图：

bubuko.com,布布扣

七、城市切换

城市切换的时候，云图层展示，和云检索list要分开写。

//索引云图
function getType(iPrivance){
    if(iPrivance=="全国"){
        mapObj.setZoomAndCenter(4,new AMap.LngLat(114.433594,33.651208));
        myCloudList(‘‘);
        var op={
            query:{keywords:""}
        };
        cloudDataLayer.setOptions(op);
    }else{
        myCloudList(iPrivance);
        var op={
            query:{keywords:iPrivance}
        };
        cloudDataLayer.setOptions(op);
        placeSearch(iPrivance);
    }
}

地图展示完毕之后，需要重新设置中心点。

//城市查询
function placeSearch(id) {  
    var MSearch;  
    mapObj.plugin(["AMap.PlaceSearch"], function() {          
        MSearch = new AMap.PlaceSearch({ //构造地点查询类  
            pageSize:1,  
            pageIndex:1,  
            city:"" //城市  
        });   
        AMap.event.addListener(MSearch, "complete", keywordSearch_CallBack);//返回地点查询结果  
        MSearch.search(id); //关键字查询  
    });  
}  
//城市查询后定位  
function keywordSearch_CallBack(data) {  
    var iPoint = data.poiList.pois[0].location;
    mapObj.setZoomAndCenter(10,iPoint);
}