【雲圖】如何製做官網上的實體店分佈圖？

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

AMF官網：http://www.amfaqua.com/pinpailingshoudian/pinpailingshoudian_map.html

效果圖：

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

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 pBeijing = new AMap.LngLat(116.38298,39.955543);
//初始化地圖對象，加載地圖
function mapInit(){
    mapObj = new AMap.Map("map",{
    resizeEnable: true,
    center: pBeijing, //地圖中心點
    level:12  //地圖顯示的比例尺級別
    });
    myCloudList("北京");
}

加載列表：

//雲圖加載列表
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); //多邊形檢索
    });
}
var markers = new Array(); 
var windowsArr = new Array();
//添加marker和infowindow     
function addmarker(i, d){  
    var lngX = d._location.getLng();  
    var latY = d._location.getLat();  
    var IconOptions = {
        p_w_picpath : "fish.png",
        size : new AMap.Size(32,32),
        p_w_picpathSize : new AMap.Size(32,32),
        p_w_picpathOffset : new AMap.Pixel(-16,0)
    };
    var myIcon = new AMap.Icon(IconOptions);
    var markerOption = {  
        map:mapObj,  
        icon: myIcon,   
        offset: new AMap.Pixel(-16,-32),   
        position:new AMap.LngLat(lngX, latY)    
    };              
    var mar = new AMap.Marker(markerOption); 
    markers.push(new AMap.LngLat(lngX, latY));  
  
    var infoWindow = new AMap.InfoWindow({  
        content: "<h3>" + d._name + "</h3>" + "<img style=\"width:280px;height:180px;overflow:hidden;\" src='" + d.pic + "' /><p>地址：" + d._address + "</p>" + "<p>電話：<a href=\"tel:" + d.tel + "\">" + d.tel + "</a></p><p style=\"text-align:right\"><a href='http://mo.amap.com/?q=" + d._location.getLat() + "," + d._location.getLng() + "&name=" + d._name + "'>到這兒去</a></p>",
        size:new AMap.Size(280, 0),  
        autoMove:true,  
        offset:new AMap.Pixel(0,-30),
        closeWhenClickMap: true        
    });    
    windowsArr.push(infoWindow);     
    var aa = function(){infoWindow.open(mapObj, mar.getPosition());};    
    AMap.event.addListener(mar, "click", aa);    
}
//回調函數-成功
function cloudSearch_CallBack(data) {
    clearMap();
    var resultStr="";
    var resultArr = data.datas;
    var resultNum = resultArr.length;
    for (var i = 0; i < resultNum; i++) {
        resultStr += "<div class=\"item\">";
        resultStr += "<h3>" + (i+1) + "、" + resultArr[i]._name + "</h3>";
        resultStr += "<p>地址：" + resultArr[i]._address + "</p>";
        resultStr += "<p>電話：<a href=\"tel:" + resultArr[i].tel + "\">" + resultArr[i].tel + "</a></p>";
        resultStr += "<p>地圖：<a href='http://mo.amap.com/?q=" + resultArr[i]._location.getLat() + "," + resultArr[i]._location.getLng() + "&name=" + resultArr[i]._name + "'>到這裏去</a></p>";
        resultStr += "</div>";
        addmarker(i, resultArr[i]); //添加大標註
    }
    if (document.getElementById('map').style.display !== 'none') {
        mapObj.setFitView();
    }
    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=="全國"){
        if (document.getElementById('map').style.display !== 'none') {
            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、效果圖與源代碼

 

所有源代碼：

<!DOCTYPE html>
<html xmlns="http://ww.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="http://www.amfaqua.com/templets/myskin/css/style.css" rel="stylesheet" type="text/css" />
<title>Asian Marine Fantastic</title>
<script language="javascript" src="http://webapi.amap.com/maps?v=1.2&key=【您的key】"></script>
<link href="amf_map.css" rel="stylesheet" type="text/css" />
<script language="javascript">
function display(id1,id2){
    document.getElementById('map').style.display = 'none';
    document.getElementById('list').style.display = 'none';
    document.getElementById(id1).style.display = 'block';
    if (id1 === 'map' && mapObj) {
        mapObj.setFitView();
    }
}
var mapObj;
var cloudDataLayer;
var cloudSearch;
var pBeijing = new AMap.LngLat(116.38298,39.955543);
//初始化地圖對象，加載地圖
function mapInit(){
    mapObj = new AMap.Map("map",{
    resizeEnable: true,
    center: pBeijing, //地圖中心點
    level:12  //地圖顯示的比例尺級別
    });
    myCloudList("北京");
}
//雲圖加載列表
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); //多邊形檢索
    });
}
var markers = new Array(); 
var windowsArr = new Array();
//添加marker和infowindow     
function addmarker(i, d){  
    var lngX = d._location.getLng();  
    var latY = d._location.getLat();  
    var IconOptions = {
        p_w_picpath : "fish.png",
        size : new AMap.Size(32,32),
        p_w_picpathSize : new AMap.Size(32,32),
        p_w_picpathOffset : new AMap.Pixel(-16,0)
    };
    var myIcon = new AMap.Icon(IconOptions);
    var markerOption = {  
        map:mapObj,  
        icon: myIcon,   
        offset: new AMap.Pixel(-16,-32),   
        position:new AMap.LngLat(lngX, latY)    
    };              
    var mar = new AMap.Marker(markerOption); 
    markers.push(new AMap.LngLat(lngX, latY));  
  
    var infoWindow = new AMap.InfoWindow({  
        content: "<h3>" + d._name + "</h3>" + "<img style=\"width:280px;height:180px;overflow:hidden;\" src='" + d.pic + "' /><p>地址：" + d._address + "</p>" + "<p>電話：<a href=\"tel:" + d.tel + "\">" + d.tel + "</a></p><p style=\"text-align:right\"><a href='http://mo.amap.com/?q=" + d._location.getLat() + "," + d._location.getLng() + "&name=" + d._name + "'>到這兒去</a></p>",
        size:new AMap.Size(280, 0),  
        autoMove:true,  
        offset:new AMap.Pixel(0,-30),
        closeWhenClickMap: true        
    });    
    windowsArr.push(infoWindow);     
    var aa = function(){infoWindow.open(mapObj, mar.getPosition());};    
    AMap.event.addListener(mar, "click", aa);    
}
//回調函數-成功
function cloudSearch_CallBack(data) {
    clearMap();
    var resultStr="";
    var resultArr = data.datas;
    var resultNum = resultArr.length;
    for (var i = 0; i < resultNum; i++) {
        resultStr += "<div class=\"item\">";
        resultStr += "<h3>" + (i+1) + "、" + resultArr[i]._name + "</h3>";
        resultStr += "<p>地址：" + resultArr[i]._address + "</p>";
        resultStr += "<p>電話：<a href=\"tel:" + resultArr[i].tel + "\">" + resultArr[i].tel + "</a></p>";
        resultStr += "<p>地圖：<a href='http://mo.amap.com/?q=" + resultArr[i]._location.getLat() + "," + resultArr[i]._location.getLng() + "&name=" + resultArr[i]._name + "'>到這裏去</a></p>";
        resultStr += "</div>";
        addmarker(i, resultArr[i]); //添加大標註
    }
    if (document.getElementById('map').style.display !== 'none') {
        mapObj.setFitView();
    }
    document.getElementById("list").innerHTML = resultStr;
}
//回調函數-失敗
function errorInfo(data) {
    resultStr = data.info;
    document.getElementById("list").innerHTML = resultStr;
}
//清空地圖
function clearMap(){
    mapObj.clearMap();
    document.getElementById("list").innerHTML = '正在讀取數據……';
}
//索引雲圖
function getType(iPrivance){
    if(iPrivance=="全國"){
        if (document.getElementById('map').style.display !== 'none') {
            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);
}
</script>
</head>
<body onLoad="mapInit()">
<!-- Copyright  2005. Spidersoft Ltd -->
<style>
A.applink:hover {border: 2px dotted #DCE6F4;padding:2px;background-color:#ffff00;color:green;text-decoration:none}
A.applink       {border: 2px dotted #DCE6F4;padding:2px;color:#2F5BFF;background:transparent;text-decoration:none}
A.info          {color:#2F5BFF;background:transparent;text-decoration:none}
A.info:hover    {color:green;background:transparent;text-decoration:underline}
</style>
<div id="page" class="shell">
<!-- Logo + Search + Navigation -->
<DIV id=top>
<DIV class=cl></DIV>
<H1 id=logo><A href="http://www.amfaqua.com/">AMF</A></H1>
<DIV class=slogan>保護海洋生態<BR>
選擇AMF人工觀賞魚和珊瑚</DIV>
<DIV class=contact><img src="http://www.amfaqua.com/templets/myskin/p_w_picpaths/tel.jpg" /></DIV>
<DIV class=cl></DIV>
<DIV id=navigation>
<UL>
    <LI><A href="#"><SPAN>首 頁</SPAN></A> </LI>
    <li class=""><a href="#" title="海洋生態缸"><span>海洋生態缸</span></a></li>
    <li class=""><a href="#" title="人工海水魚"><span>人工海水魚</span></a></li>
    <li class=""><a href="#" title="珊瑚和海藻"><span>珊瑚和海藻</span></a></li>
    <li><a href="#" title="飼料與器材"><span>飼料與器材</span></a></li>
    <li><a href="#" title="品牌專賣店"><span>品牌專賣店</span></a></li>
    <li><a href="#" title="合做×××"><span>合做×××</span></a></li>
    <li><a href="#" title="企業發展"><span>企業發展</span></a></li>
    <li><a href="#" title="維護視頻"><span>維護視頻</span></a></li>
</UL>
</DIV>
</DIV>
<DIV id=main>
<DIV class="cols two-cols">
<!--begin-->
    <div class="header clearfix">
        <select onchange="getType(this.options[this.selectedIndex].text)" >
            <option>北京</option>
            <option>天津市濱海新區</option>
            <option>河南省鶴壁市</option>
            <option>江蘇省蘇州市</option>
            <option>江蘇省南通市</option>
            <option>山西省臨汾市</option>
            <option>全國</option>
        </select>
        <div class="btnChange">
            <a id="iListBtn" onclick="display('list','iMapBtn');" href="javascript:void(0);">列表模式</a>
            <a id="iMapBtn" onclick="display('map','iListBtn');" href="javascript:void(0);">地圖模式</a>
        </div>
    </div>
    <div id="map" class="clearfix"></div>
    <div id="list" style="display:none;">正在讀取數據……</div>
<!--end-->
</DIV>
</DIV>
<DIV id=footer>
<P class=right>2007-2013 AMF海水農場&nbsp;版權全部&nbsp;備案信息:京ICP備08001035號</P>
<P><A href="#">首 頁</A> <SPAN>&nbsp;</SPAN><a href="../haishuishengtaigang/haishuishengtaigang.html" title="海洋生態缸">海洋生態缸</a><SPAN>&nbsp;</SPAN><a href="../rengonghaishuiyu/rengonghaishuiyu.html" title="人工海水魚">人工海水魚</a><SPAN>&nbsp;</SPAN><a href="../ruantihehaizao/ruantihehaizao.html" title="珊瑚和海藻">珊瑚和海藻</a><SPAN>&nbsp;</SPAN><a href="../shuizuqicai/shuizuqicai.html" title="飼料與器材">飼料與器材</a><SPAN>&nbsp;</SPAN><a href="pinpailingshoudian.html" title="品牌專賣店">品牌專賣店</a><SPAN>&nbsp;</SPAN><a href="../lianxihehezuo/lianxihehezuo.html" title="合做×××">合做×××</a><SPAN>&nbsp;</SPAN><a href="../fazhandongtai/fazhandongtai.html" title="企業發展">企業發展</a>
<DIV class=cl></DIV>
</DIV>
</div>
</body>
</html>