【雲圖】如何製做全國連鎖店分佈地圖？

時間 2019-12-08

標籤雲圖如何製做全國連鎖店分佈地圖简体版

原文原文鏈接

摘要：本文詳細講解了，如何設置支付寶服務窗。商家如何將本身的全國連鎖店放置到雲圖上，而且在支付寶服務窗中提供地圖查詢功能。本文所包含的地圖服務爲：javascript

一、按城市查詢門店地址；html

二、列表模式和地圖模式的方便切換；java

三、調起打電話服務，更快與客戶直接接觸；web

四、地圖定位，導航，查周邊。windows

1、支付寶api

一、服務窗設置函數

登陸支付寶服務窗：https://fuwu.alipay.com/platform/queryMenu.htm網站

自定義菜單 -> 主菜單 -> 有子級菜單this

填寫子菜單名稱，設置爲跳轉網頁，而且放入網址。好比家樂福門店的網址：http://zhaoziang.com/amap/carrefour.html編碼

（家樂福門店地圖的製做在第三部分雲圖）

最後點擊發布。

二、生成二維碼

在服務未審覈經過以前，只能經過二維碼進行關注。

帳戶設置 -> 基本信息

將您的二維碼分享到微博，讓更多的人知道你提供支付寶服務。

三、查看效果

打開支付寶客戶端，掃描二維碼。

馬上添加 -> 馬上查看 -> 成功案例 -> 家樂福

2、數據準備

一、門店數據

從家樂福官網上獲取門店數據：http://www.carrefour.com.cn/Store/Store.aspx

存入excel中，並保存爲CSV格式，uft-8編碼。（小於10000條數據）

該教程爲示例，因此只提供了北京和廣州2個城市的門店數據。其中，廣州數據爲：

複製代碼
name,address,tel,pic
金沙店,廣州市海珠區工業大道北76-80號家信商業中心,(020) 8961 1230,http://imgs.carrefour.com.cn/Store/678_282_D34209E77BF840058C2B6F5CBAE27610.jpg
康王店,廣州市荔灣區康王中路656號新光城市廣場地下1、二層,(020) 8133 7619,http://imgs.carrefour.com.cn/Store/678_282_974C095FE09144C6B22C35CD95A8673D.jpg
萬國店,廣州海珠區前進路40號萬國廣場2-3樓,(020) 8426 2633,http://imgs.carrefour.com.cn/Store/678_282_A6F46DFAA74E488AB0F69413F4CE411A.jpg
新市店,廣州市白雲區機場路1339號百信廣場家樂福,(020) 3663 5319,http://imgs.carrefour.com.cn/Store/678_282_594A48A43B994586955F7CFB4C340BA9.jpg
員村店,廣州市天河區員村恆隆街3號,(020) 8564,http://imgs.carrefour.com.cn/Store/678_282_ED02FD7F9D1D4901A17144A9B3CC98D6.jpg
複製代碼

二、登陸雲圖，導入數據。

登陸雲圖：http://yuntu.amap.com/datamanager/index.html

點擊新建地圖

導入CSV表格數據，而後預覽。

就能看到全國門店分佈圖了

3、雲圖的網頁製做

爲了讓地圖能夠進行分城市查詢，列表模式展現，調起打電話功能，調起地圖導航、地圖定位、搜索周邊等功能，須要一段網站代碼。

代碼已經寫好了，只須要你加入key和tableID便可。

一、獲取key的位置：http://api.amap.com/key

二、獲取雲圖tableID：進入你的雲圖->獲取tableID

三、代碼

複製代碼
<!DOCTYPE HTML>
<html>
<head>

<title>家樂福全國門店</title>
<style>
/** reset /
body,html,div,p,li,ul,ol,p,select,h3{padding:0;margin:0;}
body,html{width:100%;height:100%;}
img{border:none;}
a{text-decoration:none;}
a:hover{color:#FF7F27;}
body{color:#333;font-family:"Microsoft YaHei";text-align:center;font-size:14px;}
img:hover{filter:alpha(opacity=90);-moz-opacity:0.9;-khtml-opacity: 0.9;opacity: 0.9;}
ul,li{list-style:none;}
/ clearfix /
.clearfix{display:block;zoom:1;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
/ zhifubao **/
.header{width:100%;height:10%;float:left;background:#b3ffd7;}
.header select{width:60%;height:100%;float:left;padding:1px;font-size:16px;}
.btnChange{width:39%;height:100%;float:left;overflow:hidden;font-size:16px;line-height:3.5em;}

map,#list{height:90%;width:100%;}

list{text-align:left;}

.item{border-bottom:1px dashed #ccc;padding:10px;}
</style>
<script language="javascript" src="http://webapi.amap.com/maps?v=1.2&key=【您的key】"></script>
</head>
<body onLoad="mapInit()">

</body> <script language="javascript"> function display(id1,id2){ document.getElementById('map').style.display = 'none'; document.getElementById('list').style.display = 'none'; document.getElementById('iListBtn').style.display = 'none'; document.getElementById('iMapBtn').style.display = 'none'; document.getElementById(id1).style.display = 'block'; document.getElementById(id2).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('【您的tableID】', 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 : "carrefour.png", //您的個性化圖標 size : new AMap.Size(33,22), imageSize : new AMap.Size(33,22), imageOffset : new AMap.Pixel(-16,0) }; var myIcon = new AMap.Icon(IconOptions); var markerOption = { map:mapObj, icon: myIcon, offset: new AMap.Pixel(-15,-30), 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: "

" + d._name + "

" + "

地址：" + d._address + "

" + "

電話：" + d.tel + "

到這兒去

", 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 "; resultStr += "

" + (i+1) + "、" + resultArr[i]._name + "

"; resultStr += "

地址：" + resultArr[i]._address + "

"; resultStr += "

電話：" + resultArr[i].tel + "

"; resultStr += "

地圖：到這裏去

"; resultStr += ""; 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>

</html>
複製代碼

四、將以上代碼生成網址，填寫到支付寶服務窗裏。完成！

demo連接：http://zhaoziang.com/amap/carrefour.html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。