【云图】如何制作全国×××查询系统?
摘要:本文以【唱吧】531麦霸音乐节为案例,详细解读了如何导入自有数据到高德云图,并进行检索和展示。最后,调起高德mobile地图来进行路线规划和周边查询。
本案例可以应用在微信开发平台,支付宝公众服务上,适合餐饮商家,汽车4S店,银行,停车场等业务。
由于使用高德云图+URI API的方式实现,开发者无需进行繁琐的数据库操作,即可实现自有数据的存储与检索。
效果图:
--------------------------------------------------------------
一、数据准备
从唱吧531麦霸节官网获得数据:http://changba.com/yunying/ktvStaticList.php
拷贝到excel,另存为CSV格式,并改成UTF-8或者GBK编码。
二、导入数据
登录云图:http://yuntu.amap.com/datamanager/index.html
点击新建地图:
导入刚才的数据:
点击预览:
出现全国×××分布图:
三、UE设计图
1、对于×××的展示,有列表模式和地图模式2种。
2、按照城市检索并展示×××数据。
3、点击某个×××,跳转到高德mobile地图,进行路线规划。
四、云图展示全国×××
采用云图层的方法,将麻点图展示出来。
//地图-云图层mapObj.plugin('AMap.CloudDataLayer', function () {var layerOptions = {query:{keywords: ''},clickable:true};cloudDataLayer = new AMap.CloudDataLayer('538d71fee4b04192f1f4de77', layerOptions); //实例化云图层类cloudDataLayer.setMap(mapObj); //叠加云图层到地图 });
示例图:
五、列表展示北京市×××
用云检索,检索出北京市的×××。
//列表 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"> </div><div class="header clearfix"><select οnchange="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 οnclick="display('list');" href="javascript:void(0);">列表模式</a><a οnclick="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>
转载于:https://blog.51cto.com/8920932/1536129
【云图】如何制作全国×××查询系统?相关推荐
- excel制作录入和查询系统_excel表格制作成绩查询系统攻略:让学生隐私更安全!
对于班主任来说,无论是收集学生信息,还是发布考试成绩,用得最多的就是excel表格了!很多老师在发布成绩的时候,多半会把统计好的表格直接发到群里让学生自行查询,这样一来虽然省事,但却极易招到投诉!下面 ...
- python快递费用计算_Python制作快递查询系统,来感受到了Python的强大!
原标题:Python制作快递查询系统,来感受到了Python的强大! 导语 今天来做个简答的python案例,利用Python制作一个简单的快递查询系统. 让我们愉快地开始吧~ 开发工具 Python ...
- c语言成绩查询系统_如何用Excel制作成绩查询系统-Leo老师
在工作学习中,我们经常会遇到如何用Excel制作成绩查询系统这样的问题.谢觉哉说过:看书的目的,在把书变成我所有.因此,面对如何用Excel制作成绩查询系统我们应该有努力探索的精神.书到用时方恨少,事 ...
- 【超牛】利用Excel制作身份证查询系统!
今天,易老师教大家整个好玩的东西出来,那就是身份证查询系统,只要你输入身份证号码,就会自动显示年龄.出生年月日.生肖.星座以及所在地区等信息,是不是非常的过瘾呢? 当然,要完成这样一个身份证查询系统, ...
- 微信小程序制作天气查询系统
一.实验目标 1.掌握服务器域名配置和临时服务器部署: 2.掌握 wx.request 接口的用法. 二.实验步骤 (列出实验的关键步骤.代码解析.截图.) 和风天气API密钥申请 2.在微信小程序上 ...
- java简易制作图书查询系统
要实现的功能: 点击图书查询,在页面出现要查询的图书详情信息 实现思路: 修改一下sql语句即可,通过ArrayList将所有查询结果进行存储,在model层的构造方法中修改输出的toString方法 ...
- Python制作快递查询系统
代码 import json from tkinter import * import requests def getType(postId):url='http://www.kuaidi100.c ...
- 物流信息不更新?难道丢了?Python快递查询系统已上线,爆赞!
导语 随着网购的广泛普及,现在大部分年轻人都喜欢上了网购的方式. 很多东西物美价廉,出不出户也能满足你的购买需求! 尤其是中秋来临,哪些假期短回不了家的也想给家人带点儿中秋礼物~ 这不?赶上中秋了, ...
- 做成绩查询系统,教你去除excel表格粘贴函数。
在工作学习中,我们经常会遇到做成绩查询系统表格函数去不掉?1招教你去除excel表格粘贴函数!这样的问题.爱默生说过:凡事欲其成功,必要付出代价:奋斗.因此,面对做成绩查询系统表格函数去不掉?1招教你 ...
最新文章
- luogu P1027 Car的旅行路线
- 机器学习面试知识点汇总(Machine Learning Core Concepts Collection)
- 斯坦福CS231n项目实战(三):Softmax线性分类
- php图片旋转验证码,如何用php生成扭曲及旋转的验证码图片
- linux-Centos 7下bond与vlan技术的结合
- MySQL Innodb表导致死锁日志情况分析与归纳
- HDFS Federation
- c++怎么可以在二进制文件中读取带string的数据_文件处理 | csv文件读写
- FE File Explorer Pro for mac(文件管理器)3.1.1
- 配置LVS + Keepalived高可用负载均衡集群之图文教程
- Power Management of Hybrid DRAM/PRAM-Based Main Memory
- word方框(□)打勾(√)方法
- 转载双显示器显示模式介绍
- MySQL学习笔记-从基础到进阶
- 元宇宙持续火爆,各地纷纷布局元宇宙
- 有关于成长的七个关键词
- 可解释性研究 -LRP-for-LSTM
- 求水仙花数C语言实现
- Mac下brew及brew-cask安装使用
- 计算机网络实验——路由器基本配置
热门文章
- js解决浏览器打印自动分页的问题
- HBase中此类异常解决记录org.apache.hadoop.ipc.RemoteException(java.io.IOException):
- Chrome浏览器showModalDialog兼容性及解决方案
- “else if”是否比“switch()case”更快? [重复]
- 绝对位置,但相对于父位置
- win11为何七代酷睿无法升级 Windows11七代酷睿无法升级的解答
- python requests urlencode_关于requests的urlencode问题
- 分支限界法时间复杂度_数据结构时间复杂度的摊还分析(均摊法)之一:基础...
- 履带式机器人运动模型及应用分析(图片版)
- ❤️《分布式 Dubbo+Zookenper+SpringBoot》(建议收藏)❤️