【云图】如何设置支付宝里的家乐福全国连锁店地图？
生活随笔
收集整理的這篇文章主要介紹了
【云图】如何设置支付宝里的家乐福全国连锁店地图？
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
【云圖】如何設置支付寶里的家樂福全國連鎖店地圖？
原文:【云圖】如何設置支付寶里的家樂福全國連鎖店地圖？
?摘要：本文詳細講解了，如何設置支付寶服務窗。商家如何將自己的全國連鎖店放置到云圖上，并且在支付寶服務窗中提供地圖查詢功能。本文所包含的地圖服務為：
1、按城市查詢門店地址；
2、列表模式和地圖模式的方便切換；
3、調起打電話服務，更快與客戶直接接觸；
4、地圖定位，導航，查周邊。
?
----------------------------------------------------------------------------
一、支付寶
1、服務窗設置
登錄支付寶服務窗：https://fuwu.alipay.com/platform/queryMenu.htm
自定義菜單 -> 主菜單 -> 有子級菜單
填寫子菜單名稱，設置為跳轉網頁，并且放入網址。比如家樂福門店的網址：http://zhaoziang.com/amap/carrefour.html??
（家樂福門店地圖的制作在第三部分 云圖）
最后點擊發布。
?
2、生成二維碼
在服務未審核通過之前，只能通過二維碼進行關注。
賬戶設置 -> 基本信息
將您的二維碼分享到微博，讓更多的人知道你提供支付寶服務。
?
3、查看效果
打開支付寶客戶端，掃描二維碼。
?
立刻添加 -> 立刻查看 -> 成功案例 -> 家樂福
?
二、數據準備
1、門店數據
從家樂福官網上獲取門店數據：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號新光城市廣場地下一、二層,(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?
2、登錄云圖，導入數據。
登錄云圖：http://yuntu.amap.com/datamanager/index.html
點擊新建地圖?
?
導入CSV表格數據，然后預覽。
?
就能看到全國門店分布圖了
?
三、云圖的網頁制作
為了讓地圖可以進行分城市查詢，列表模式展示，調起打電話功能，調起地圖導航、地圖定位、搜索周邊等功能，需要一段網站代碼。
代碼已經寫好了，只需要你加入key和tableID即可。
1、獲取key的位置：http://api.amap.com/key
2、獲取云圖tableID：進入你的云圖->獲取tableID
?
3、代碼
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <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()"><div class="header clearfix"><select onchange="getType(this.options[this.selectedIndex].text)" ><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" style="display:none;" onclick="display('map','iListBtn');" href="javascript:void(0);">地圖模式</a></div></div><div id="map" class="clearfix"></div><div id="list" style="display:none;">正在讀取數據……</div> </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: "<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> </html>?
4、將以上代碼生成網址，填寫到支付寶服務窗里。完成！
demo鏈接：http://zhaoziang.com/amap/carrefour.html
?
?
posted on 2015-01-08 14:28 NET未來之路 閱讀(...) 評論(...) 編輯 收藏轉載于:https://www.cnblogs.com/lonelyxmas/p/4210871.html
總結
以上是生活随笔為你收集整理的【云图】如何设置支付宝里的家乐福全国连锁店地图？的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： K均值算法总结
- 下一篇： 码农与UI沟通的日常