【雲圖】如何用雲圖製做APP（旅遊類，美食記錄，免費停車，通信錄等）

時間 2019-12-06

標籤雲圖如何製做 app 旅遊美食記錄免費停車通信简体版

原文原文鏈接

摘要：記錄天天的生活軌跡，分享美食心得，哪裏有免費停車，製做班級通信錄等等，均可以用到雲圖。不管你是開發者，仍是app用戶，均可以用雲圖製做一張屬於你的專屬地圖。javascript

---------------------------------------------------------------------------------------------------------css

1、經過座標拾取工具獲得經緯度：html

http://zhaoziang.com/amap/picpoint.htmljava

（固然，若是你是開發者，你可使用定位SDK，獲取本身的經緯度，詳見：http://api.amap.com/location/index ） web

2、創建本身的數據表json

（數據保存爲CSV格式喲）windows

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,西瓜貴死人

將數據導入雲圖：api

http://yuntu.amap.com/datamanager/index.htmlapp

固然，若是你沒那麼多記錄，一次不能導入那麼多數據的話。你能夠天天記錄一點點喲！ide

點擊右上角的按鈕，能夠手工輸入一個點哦！

3、創建索引（這步灰常重要！不少開發者由於沒創建索引，而致使沒法檢索到本身數據哦）

文本索引

塞選排序索引

4、好啦，要開始寫代碼啦。

不用擔憂，我都寫好在這裏了，你直接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>