【云图】自有数据的多边形检索（云检索）

摘要：记录每天的生活轨迹，分享美食心得，哪里有免费停车，制作班级通讯录等等，都可以用到云图。无论你是开发者，还是app用户，都可以用云图制作一张属于你的专属地图。

---------------------------------------------------------------------------------------------------------

一、通过坐标拾取工具得到经纬度：

（当然，如果你是开发者，你可以使用定位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

时间： 2024-11-05 19:34:29

【云图】自有数据的多边形检索（云检索）的相关文章

高德云检索

云检索: 上一节我们简单介绍了申请key之类的介绍. 今天就讲一下在android中怎么实现云检索. 方法一: 在这里city=全国:表示搜索整个表内容 TABLEID:可以参考上一节内容 WEBAPI:就是web服务api的key public void doGet(String keywords) throws UnsupportedEncodingException { String URL= "http://yuntuapi.amap.com/datasearch/local?"

HBase 实战(2)--时间序列检索和面检索的应用场景实战

前言: 作为Hadoop生态系统中重要的一员, HBase作为分布式列式存储, 在线实时处理的特性, 备受瞩目, 将来能在很多应用场景, 取代传统关系型数据库的江湖地位. 本篇主要讲述面向时间序列/面检索的应用场景时, 如何利用HBase的特性去处理和优化. 构造应用场景某气象局对各个站点的信息进行采集和汇总, 这些信息包括站点id, 时间点, 采集要素(要素特别多). 然后对这些采集的数据, 提出如下检索需求: 1). 时间序列检索(检索出该站点的在某个时间范围内的全要素信息) 2). 面检

AWS海外数据中心到阿里云深圳-文件传输对比评测集合

近日,我们针对AWS海外各数据中心到阿里云深圳,做了一系列大文件传输对比评测.评测对比软件 FTP传输方案:ftp客户端--FileZillaftp服务端--FileZilla Server软件下载地址:https://filezilla-project.org/index.php 镭速传输方案:软件下载地址:Windows : https://www.raysync.cn/support_for_windows.htmlLinux: https://www.raysync.cn/support

大数据平台Hive数据迁移至阿里云ODPS平台流程与问题记录

一.背景介绍最近几天,接到公司的一个将当前大数据平台数据全部迁移到阿里云ODPS平台上的任务.而申请的这个ODPS平台是属于政务内网的,因考虑到安全问题当前的大数据平台与阿里云ODPS的网络是不通的,所以不能使用数据采集工作流模板. 然而,考虑到原大数据平台数据量并不是很大,可以通过将原大数据平台数据导出到CSV文件,然后再将CSV文件导入到ODPS平台.在这个过程中踩的坑有点多,所以想写篇文档作为记录. 二.大数据平台Hive数据导出到本地编写export_data.sh脚本如下: #!/

阿里云上数据统一备份 – 混合云备份服务解析

近年来,随着越来越多的企业从传统经济向数字经济转型,云已经渐渐成为数据经济IT新常态.核心业务系统上云,云上的业务创新,这些都产生了大量的业务数据,这些数据也成为了企业最重要的资产.资源. 任何数据损失都可能对业务带来严重影响,但是勒索病毒,黑客攻击,人为误操作,运维失误,乃至机房灾难的威胁随时可能带来数据损失.备份是数据保护的核心手段,更是等级保护,行业合规的硬性要求. 阿里云混合云备份服务(Hybrid Backup Recovery, 简称HBR)是一种简单易用且高性价比的云备份服务,可以

高德云检索之多个筛选条件

之前检索方式是以keyword的形式去检索,只要满足索引管理中“文本索引”中的任意一个column对应的值匹配就可以. 那么如何通过某一个column的值来判断呢? 接下来我们通过条件筛选的是如何实现的我们需要在url中通过filter命令: filter对应的筛选排序索引的详解 (http://lbs.amap.com/yuntu/guide/beginners/#yunntu_filter_sort) 筛选条件: 支持对建立了排序筛选索引的字段进行筛选(请在数据管理台中为字段建立排序筛

下一代智能数据工厂，阿里云发布全新DataWorks

摘要: 大数据的开发能力已经成为企业的核心竞争力之一, 企业对数据资产的管理.加工.利用的诉求也越来越强烈. 9月5日,阿里云发布了DataWorks V2版本, 可提升数据开发的效率并简化数据操作,为企业提供了安全可靠的一站式大数据智能云研发平台. 大数据的开发能力已经成为企业的核心竞争力之一, 企业对数据资产的管理.加工.利用的诉求也越来越强烈. 9月5日,阿里云发布了DataWorks V2版本, 可提升数据开发的效率并简化数据操作,为企业提供了安全可靠的一站式大数据智能云研发平台. 众所

洞悉大数据：Hadoop和云分析七大误解

七大误解:大数据与hadoop 对于Hadoop技术而言,可以说是开源领域的传奇,然而如今业界还伴随着一些流言,这些流言可能会导致IT高管们带着“有色”的观点去制定策略. 从IDC分析师报告中2013年数据存储上的增长速度将达到53.4%,AT&T更是声称无线数据的流量在过去的5年内增长200倍,从互联网内容.电子邮件.应用通知.社交消息以及每天接收的消息都在显着的增长,这也是众多大企业都聚焦大数据的原因所在. 毫无疑问,Hadoop成为解决大数据需求的主要投资领域之一,而类似Facebook等

飞天政务开放体系：数据为中心的云上政务平台与创新生态

在2017云栖大会-南京峰会上,阿里云政府业务架构总监史大治做了题为<飞天政务开放体系与智能服务>的分享.对于政务工作而言,面临着政务服务与政务数据的深度.广度不断上升,丰富的技术和应用不断涌现,业务不断融合,行政能力亟待提升的挑战.而互联网服务渠道的开通,让电子政务的建设,从对内(政府机关)的流程.管理建设,转向对外(人民群众)的服务建设.那么如何理解"政务云"呢?其实可以看做是以数据为中心的,云上政务平台与创新生态.在政务云上,结合阿里云飞天产品的应用,政务智能服务的&