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

時間 2019-12-08

標籤雲圖如何製做全國 ktv 查詢系統简体版

原文原文鏈接

摘要：本文以【唱吧】531麥霸音樂節爲案例，詳細解讀了如何導入自有數據到高德雲圖，並進行檢索和展現。最後，調起高德mobile地圖來進行路線規劃和周邊查詢。javascript

本案例能夠應用在微信開發平臺，支付寶公衆服務上，適合餐飲商家，汽車4S店，銀行，停車場等業務。php

因爲使用高德雲圖+URI API的方式實現，開發者無需進行繁瑣的數據庫操做，便可實現自有數據的存儲與檢索。css

1、數據準備html

從唱吧531麥霸節官網得到數據：http://changba.com/yunying/ktvStaticList.phpjava

拷貝到excel，另存爲CSV格式，並改爲UTF-8或者GBK編碼。web

2、導入數據數據庫

登陸雲圖：http://yuntu.amap.com/datamanager/index.htmlapi

點擊新建地圖：微信

導入剛纔的數據：微信開發

點擊預覽：

出現全國KTV分佈圖：

3、UE設計圖

一、對於KTV的展現，有列表模式和地圖模式2種。

二、按照城市檢索並展現KTV數據。

三、點擊某個KTV，跳轉到高德mobile地圖，進行路線規劃。

4、雲圖展現全國KTV

採用雲圖層的方法，將麻點圖展現出來。

複製代碼
//地圖-雲圖層
mapObj.plugin('AMap.CloudDataLayer', function () {
var layerOptions = {
query:{keywords: ''},
clickable:true
};
cloudDataLayer = new AMap.CloudDataLayer('538d71fee4b04192f1f4de77', layerOptions); //實例化雲圖層類
cloudDataLayer.setMap(mapObj); //疊加雲圖層到地圖
});
複製代碼

示例圖：

5、列表展現北京市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); //周邊檢索
});
複製代碼

示例圖：

6、採用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 += "

"; resultStr += "

" + (i+1) + "、" + resultArr[i]._name + "

"; resultStr += "

地址：" + resultArr[i]._address + "

"; resultStr += "

電話：" + resultArr[i].tel + "

"; resultStr += "

";
}
document.getElementById("list").innerHTML = resultStr;
}
複製代碼

點擊麻點圖，出現信息窗口，調取高德mo：

複製代碼
AMap.event.addListener(cloudDataLayer, 'click', function (result) {
var clouddata = result.data;
//雲圖麻點
var infoWindow = new AMap.InfoWindow({
content: "

" + clouddata._name + "

" + "

地址：" + clouddata._address + "

" + "

電話：" + clouddata.tel + "

",
size:new AMap.Size(300, 0),
autoMove:true,
offset:new AMap.Pixel(0,-5)
});
infoWindow.open(mapObj, clouddata._location);
});
複製代碼

高德mo示意圖：

7、城市切換

城市切換的時候，雲圖層展現，和雲檢索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);
}
複製代碼

8、所有源代碼

複製代碼
<!DOCTYPE HTML>
<html>
<head>

<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()">

</body>

" + clouddata._name + "

" + "

地址：" + clouddata._address + "

" + "

電話：" + clouddata.tel + "

", 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 "; resultStr += "

" + (i+1) + "、" + resultArr[i]._name + "

"; resultStr += "

地址：" + resultArr[i]._address + "

"; resultStr += "

電話：" + resultArr[i].tel + "

"; resultStr += ""; } 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