【雲圖】如何創建北京三甲醫院雲圖，不用數據庫持有本身數據！

時間 2019-11-12

原文原文鏈接

摘要：利用雲圖將本身的數據存儲起來，免去了數據庫和服務器的費用、開放成本。那麼，如何檢索本身雲圖裏的數據呢？本教程結合一個北京三甲醫院的例子，告訴你們如何儲存，檢索，並顯示本身的雲圖。你也能夠作本身的酒店雲圖，餐飲雲圖，銀行雲圖等。javascript

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

1、準備工做，展現本身的地圖。html

申請本身開發者key，教程《如何註冊地圖開放平臺key》：java

http://www.cnblogs.com/milkmap/p/3630650.htmlweb

將key填入本身代碼中，其實只要一句話，就能夠展現一張地圖。數據庫

var mapObj;
//初始化地圖對象，加載地圖
function mapInit(){
    mapObj = new AMap.Map("iCenter",{center:new AMap.LngLat(116.39946,39.907629),level:12});
}

示例展現：http://zhaoziang.com/amap/hospital_1.htmlapi

示例效果：服務器

2、雲存儲，將本身的數據存到雲圖裏。post

將本身的的數據，保存成CSV格式。ui

注意：

一、第一行必須是字段名，只能是字母、數字和下劃線，而且不能以數字開頭，長度不超過20位。

二、.csv 格式爲UTF-8編碼，數據量不超過 10,000 條，文件大小不超過10M、字段總數不超過 40 個。

三、經緯度必須分開成2個字段！

將CSV文件導入到雲圖管理臺

雲圖數據管理臺網址：http://yuntu.amap.com/datamanager/

導入教程請查看《如何使用雲存儲》：http://www.cnblogs.com/milkmap/p/3623775.html

3、如何展現本身的數據

打開數據管理平臺，獲取雲圖層的id。

代碼裏實例化一個雲圖層類，把雲圖層的id填進來。保證搜索的是這個圖層。

cloudDataLayer = new AMap.CloudDataLayer('53351395e4b08ebff7d53853', layerOptions); //實例化雲圖層類
cloudDataLayer.setMap(mapObj); //疊加雲圖層到地圖

查看雲圖層demo:http://zhaoziang.com/amap/hospital_2.html

示例效果：

4、如何查詢本身的雲數據

根據關鍵字（雲圖裏的索引）能夠查詢數據。

好比我這裏是按照科室分類的，即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:"<h3><font face=\"微軟雅黑\"color=\"#3366FF\">"+ clouddata._name +"</font></h3><hr />地址："+ clouddata._address + "<br />" + "電話號碼：" + clouddata.phonenumber+ "<br />" + "郵編：" + clouddata.postalcode+"<br /><strong>" + "擅長專科：" +clouddata.medicalspecialists+  "</strong><br />" + "所在省份：" +clouddata.provinces ,  
                size:new AMap.Size(300, 0),  
                autoMove:true,  
                offset:new AMap.Pixel(0,-5)  
            });  
              
            infoWindow.open(mapObj, clouddata._location);  
        });

固然你還能夠給window加上關閉事件。這個做業留給你本身來寫。嘿嘿。

在雲圖的數據管理臺，添加索引。若是不添加索引的話，是沒法搜索到數據的哦！

文本索引和篩選排序索引，都須要創建。

所有源代碼：

<!DOCTYPE HTML>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
<title>全國三甲醫院查詢系統</title>  
<link rel="stylesheet" type="text/css" href="http://api.amap.com/Public/css/demo.Default.css" />  
<style type="text/css">
    body{padding:10px;}
    #iCenter{width:100%;height:400px;border:1px solid #F6F6F6;margin:10px 0 0;}
    h1,p{line-height:1.5em;}
    span{float:right;}
</style>
<script language="javascript" src="http://webapi.amap.com/maps?v=1.2&key=23e8cfe2d8f3ce1e4a4197902d28f445"></script>  
</head>  
<body onLoad="mapInit()">  
    <span><a href="hospital_1.html">重看一遍</a></span>
    <h1>北京市三甲醫院查詢系統</h1>
    <p>第三步：查詢本身的雲數據</p>
    <strong>
    <form id="selecttype">
        <input type="radio" name="medicalspecialists" value="鍼灸推拿" onclick="getType('鍼灸推拿')"/> 鍼灸推拿
        <input type="radio" name="medicalspecialists" value="中醫內科" onclick="getType('中醫內科')"/> 中醫內科
        <input type="radio" name="medicalspecialists" value="腫瘤科" onclick="getType('腫瘤科')"/> 腫瘤科
        <input type="radio" name="medicalspecialists" value="心血管科" onclick="getType('心血管科')"/> 心血管科
        <input type="radio" name="medicalspecialists" value="消化科" onclick="getType('消化科')"/> 消化科
        <input type="radio" name="medicalspecialists" value="肛腸科" onclick="getType('肛腸科')"/> 肛腸科
        <input type="radio" name="medicalspecialists" value="肝病科" onclick="getType('肝病科')"/> 肝病科
        <input type="radio" name="medicalspecialists" value="婦科" onclick="getType('婦科')"/> 婦科
        <input type="radio" name="medicalspecialists" value="骨科" onclick="getType('骨科')"/> 骨科
        <input type="radio" name="medicalspecialists" value="皮膚性病科" onclick="getType('皮膚性病科')"/> 皮膚性病科
        <input type="radio" name="medicalspecialists" value="腎病科" onclick="getType('腎病科')"/> 腎病科
        <input type="radio" name="medicalspecialists" value="外科" onclick="getType('骨科')"/> 外科
        <input type="radio" name="medicalspecialists" value="骨科" onclick="getType('骨科')"/> 骨科
        <input type="radio" name="medicalspecialists" value="脊椎骨病科" onclick="getType('脊椎骨病科')"/> 脊椎骨病科
        <input type="radio" name="medicalspecialists" value="眼科" onclick="getType('眼科')"/>眼科
    </form>
    </strong>
    <div id="iCenter"></div>  
</body>  
<script language="javascript">  
var mapObj;  
var keywords;
var cloudDataLayer
/* 
 *初始化地圖對象，加載地圖 
 */  
function mapInit(){  
    mapObj = new AMap.Map("iCenter",{center:new AMap.LngLat(116.39946,39.907629),level:12});      
    addCloudLayer();  

}  
/* 
 *疊加雲數據圖層 
 */  
function addCloudLayer() {  
    //加載雲圖層插件  
    mapObj.plugin('AMap.CloudDataLayer', function () {  
        var layerOptions = {   
            query:{keywords: ''},   
            clickable:true  
        };  
        cloudDataLayer = new AMap.CloudDataLayer('53351395e4b08ebff7d53853', layerOptions); //實例化雲圖層類  
        cloudDataLayer.setMap(mapObj); //疊加雲圖層到地圖  
          
        AMap.event.addListener(cloudDataLayer, 'click', function (result) {  
            var clouddata = result.data;  
            var infoWindow = new AMap.InfoWindow({  
                content:"<h3><font face=\"微軟雅黑\"color=\"#3366FF\">"+ clouddata._name +"</font></h3><hr />地址："+ clouddata._address + "<br />" + "電話號碼：" + clouddata.phonenumber+ "<br />" + "郵編：" + clouddata.postalcode+"<br /><strong>" + "擅長專科：" +clouddata.medicalspecialists+  "</strong><br />" + "所在省份：" +clouddata.provinces ,  
                size:new AMap.Size(300, 0),  
                autoMove:true,  
                offset:new AMap.Pixel(0,-5)  
            });  
              
            infoWindow.open(mapObj, clouddata._location);  
        });  
    });  
}  

function getType(medicalspecialists){
    var op={
        /*map:mapObj,*/
        query:{keywords:medicalspecialists}
    }
    cloudDataLayer.setOptions(op)
}
</script>  
</html>