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

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

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

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

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

效果图：

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

一、数据准备

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

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

二、导入数据

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

点击新建地图：

导入刚才的数据：

点击预览：

出现全国KTV分布图：

三、UE设计图

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

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

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

四、云图展示全国KTV

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

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

示例图：

五、列表展示北京市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); //周边检索
    });

示例图：

六、采用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示意图：

七、城市切换

城市切换的时候，云图层展示，和云检索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);
}

八、全部源代码

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>云图+mo</title>
<link rel="stylesheet" type="text/css" href="yuntumo.css" />
<script language="javascript" src="http://webapi.amap.com/maps?v=1.2&key=【您的key】"></script>
</head>
<body onLoad="mapInit()">
    <div id="lnglats">&nbsp;</div>
    <div class="header clearfix">
        <select onchange="getType(this.options[this.selectedIndex].text)" >
            <option>北京</option>
            <option>天津市</option>
            <option>上海市</option>
            <option>重庆市</option>
            <option>安徽省</option>
            <option>福建省</option>
            <option>广东省</option>
            <option>浙江省</option>
            <option>黑龙江省</option>
            <option>辽宁省</option>
            <option>吉林省</option>
            <option>河北省</option>
            <option>河南省</option>
            <option>山西省</option>
            <option>陕西省</option>
            <option>湖北省</option>
            <option>湖南省</option>
            <option>江苏省</option>
            <option>江西省</option>
            <option>四川省</option>
            <option>云南省</option>
            <option>内蒙古自治区</option>
            <option>全国</option>
        </select>
        <div class="btnChange">
            <a onclick="display('list');" href="javascript:void(0);">列表模式</a>
            <a onclick="display('map');" href="javascript:void(0);">地图模式</a>
        </div>
    </div>
    <div id="map"></div>
    <div id="list" style="display:none;">正在读取数据……</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">
function display(id){
    document.getElementById('map').style.display = 'none';
    document.getElementById('list').style.display = 'none';
    document.getElementById(id).style.display = 'block';
}
var mapObj;
var cloudDataLayer;
var cloudSearch;
var pBeijing = new AMap.LngLat(116.388474,39.934486);
//初始化地图对象，加载地图
function mapInit(){
    mapObj = new AMap.Map("map",{
    center: pBeijing, //地图中心点
    level:11  //地图显示的比例尺级别
    });
    myCloudMap();
    myCloudList("北京");
    AMap.event.addListener(mapObj,'click',getLnglat); //点击事件
}
//云图加载地图
function myCloudMap(){
    //地图-云图层
    mapObj.plugin('AMap.CloudDataLayer', function () {
        var layerOptions = {
            query:{keywords: '北京'},
            clickable:true
        };
        cloudDataLayer = new AMap.CloudDataLayer('538d71fee4b04192f1f4de77', layerOptions); //实例化云图层类
        cloudDataLayer.setMap(mapObj); //叠加云图层到地图

        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);
        });
    });
}
//云图加载列表
function myCloudList(id){
    //列表
    mapObj.plugin(["AMap.CloudDataSearch"], function() {
        //绘制多边形
        var arr = new Array();
        arr.push(new AMap.LngLat(75.585938,52.696361));
        arr.push(new AMap.LngLat(134.472656,53.956086));
        arr.push(new AMap.LngLat(129.726563,16.467695));
        arr.push(new AMap.LngLat(81.914063,20.13847));
        arr.push(new AMap.LngLat(75.585938,52.696361));
        var searchOptions = {
            keywords: id,
            pageSize:100
        };
        cloudSearch = new AMap.CloudDataSearch('538d71fee4b04192f1f4de77', searchOptions); //构造云数据检索类
        AMap.event.addListener(cloudSearch, "complete", cloudSearch_CallBack); //查询成功时的回调函数
        AMap.event.addListener(cloudSearch, "error", errorInfo); //查询失败时的回调函数
        cloudSearch.searchInPolygon(arr); //多边形检索
    });
}
//回调函数-成功
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;
}
//回调函数-失败
function errorInfo(data) {
    resultStr = data.info;
    document.getElementById("list").innerHTML = resultStr;
}
//鼠标点击，获取经纬度坐标
function getLnglat(e){
    var x = e.lnglat.getLng();
    var y = e.lnglat.getLat();
    document.getElementById("lnglats").innerHTML = x + "," + y;
}
//清空地图
function clearMap(){
    mapObj.clearMap();
    document.getElementById("list").innerHTML = '正在读取数据……';
}
//索引云图
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);
}
</script>
</html>

示例demo：http://zhaoziang.com/amap/yuntumo.html

时间： 2024-07-29 02:41:56

【云图】如何制作全国KTV查询系统？的相关文章

制作一个股票查询系统，股票行情数据从哪里抓取呢？请各位帮忙

问题描述制作一个股票查询系统,股票行情数据从哪里抓取呢?在自己设计得网页上,输入某支股票代码,能够即时看到当前行情,在随时变化.但是从哪里获取最新行情呢?有获取点吗?望帮忙提供! 解决方案这个很多公司都有借口的,但是好像要收费,还有种办法就是去扒取别人网站的信息,比如你在google输入某只股票,出来的信息进行扒取分析,筛选出你要的信息就可以了思路就是这么个思路,解决方案二:这个希望能帮助LZhttp://www.21andy.com/blog/20090530/1313.html解决方案三

【百度地图API】建立全国银行位置查询系统（四）——如何利用百度地图的数据生成自己的标注

原文:[百度地图API]建立全国银行位置查询系统(四)--如何利用百度地图的数据生成自己的标注摘要: 上一章留个悬念,"如果自己没有地理坐标的数据库,应该怎样制作银行的分布地图呢?" 答案就是,利用百度地图上的数据. ---------------------------------------------------------------------------------------------- 我们不用花大把时间写代码去跑数据,只需要利用百度地图API提供的免费接口,就可以

【百度地图API】建立全国银行位置查询系统（一）——如何创建地图

原文:[百度地图API]建立全国银行位置查询系统(一)--如何创建地图 <摘要>你将在第一章中学会以下知识: 如何创建一个网页文件怎样利用百度地图API建立一张2D地图,以及3D地图如何添加对地图进行鼠标和键盘操作的功能 ------------------------------------------------------------------------------------------------------------------- 一.创建网页文件粘贴以下代码至记事本中

使用XMLHTTP制作域名查询系统

<%On Error Resume NextServer.ScriptTimeOut=9999999Function getHTTPPage(Path) t = GetBody(Path) getHTTPPage=BytesToBstr(t,"GB2312")End function Function GetBody(url) on error resume next Set Retrieval = CreateObject(&quo

【百度地图API】建立全国银行位置查询系统（三）——如何在地图上添加银行标注

原文:[百度地图API]建立全国银行位置查询系统(三)--如何在地图上添加银行标注 <摘要>你将在第三章中学会以下知识: 如何在地图上添加带银行logo的标注?(你也可以换成商场logo,酒店logo等) 如何在标注上显示信息窗口,以及添加文字标签等其他覆盖物: 最后,介绍一个获取坐标的给力工具. ---------------------------------------------------------------------------------------------------

【百度地图API】建立全国银行位置查询系统（五）——如何更改百度地图的信息窗口内容？

原文:[百度地图API]建立全国银行位置查询系统(五)--如何更改百度地图的信息窗口内容? 摘要: 酷讯.搜房.去哪儿网等大型房产.旅游酒店网站,用的是百度的数据库,却显示了自定义的信息窗口内容,这是如何实现的呢? ------------------------------------------------------------------------------------------------------------------ 零.先来看看百度地图上的信息窗口长个什么样子在来看看

c#窗体应用程序-用C#的winform制作KTV点歌系统求各路大神点拨

问题描述用C#的winform制作KTV点歌系统求各路大神点拨怎么样改变窗体的外观,一直想制作扁平化的界面.怎么做呢? 解决方案你对中窗体右击属性嘛,对应有窗体外观属性的解决方案二: 这个得找专业UI公司做图片吧,然后修改控件的backgroundimage等属性才能实现

【百度地图API】建立全国银行位置查询系统（二）——怎样为地图添加控件

原文:[百度地图API]建立全国银行位置查询系统(二)--怎样为地图添加控件 <摘要>你将在第二章中学会以下知识: 使用手写代码的利器--notepad++: 如何为地图添加控件--鱼骨.鹰眼.比例尺.2D3D转换控件.版权控件. ----------------------------------------------------------------------------------------------------------------- 一.安装配置notepad++ 为什么

用Dreamweaver MX建立一个简单的图书查询系统

dreamweaver|查询系统最近公司为了充分利用图书资源,方便员工查询,决定在公司内部网上建立一个图书查询系统.考虑到公司图书不多,只有1千多册,且专业书居多的特点,我决定做两个查询条件:一个是根据图书类别来查询,用户只要选择相应的类别就可以显示出该类别的所有图书,这主要是面对对公司图书不熟悉的人:第二个是根据图书名称来查询,用户只要输入图书名,就可以快速的搜索到符合条件的所有图书. 方案已定,接下来就是用什么软件做及如何做的问题了.在这里,我选用了网页的形式,这样同事们只要打开浏览器,输