【云图】如何设置支付宝里的家乐福全国连锁店地图？
生活随笔
收集整理的這篇文章主要介紹了
【云图】如何设置支付宝里的家乐福全国连锁店地图？
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
【云圖】如何設(shè)置支付寶里的家樂(lè)福全國(guó)連鎖店地圖？
原文:【云圖】如何設(shè)置支付寶里的家樂(lè)福全國(guó)連鎖店地圖？
?摘要：本文詳細(xì)講解了，如何設(shè)置支付寶服務(wù)窗。商家如何將自己的全國(guó)連鎖店放置到云圖上，并且在支付寶服務(wù)窗中提供地圖查詢功能。本文所包含的地圖服務(wù)為：
1、按城市查詢門(mén)店地址；
2、列表模式和地圖模式的方便切換；
3、調(diào)起打電話服務(wù)，更快與客戶直接接觸；
4、地圖定位，導(dǎo)航，查周邊。
?
----------------------------------------------------------------------------
一、支付寶
1、服務(wù)窗設(shè)置
登錄支付寶服務(wù)窗：https://fuwu.alipay.com/platform/queryMenu.htm
自定義菜單 -> 主菜單 -> 有子級(jí)菜單
填寫(xiě)子菜單名稱(chēng)，設(shè)置為跳轉(zhuǎn)網(wǎng)頁(yè)，并且放入網(wǎng)址。比如家樂(lè)福門(mén)店的網(wǎng)址：http://zhaoziang.com/amap/carrefour.html??
（家樂(lè)福門(mén)店地圖的制作在第三部分 云圖）
最后點(diǎn)擊發(fā)布。
?
2、生成二維碼
在服務(wù)未審核通過(guò)之前，只能通過(guò)二維碼進(jìn)行關(guān)注。
賬戶設(shè)置 -> 基本信息
將您的二維碼分享到微博，讓更多的人知道你提供支付寶服務(wù)。
?
3、查看效果
打開(kāi)支付寶客戶端，掃描二維碼。
?
立刻添加 -> 立刻查看 -> 成功案例 -> 家樂(lè)福
?
二、數(shù)據(jù)準(zhǔn)備
1、門(mén)店數(shù)據(jù)
從家樂(lè)福官網(wǎng)上獲取門(mén)店數(shù)據(jù)：http://www.carrefour.com.cn/Store/Store.aspx
存入excel中，并保存為CSV格式，uft-8編碼。（小于10000條數(shù)據(jù)）
?
該教程為示例，所以只提供了北京和廣州2個(gè)城市的門(mén)店數(shù)據(jù)。其中，廣州數(shù)據(jù)為：
name,address,tel,pic 金沙店,廣州市海珠區(qū)工業(yè)大道北76-80號(hào)家信商業(yè)中心,(020) 8961 1230,http://imgs.carrefour.com.cn/Store/678_282_D34209E77BF840058C2B6F5CBAE27610.jpg 康王店,廣州市荔灣區(qū)康王中路656號(hào)新光城市廣場(chǎng)地下一、二層,(020) 8133 7619,http://imgs.carrefour.com.cn/Store/678_282_974C095FE09144C6B22C35CD95A8673D.jpg 萬(wàn)國(guó)店,廣州海珠區(qū)前進(jìn)路40號(hào)萬(wàn)國(guó)廣場(chǎng)2-3樓,(020) 8426 2633,http://imgs.carrefour.com.cn/Store/678_282_A6F46DFAA74E488AB0F69413F4CE411A.jpg 新市店,廣州市白云區(qū)機(jī)場(chǎng)路1339號(hào)百信廣場(chǎng)家樂(lè)福,(020) 3663 5319,http://imgs.carrefour.com.cn/Store/678_282_594A48A43B994586955F7CFB4C340BA9.jpg 員村店,廣州市天河區(qū)員村恒隆街3號(hào),(020) 8564,http://imgs.carrefour.com.cn/Store/678_282_ED02FD7F9D1D4901A17144A9B3CC98D6.jpg?
2、登錄云圖，導(dǎo)入數(shù)據(jù)。
登錄云圖：http://yuntu.amap.com/datamanager/index.html
點(diǎn)擊新建地圖?
?
導(dǎo)入CSV表格數(shù)據(jù)，然后預(yù)覽。
?
就能看到全國(guó)門(mén)店分布圖了
?
三、云圖的網(wǎng)頁(yè)制作
為了讓地圖可以進(jìn)行分城市查詢，列表模式展示，調(diào)起打電話功能，調(diào)起地圖導(dǎo)航、地圖定位、搜索周邊等功能，需要一段網(wǎng)站代碼。
代碼已經(jīng)寫(xiě)好了，只需要你加入key和tableID即可。
1、獲取key的位置：http://api.amap.com/key
2、獲取云圖tableID：進(jìn)入你的云圖->獲取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>家樂(lè)福全國(guó)門(mén)店</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>全國(guó)</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;">正在讀取數(shù)據(jù)……</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); //初始化地圖對(duì)象，加載地圖 function mapInit(){mapObj = new AMap.Map("map",{resizeEnable: true,center: pBeijing, //地圖中心點(diǎn) level:12 //地圖顯示的比例尺級(jí)別 });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); //構(gòu)造云數(shù)據(jù)檢索類(lèi) AMap.event.addListener(cloudSearch, "complete", cloudSearch_CallBack); //查詢成功時(shí)的回調(diào)函數(shù) AMap.event.addListener(cloudSearch, "error", errorInfo); //查詢失敗時(shí)的回調(diào)函數(shù) 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", //您的個(gè)性化圖標(biāo)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); } //回調(diào)函數(shù)-成功 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]); //添加大標(biāo)注 }if (document.getElementById('map').style.display !== 'none') {mapObj.setFitView();}document.getElementById("list").innerHTML = resultStr; } //回調(diào)函數(shù)-失敗 function errorInfo(data) {resultStr = data.info;document.getElementById("list").innerHTML = resultStr; } //清空地圖 function clearMap(){mapObj.clearMap();document.getElementById("list").innerHTML = '正在讀取數(shù)據(jù)……'; } //索引云圖 function getType(iPrivance){if(iPrivance=="全國(guó)"){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({ //構(gòu)造地點(diǎn)查詢類(lèi) pageSize:1,pageIndex:1,city:"" //城市 });AMap.event.addListener(MSearch, "complete", keywordSearch_CallBack);//返回地點(diǎn)查詢結(jié)果 MSearch.search(id); //關(guān)鍵字查詢 }); } //城市查詢后定位 function keywordSearch_CallBack(data) {var iPoint = data.poiList.pois[0].location;mapObj.setZoomAndCenter(10,iPoint); } </script> </html>?
4、將以上代碼生成網(wǎng)址，填寫(xiě)到支付寶服務(wù)窗里。完成！
demo鏈接：http://zhaoziang.com/amap/carrefour.html
?
?
posted on 2015-01-08 14:28 NET未來(lái)之路 閱讀(...) 評(píng)論(...) 編輯 收藏轉(zhuǎn)載于:https://www.cnblogs.com/lonelyxmas/p/4210871.html
總結(jié)
以上是生活随笔為你收集整理的【云图】如何设置支付宝里的家乐福全国连锁店地图？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： K均值算法总结
- 下一篇： 码农与UI沟通的日常