【云图】如何用云图制作APP（旅游类，美食记录，免费停车，通讯录等）

摘要：记录每天的生活轨迹，分享美食心得，哪里有免费停车，制作班级通讯录等等，都可以用到云图。无论你是开发者，还是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);" |通讯录|美食记录|旅行记录');"> 全部自有数据</a></p><p><a href="javascript:void(0);" οnclick="clearMap();"> 清除图层</a></p><p><a href="javascript:void(0);" οnclick="getType('免费停车场')"> 免费停车场</a><a href="javascript:void(0);" οnclick="getType('通讯录')"> 通讯录</a><a href="javascript:void(0);" οnclick="getType('美食记录')"> 美食记录</a><a href="javascript:void(0);" οnclick="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

转载于:https://blog.51cto.com/8920932/1422967

【云图】如何用云图制作APP（旅游类，美食记录，免费停车，通讯录等）相关推荐

UI设计大作业 Axure原型 “美食分享制作”app高保真原型设计
"美食分享制作"app 产品说明目标用户原型及交互说明产品说明 "美食分享制作"app是一款记录美食制作.分享美食.寻找美食制作教程为一体的美食应用. 目 ...
python制作微信个人二维码_如何用Python制作微信好友个性签名词云图
前言上次查看了微信好友的位置信息,想了想,还是不过瘾,于是就琢磨起了把微信好友的个性签名拿到,然后分词,接着分析词频,最后弄出词云图来. 1.环境说明 Win10 系统下 Python3,编译器是 ...
旅游类App的原型制作分享-Klook
Klook是一款旅游类App,它能探索和预订惊人的旅行活动.在世界各地以最优惠的价格畅玩. 这款原型中,用到了Mockplus的两种滚动方式,一种是把手机外壳拉长,另一种是使用滚动区组件,其中,滚动区 ...
露眼看App--怎样做一款旅游类的App ?
旅游App主要特点,也可以说是主要功能就是旅游攻略,游记这两个功能,有些App会有行程单功能. 那攻略,游记,行程单之间有什么样的区别呢?说一下我的看法,攻略一般指某个城市有什么好玩的景点啊,美餐,住 ...
企业想要制作电商类App软件
移动互联网时代,App的制作开发对我们生活的影响越来越大.对于传统企业而言,通过手机App制作不仅能够在移动互联网中获得市场份额,还能为企业培养忠实用户.对于创业者而言,制作一款好的移动App软件不仅 ...
旅游类App原型制作分享-Triposo
今天带给大家的,还是一款旅游类App,这类App在设计时的一些注意问题前面已经给大家分享过了,这次重点给大家展示的是这一款原型中的启动页面,在设计的时候,只用了一个简单的交互效果:隐藏显示,触发方式是 ...
旅游类App的原型制作分享
今天我用Mockplus做了一套Gogobot的原型,这是一款旅游类的App.为了达到高保真的效果,在做原型图的时候我把App的颜色也一并做好了,因为Mockplus的颜色属性设置可以直接吸取颜色,非 ...
HBuilder开发旅游类APP(二) ----- mui结合H5+,快速实现首页、登录、注册等功能
HBuilder开发旅游类APP(二) ----- mui结合H5+,快速实现首页.登录.注册等功能作者:班尼科本博文是本人原创,喜欢请给我点赞,转载请注明出处哦. 标签: 旅游 H5+ MUI ...
HBuilder开发旅游类APP(一) ----- 实现地图插件调用、苹果和安卓同步混合开发
HBuilder开发旅游类APP(一) ----- 实现地图插件调用.苹果和安卓同步混合开发作者:班尼科本博文内容参考了网络资源,但文章完全是本人原创,喜欢请给我点赞,转载请注明出处哦. 标签: ...

【云图】如何用云图制作APP（旅游类，美食记录，免费停车，通讯录等）

【云图】如何用云图制作APP（旅游类，美食记录，免费停车，通讯录等）相关推荐

最新文章

热门文章