【雲圖】如何製做AMF生態魚缸實體店分佈圖

摘要：不少商家都有本身的實體店，包括KFC啊，麥當勞啊，姐最愛的眉州小吃啊。那麼，商家就會有這樣一個需求：把實體店地址標註在地圖上，並引導客戶駕車或者坐公交去到指定地地址。但是商家通常都不會地圖開發，這可怎麼辦呢？不用擔憂，我把代碼都給你們寫好了，鼠標點一點，實體店地圖立馬呈現！本文以姐最愛的AMF海水農場實體店爲例，告訴你們如何在本身的網站上嵌入一個【全國實體店查詢地圖】。

效果圖：

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

1、數據準備

從官網獲取地址數據：http://www.amfaqua.com/

粘貼到excel裏，並保存爲csv文件。

name,address,tel,pic
河南鶴壁旗艦店,河南省鶴壁市淇濱區鶴煤大道西段建業森林半島,18810067778,
蘇州鄰瑞店,江蘇省蘇州市工業園區鄰瑞廣場三層,18505121300,http://www.amfaqua.com/uploads/allimg/131230/1-131230152K1504.jpg
臨汾鼓樓店,山西省臨汾市堯都區鼓樓廣場步行街,15388570002,http://www.amfaqua.com/uploads/allimg/130904/1-130Z4002334543.jpg
北京三里屯店,北京朝陽區三里屯SOHO三號樓3115,13146542304,http://www.amfaqua.com/uploads/allimg/130916/1-1309161J929643.jpg
北京朝園店,北京朝陽公園西2門朝園市場1165號,010-57900212,http://www.amfaqua.com/uploads/allimg/130826/1-130R6144K0c8.jpg
北京和平里店,北京東城區和平里中街六區6號樓底商-3,010-84211868,http://www.amfaqua.com/uploads/allimg/130626/1-1306261A359553.jpg
北京方恆店,北京市朝陽區望京方恆購物中心一層入口,010-57116389,http://www.amfaqua.com/uploads/allimg/131008/1-13100QI236409.jpg
北京富力城店,北京朝陽區東三環富力廣場購物中心地下一層,13601233181,http://www.amfaqua.com/uploads/allimg/140217/1-14021F93U0254.jpg
北京藍港店,北京市朝陽區藍色港灣國際商區L-K161（M層）,13264336352|18600937784,http://www.amfaqua.com/uploads/allimg/130826/1-130R6134555105.jpg
北京竟然店,北京市海淀區西四環世紀金源北樓竟然之家一層,13910152440,http://www.amfaqua.com/uploads/allimg/130829/1-130R9162P02T.jpg
北京藍景店,北京市海淀區北三環藍景麗家一層入口,13910152440,http://www.amfaqua.com/uploads/allimg/130829/1-130R9162U4395.jpg
北京歐美匯店,北京海淀區中關村歐美匯購物中心一層,010-56420518,http://www.amfaqua.com/uploads/130410/1-1304101RTa34.jpg
天津綠遊店,天津市濱海新區泰達綠遊天地購物中心215號,13752669203,http://www.amfaqua.com/uploads/allimg/130626/1-1306261F2424P.jpg
北京朝陽大悅城店,北京朝陽區青年路大悅城購物中心三層必勝客對面,010-57187606,http://www.amfaqua.com/uploads/allimg/140217/1-14021GA534M0.jpg
南通中南城店,江蘇省南通市崇川區中南城購物中心4層,13255247999,http://www.amfaqua.com/uploads/allimg/130626/1-1306261H215P1.jpg

 

打開雲圖，http://yuntu.amap.com/datamanager/

新建地圖，導入數據，點擊預覽。

 

這時雲圖已經生成了，查看效果：http://yuntu.amap.com/share/iuQzi2

如圖：

 

 

2、地圖展現

獲取一個開發者key：http://developer.amap.com/key/

 

在你的地圖代碼中引用高德JS:

<script language="javascript" src="http://webapi.amap.com/maps?v=1.2&key=【您的key】"></script>

 

給出一個地圖容器：

<div id="map"></div>

 

加載您的地圖：

var mapObj;var cloudDataLayer;var cloudSearch;var pBeijing = new AMap.LngLat(116.388474,39.934486);//初始化地圖對象，加載地圖function mapInit(){
    mapObj = new AMap.Map("map",{
    center: pBeijing, //地圖中心點
    level:11  //地圖顯示的比例尺級別    });
    myCloudMap();
    myCloudList("北京");
}//雲圖加載地圖function myCloudMap(){    //地圖-雲圖層
    mapObj.plugin('AMap.CloudDataLayer', function () {        var layerOptions = {
            query:{keywords: '北京'},
            clickable:true
        };
        cloudDataLayer = new AMap.CloudDataLayer('53956704e4b04192f1f4e43d', layerOptions); //實例化雲圖層類
        cloudDataLayer.setMap(mapObj); //疊加雲圖層到地圖
        AMap.event.addListener(cloudDataLayer, 'click', function (result) {            var clouddata = result.data;            //雲圖麻點
            var infoWindow = new AMap.InfoWindow({
                content: "<a href='http://mo.amap.com/?q=" + clouddata._location.getLat() + "," + clouddata._location.getLng() + "&name=" + clouddata._name + "'><h3>" + clouddata._name + "</h3></a>" + "<img style=\"width:300px;height:220px;overflow:hidden;\" src='" + clouddata.pic + "' /><p>地址：" + clouddata._address + "</p>" + "<p>電話：" + clouddata.tel + "</p>",
                size:new AMap.Size(300, 0),
                autoMove:true,
                offset:new AMap.Pixel(0,-5)
            });
            infoWindow.open(mapObj, clouddata._location);
        });
    });
}

 

加載列表：

//雲圖加載列表function myCloudList(id){    //列表
    mapObj.plugin(["AMap.CloudDataSearch"], function() {        //繪製多邊形
        var arr = new Array();
        arr.push(new AMap.LngLat(75.585938,52.696361));
        arr.push(new AMap.LngLat(134.472656,53.956086));
        arr.push(new AMap.LngLat(129.726563,16.467695));
        arr.push(new AMap.LngLat(81.914063,20.13847));
        arr.push(new AMap.LngLat(75.585938,52.696361));        var searchOptions = {
            keywords: id,
            pageSize:100
        };
        cloudSearch = new AMap.CloudDataSearch('53956704e4b04192f1f4e43d', searchOptions); //構造雲數據檢索類
        AMap.event.addListener(cloudSearch, "complete", cloudSearch_CallBack); //查詢成功時的回調函數
        AMap.event.addListener(cloudSearch, "error", errorInfo); //查詢失敗時的回調函數
        cloudSearch.searchInPolygon(arr); //多邊形檢索    });
}//回調函數-成功function cloudSearch_CallBack(data) {    var resultStr="";    var resultArr = data.datas;    var resultNum = resultArr.length;    for (var i = 0; i < resultNum; i++) {
        resultStr += "<div class=\"item\">";
        resultStr += "<a href='http://mo.amap.com/?q=" + resultArr[i]._location.getLat() + "," + resultArr[i]._location.getLng() + "&name=" + resultArr[i]._name + "'><h3>" + (i+1) + "、" + resultArr[i]._name + "</h3></a>";
        resultStr += "<p>地址：" + resultArr[i]._address + "</p>";
        resultStr += "<p>電話：" + resultArr[i].tel + "</p>";
        resultStr += "</div>";
    }
    document.getElementById("list").innerHTML = resultStr;
}//回調函數-失敗function errorInfo(data) {
    resultStr = data.info;
    document.getElementById("list").innerHTML = resultStr;
}//清空地圖function clearMap(){
    mapObj.clearMap();
    document.getElementById("list").innerHTML = '正在讀取數據……';
}

 

3、城市切換

代碼：

//索引雲圖function getType(iPrivance){    if(iPrivance=="全國"){
        mapObj.setZoomAndCenter(4,new AMap.LngLat(114.433594,33.651208));
        myCloudList('');        var op={
            query:{keywords:""}
        };
        cloudDataLayer.setOptions(op);
    }else{
        myCloudList(iPrivance);        var op={
            query:{keywords:iPrivance}
        };
        cloudDataLayer.setOptions(op);
        placeSearch(iPrivance);
    }
}//城市查詢function placeSearch(id) {  
    var MSearch;  
    mapObj.plugin(["AMap.PlaceSearch"], function() {          
        MSearch = new AMap.PlaceSearch({ //構造地點查詢類  
            pageSize:1,  
            pageIndex:1,  
            city:"" //城市          });   
        AMap.event.addListener(MSearch, "complete", keywordSearch_CallBack);//返回地點查詢結果  
        MSearch.search(id); //關鍵字查詢      });  
}  
//城市查詢後定位  function keywordSearch_CallBack(data) {  
    var iPoint = data.poiList.pois[0].location;
    mapObj.setZoomAndCenter(10,iPoint);
}

 

4、駕車查詢

駕車公交等路線規劃，咱們放到高德mobile地圖來作。

只須要一句話，便可鏈接到高德mobile地圖，來看一個例子：

http://mo.amap.com/?q=31.234527,121.287689&name=海水農場和平里店

 

來看看類參考：

 

因此，咱們只須要設置一下中心點的經緯度，還有一個顯示的名稱便可。

經緯度的獲取在雲圖檢索的回調函數裏得到。

resultArr[i]._location.getLat() 
resultArr[i]._location.getLng()

 

 

5、效果圖與源代碼

 

所有源代碼：

 View Code

 

demo地址：

http://zhaoziang.com/amap/amf_map.html