【云图】如何制做全国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