摘要:利用云图将自己的数据存储起来,免去了数据库和服务器的费用、开放成本。那么,如何检索自己云图里的数据呢?本教程结合一个北京三甲医院的例子,告诉大家如何储存,检索,并显示自己的云图。你也可以做自己的酒店云图,餐饮云图,银行云图等。
-----------------------------------------------------------------------------------------------------
一、准备工作,展示自己的地图。
申请自己开发者key,教程《如何注册地图开放平台key》:
将key填入自己代码中,其实只要一句话,就可以展示一张地图。
var mapObj;//初始化地图对象,加载地图function mapInit(){ mapObj = new AMap.Map("iCenter",{center:new AMap.LngLat(116.39946,39.907629),level:12});}
示例展示:
示例效果:
二、云存储,将自己的数据存到云图里。
将自己的的数据,保存成CSV格式。
注意:
1、第一行必须是字段名,只能是字母、数字和下划线,并且不能以数字开头,长度不超过20位。
2、.csv 格式为UTF-8编码,数据量不超过 10,000 条,文件大小不超过10M、字段总数不超过 40 个。
3、经纬度必须分开成2个字段!
将CSV文件导入到云图管理台
云图数据管理台网址:
导入教程请查看《如何使用云存储》:
三、如何展示自己的数据
打开数据管理平台,获取云图层的id。
代码里实例化一个云图层类,把云图层的id填进来。保证搜索的是这个图层。
cloudDataLayer = new AMap.CloudDataLayer('53351395e4b08ebff7d53853', layerOptions); //实例化云图层类cloudDataLayer.setMap(mapObj); //叠加云图层到地图
查看云图层demo:
示例效果:
四、如何查询自己的云数据
根据关键字(云图里的索引)可以查询数据。
比如我这里是按照科室分类的,即medicalspecialists。
查询到数据后,需要把数据展示出来,这里要根据关键词keywords重新设置一下图层cloudDataLayer的数据。
var layerOptions = { query:{keywords: ''}, clickable:true }; function getType(medicalspecialists){ var op={ query:{keywords:medicalspecialists} } cloudDataLayer.setOptions(op); //重新设置图层}
点击云图层cloudDataLayer,弹出信息窗口window。需要给云图层添加点击事件。
AMap.event.addListener(cloudDataLayer, 'click', function (result) { var clouddata = result.data; var infoWindow = new AMap.InfoWindow({ content:""+ clouddata._name +"
地址:"+ clouddata._address + "" + "电话号码:" + clouddata.phonenumber+ "" + "邮编:" + clouddata.postalcode+"" + "擅长专科:" +clouddata.medicalspecialists+ "" + "所在省份:" +clouddata.provinces , size:new AMap.Size(300, 0), autoMove:true, offset:new AMap.Pixel(0,-5) }); infoWindow.open(mapObj, clouddata._location); });
当然你还可以给window加上关闭事件。这个作业留给你自己来写。嘿嘿。
在云图的数据管理台,添加索引。如果不添加索引的话,是无法搜索到数据的哦!
文本索引和筛选排序索引,都需要建立。
全部源代码:
全国三甲医院查询系统 重看一遍北京市三甲医院查询系统
第三步:查询自己的云数据
最终示意图:(右上角可以点击下一步)
查看demo: