【雲圖】如何製作全國KTV查詢系統？

酸奶小妹發表於2014-06-05

摘要：本文以【唱吧】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

用 python 製作全國身份證號驗證及查詢系統
2020-04-04
Python
【雲圖】如何製作東莞酒店地圖？
2014-04-11
地圖
基礎的學生成績查詢系統製作問題
2009-03-17
QNX 如何製作目標系統，製作系統映象，燒寫系統檔案
2017-07-08
win10系統如何利用PicsArt製作GIF圖【圖文教程】
2020-04-22
Win10
全國郵編區號查詢系統的破解！ (550字)
2001-02-14
基於RubyOnRails2.0的全國影訊查詢系統
2008-03-03
AI
華納雲：linux系統中如何查詢oracle錯誤日誌
2023-11-23
LinuxOracle
mysql 標量子查詢和現金盤程式製作非法子查詢
2019-09-16
MySql
win10系統如何查詢MTU值_win10系統查詢MTU值的方法
2020-03-01
Win10
請教如何提高查詢系統的效能？
2004-07-14
如何在excel製作流程圖
2019-10-28
Excel流程圖
根據作業系統程式號，查詢sql語句
2017-01-23
作業系統SQL
如何製作網點地圖，網點分佈圖怎麼製作
2021-07-15
地圖
【雲圖】如何製作附近實體店的地圖？-微信微博支付寶
2014-06-18
地圖
win10系統下ico圖示怎麼製作_win10製作ico圖示的教程
2019-12-04
Win10
資訊圖製作教程：如何製作美麗的輻射圖？
2013-11-12
oracle系統表查詢
2007-01-11
Oracle
linux查詢作業系統資訊（CPU、記憶體、硬碟）
2020-12-22
Linux作業系統記憶體硬碟
透過作業系統PID查詢執行的SQL
2017-04-05
作業系統SQL
如何製作京東自提點地圖？
2015-06-17
地圖
用DELPHI製作線上程式升級資訊查詢 (轉)
2007-12-12
Linux 製作系統映象
2020-10-30
Linux
u盤製作系統盤
2018-06-23
【雲圖】如何設定微信裡的全國實體店地圖？
2014-06-10
地圖
如何製作室內地圖，室內地圖繪製工具
2021-06-09
地圖
如何製作動態圖，GIF怎麼在電腦上製作
2019-05-20
自己怎麼製作GIF表情包 QQ動態圖如何製作
2018-11-08
windows10如何備份系統_windows10製作系統備份
2019-11-24
Windows
AIX5.3作業系統安裝劃分及常用查詢
2009-06-28
AI作業系統
查詢系統關鍵資訊
2014-03-26
綜合資訊查詢系統IISS
2009-07-25
攻略：如何製作動態的GIF圖
2019-05-28
如何製作有趣的GIF動態圖
2019-05-09
如何製作win10系統u盤啟動盤_win10系統U盤啟動盤製作步驟
2021-11-05
Win10
jQuery製作淘寶商城商品列表多條件查詢功能
2016-10-14
jQuery
python製作查詢單詞翻譯的指令碼
2014-07-07
Python指令碼
Word中巧用查詢/替換功能製作試卷(轉)
2007-08-13

【雲圖】如何製作全國KTV查詢系統？

相關文章