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

摘要：不少商家都有本身的實體店，包括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 = { image : "fish.png", size : new AMap.Size(32,32), imageSize : new AMap.Size(32,32), imageOffset : 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 = { image : "fish.png", size : new AMap.Size(32,32), imageSize : new AMap.Size(32,32), imageOffset : 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/images/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>

 

demo地址：

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