【云图】自有数据的多边形检索(云检索)
摘要:记录每天的生活轨迹,分享美食心得,哪里有免费停车,制作班级通讯录等等,都可以用到云图。无论你是开发者,还是app用户,都可以用云图制作一张属于你的专属地图。
---------------------------------------------------------------------------------------------------------
一、通过坐标拾取工具得到经纬度:
http://zhaoziang.com/amap/picpoint.html
(当然,如果你是开发者,你可以使用定位SDK,获取自己的经纬度,详见:http://api.amap.com/location/index )
二、建立自己的数据表
( 数据保存为CSV格式哟)
tag,name,lng,lat,tel,content 免费停车场,免费停车场001,116.430359,39.958175,010-52294832,停过5次没贴条 免费停车场,免费停车场002,116.279297,40.00132,010-52294832,停过1次没贴条 免费停车场,免费停车场003,116.202393,39.825413,010-52294832,停过2次没贴条 免费停车场,免费停车场004,116.564941,39.835959,010-52294832,停过7次没贴条 免费停车场,免费停车场005,116.437225,39.806426,010-52294832,停过20次没贴条 通讯录,酸奶小妹,116.441345,39.961333,18393727348,喝酸奶补钙 通讯录,吴蔚,116.374054,39.957122,15000038375,蹦跶的幽默感 通讯录,王倩,116.233978,39.943436,1348377294,房姐白富美 通讯录,张小颖,116.353455,39.929748,1869393933,精明俏主妇 美食记录,望京总店马兰拉面,116.183167,40.022356,010-39382872,嘴巴起泡都要吃!西安辣椒爽到翻! 美食记录,绿茶,116.411133,39.992904,010-39382872,就是便宜啊,麻婆豆腐才8元。港丽你敢这么卖麽? 美食记录,西贝莜面村,116.507263,39.855992,010-39382872,猜拳赢了115元!老板叫了11个黄馍馍,11个莜面! 美食记录,酷圣石,116.133728,39.880235,010-39382872,K总最爱的酷石头,全北京最好吃冰淇淋。其实量太大,吃不完就化掉了。 美食记录,吉野家,116.336975,39.886558,010-39382872,有学生卡啊,就去买啊。 美食记录,鹿港小镇,116.383667,39.916056,010-39382872,海南鸡饭比三亚的还好吃!爱,赞! 美食记录,星巴克,116.523743,40.008683,010-39382872,如果不是傻2的买了2张98的会员卡,你以为我会去消费麽! 旅行记录,天安门,116.483917,39.91395,010-283764648,我爱北京天安门 旅行记录,红螺寺,116.419373,39.941331,010-283764648,爬山,没看到寺庙 旅行记录,大觉寺,116.411133,39.889719,010-283764648,玉兰花美,银杏树大 旅行记录,鸟巢,116.27655,39.838068,010-283764648,住的地方,空气好点 旅行记录,大兴西瓜村,116.433105,39.785323,010-283764648,西瓜贵死人
将数据导入云图:
http://yuntu.amap.com/datamanager/index.html
当然,如果你没那么多记录,一次不能导入那么多数据的话。你可以每天记录一点点哟!
点击右上角的按钮,可以手工输入一个点哦!
三、建立索引(这步灰常重要!很多开发者因为没建立索引,而导致无法检索到自己数据哦)
文本索引
塞选排序索引
四、好啦,要开始写代码啦。
不用担心,我都写好在这里了,你直接copy去用吧。
当然更多复杂功能,你可以看看官网的开发指南啊,类参考啊,示例啊。http://api.amap.com/yuntu/guide
(如果你是移动端的开发者,可以使用REST API,就是webservice服务,来获取json数据,并展示在自己的应用上。)
显示云图层:
var mapObj; //初始化地图对象,加载地图 function mapInit(){ mapObj = new AMap.Map("iMap",{center:new AMap.LngLat(116.39946,39.907629),level:10}); addCloudLayer(); //用于展示麻点图 } //叠加云数据图层 function addCloudLayer() { //清除地图上数据 mapObj.clearMap();//加载云图层插件 mapObj.plugin('AMap.CloudDataLayer', function () { var layerOptions = { query:{keywords: ''}, clickable:true }; cloudDataLayer = new AMap.CloudDataLayer('533ccc56e4b08ebff7d539eb', layerOptions); //实例化云图层类 cloudDataLayer.setMap(mapObj); //叠加云图层到地图 AMap.event.addListener(cloudDataLayer, 'click', function (result) { var clouddata = result.data; var infoWindow = new AMap.InfoWindow({ content:"<h3>"+ clouddata._name + "</h3>" + "<p>分类:" + clouddata.tag + "</p><p>一句话:"+ clouddata.content +"</p>", size:new AMap.Size(300, 0), autoMove:true, offset:new AMap.Pixel(0,-5) }); infoWindow.open(mapObj, clouddata._location); }); AMap.event.addListener(mapObj,"click",function(){mapObj.clearInfoWindow();}); }); }
清除图层
//清除图层 function clearMap(){ cloudDataLayer.setMap(null); }
这次清除图层之后,要再次显示图层,需要重新建立地图对应关系。
cloudDataLayer.setMap(mapObj);
通过索引渲染图层,实时渲染的哦
//索引检索 function getType(tag){ cloudDataLayer.setMap(mapObj);var op={query:{keywords:tag}}cloudDataLayer.setOptions(op); }
效果展示图:
demo地址:http://zhaoziang.com/amap/mydata.html
注册你自己的key,填在源代码里哦:http://api.amap.com/key/index
全部源代码:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>酸奶小妹-毕设-自有数据</title> <style type="text/css"> div,h2{border:none;padding:0;margin:0;line-height:1em;} #iMap{height:500px;width:600px;float:left;} .info{width:300px;float:left;margin:0 0 0 10px;height:500px;} label{width:80px;float:left;} .menu a{text-decoration:none;} .detail{border:1px solid #33ffef;padding:10px 0;display:none;} </style> <script language="javascript" src="http://webapi.amap.com/maps?v=1.2&key=填写你的key"></script> </head> <body onLoad="mapInit()"> <div id="iMap"></div><div class="info" id="info"><h1>查询自己的数据</h1><div class="menu"><p><a href="javascript:void(0);" onclick="getType('免费停车场|通讯录|美食记录|旅行记录');"> 全部自有数据</a></p><p><a href="javascript:void(0);" onclick="clearMap();"> 清除图层</a></p><p><a href="javascript:void(0);" onclick="getType('免费停车场')"> 免费停车场</a><a href="javascript:void(0);" onclick="getType('通讯录')"> 通讯录</a><a href="javascript:void(0);" onclick="getType('美食记录')"> 美食记录</a><a href="javascript:void(0);" onclick="getType('旅行记录')"> 旅行记录</a><p></div><div class="detail" id="detail"></div></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"> var mapObj; var keywords; var cloudDataLayer; var marker = new Array(); var windowsArr = new Array(); //初始化地图对象,加载地图 function mapInit(){ mapObj = new AMap.Map("iMap",{center:new AMap.LngLat(116.39946,39.907629),level:10}); addCloudLayer(); //用于展示麻点图 cloudSearch(); //查询出来的数据,用于展示在右侧详细数据 } function cloudSearch(){mapObj.clearMap(); var arr = new Array(); //绘制多边形 arr.push(new AMap.LngLat(116.074677,40.121141)); arr.push(new AMap.LngLat(116.065063,39.702961)); arr.push(new AMap.LngLat(116.754456,39.718807)); arr.push(new AMap.LngLat(116.721497,40.135841)); var polygon = new AMap.Polygon({ map:mapObj, path:arr, strokeColor:"#3366FF", strokeOpacity:0.2, strokeWeight:2, fillColor: "#3366FF", fillOpacity: 0.2 }); var search; var searchOptions = { keywords:'免费停车场', //orderBy:'_id:ASC' }; //加载CloudDataSearch服务插件 mapObj.plugin(["AMap.CloudDataSearch"], function() { search = new AMap.CloudDataSearch('533ccc56e4b08ebff7d539eb', searchOptions); //构造云数据检索类 AMap.event.addListener(search, "complete", cloudSearch_CallBack); //查询成功时的回调函数 AMap.event.addListener(search, "error", errorInfo); //查询失败时的回调函数 search.searchInPolygon(arr); //多边形检索 }); } //检索成功回调函数 function cloudSearch_CallBack(data) { var resultStr=""; var resultArr = data.datas; var resultNum = resultArr.length; for (var i = 0; i < resultNum; i++) { resultStr += "分类:" + resultArr[i].tag; addmarker(i, resultArr[i]); } mapObj.setFitView(); document.getElementById("detail").innerHTML = resultStr; } //检索错误回调函数 function errorInfo(data) { resultStr = data.info; document.getElementById("detail").innerHTML = resultStr; } //叠加云数据图层 function addCloudLayer() { //清除地图上数据 mapObj.clearMap();//加载云图层插件 mapObj.plugin('AMap.CloudDataLayer', function () { var layerOptions = { query:{keywords: ''}, clickable:true }; cloudDataLayer = new AMap.CloudDataLayer('533ccc56e4b08ebff7d539eb', layerOptions); //实例化云图层类 cloudDataLayer.setMap(mapObj); //叠加云图层到地图 AMap.event.addListener(cloudDataLayer, 'click', function (result) { var clouddata = result.data; var infoWindow = new AMap.InfoWindow({ content:"<h3>"+ clouddata._name + "</h3>" + "<p>分类:" + clouddata.tag + "</p><p>一句话:"+ clouddata.content +"</p>", size:new AMap.Size(300, 0), autoMove:true, offset:new AMap.Pixel(0,-5) }); infoWindow.open(mapObj, clouddata._location); document.getElementById("detail").innerHTML = "<h3>" + clouddata._id + "." + clouddata._name + "</h3><p>分类:" + clouddata.tag + "</p><p>一句话:" + clouddata.content + "</p>";}); AMap.event.addListener(mapObj,"click",function(){mapObj.clearInfoWindow();}); }); } //索引检索 function getType(tag){ cloudDataLayer.setMap(mapObj);var op={query:{keywords:tag}}cloudDataLayer.setOptions(op); } //清除图层 function clearMap(){ cloudDataLayer.setMap(null); } //点击空白处关闭信息窗口 document.getElementById("info").onclick = function(){mapObj.clearInfoWindow(); } </script> </html>
#微博上的广告#
使用高德云图轻松定制属于你的个性地图,分分钟玩转地图开发,零基础小白&程序猿一样潇洒用!
我刚刚制作了一张地图,快来看看吧:链接,想不想也制作一张属于你的地图? 猛戳: http://yuntu.amap.com/datamanager
【云图】自有数据的多边形检索(云检索)相关推荐
- 【Android】3.22 示例22--LBS云检索功能
分类:C#.Android.VS2015.百度地图应用: 创建日期:2016-02-04 简介:介绍如何使用LBS.云检索用户自有数据. 详述: (1)LBS.云是百度地图针对LBS开发者推出的平台级 ...
- 企业数据存储办公企业云盘是最佳选择
企业数据存储最佳选择,Yotta企业云盘!知识经济的时代,个人尚且能攒下这么多的资料,更别说企业了.伴随企业的成长,文件的数量和种类会越来越多,这些重要的知识"财富"需要好好地管理 ...
- 志翔科技用大数据技术为行业云构建“安全之翼”...
云安全越来越火了. 一个可以佐证的细节是--在今年3月,被誉为全球安全市场风向标的旧金山RSA大会上,一个主题为"云上做网络安全"的论坛快开始了,门口仍然有三排人等待入场.一位大厂 ...
- PostgreSQL 一复合查询SQL优化例子 - (多个exists , 范围检索 , IN检索 , 模糊检索 组合)...
标签 PostgreSQL , 多个exists , 范围检索 , IN检索 , 模糊检索 , 组合 , gin , recheck , filter , subplan 背景 当一个SQL包含复杂的 ...
- Python基于WordCloud词云图的数据可视化分析 词云图的基本使用 政府工作报告分析
Python基于WordCloud词云图的数据可视化分析 词云图的基本使用 政府工作报告分析 文章目录 1.词云图简介 2.wordcloud库的安装 3.WordCloud的主要参数说明 4.绘制词 ...
- 志翔科技用大数据技术为行业云构建“安全之翼”
云安全越来越火了. 一个可以佐证的细节是--在今年3月,被誉为全球安全市场风向标的旧金山RSA大会上,一个主题为"云上做网络安全"的论坛快开始了,门口仍然有三排人等待入场.一位大厂 ...
- 【云图说合集】阅识风云之云图说系列,是您了解华为云的必备利器
类别 服务名 云图说链接 引言 引言 [云图说]重磅开启:天啦噜,毕加索都干不出这种事 [云图说]第100期 元旦快乐!陪您跨年的华为云"云图说",了解一下 开篇 华为云 [云 ...
- 计算机光盘检索,光盘检索
光盘检索(CD-ROM Retrieval) [编辑] 什么是光盘检索 光盘检索是指利用计算机设备对只读式光盘(CD-ROM)数据库进行检索. [编辑] 光盘检索的特点 1.检索速度快.光盘数据库都有 ...
- 利用jieba库和wordcloud库,进行中文词频统计并利用词云图进行数据可视化
目录 利用jieba库和wordcloud库,进行中文词频统计并利用词云图进行数据可视化 安装jieba库 安装wordcloud 打开pycharm 编写代码 利用jieba库和wordcloud库 ...
最新文章
- HNUSTOJ-1674 水果消除(搜索或并查集)
- LSI IOC,ROC,HBA,Raid Adapter
- 设计模式(3)-装扮你的类(装饰模式)
- CSS常用样式及示例
- 遗传算法求最短路径(旅行商问题)python实现
- 算法导论读书笔记(8)
- Unity Editor Toolbar 编辑器扩展
- Object.create()和深拷贝
- 计网实验1--配置路由
- 原型模式,孙悟空都会用,猴毛变出的小猴子!
- 跟着Code走,详解Symbian Client/Server架构
- 浅析Servlet中的四大作用域
- 主流邮箱的反垃圾邮件技术
- 【前端基础面试题】如何用CSS画一个三角形(详解)
- 微信小程序webview内嵌h5页面
- python中quit函数用法_quit(code=None)函数和exit(code=None)函数的使用举例
- 笨鸟的平凡之路-简单理解什么是_consumers_offsets
- 算法训练第五十天 | 123.买卖股票的最佳时机III、188.买卖股票的最佳时机IV
- 2017精选BIM案例分享介绍及下载
- C语言 日本某地发生了一件谋杀案,警察通过排查确定杀人凶手必为4个嫌疑犯的一个。
热门文章
- 鸿蒙系统和安卓的区别在哪里,有什么不同
- liunx定时清理运行内存脚本
- 如何选择适合自己数据的统计检验方法
- 使用阿里云实现营业执照的查询
- 四羧基锌酞菁(ZnC4Pc),Zn-taPc 的荧光激发光谱介绍,齐岳生物供应酞菁材料
- 分数阶微分方程c语言,第一讲分数阶微分方程.PDF
- MonkeyPatchWarning: Monkey-patching ssl after ssl has already been imported may lead to errors
- java opencv磨皮算法_美肤磨皮算法OpenCV3实现
- 三菱FX3U——ST编程FOR循环
- c++工具库大全(值得收藏)