【雲圖】如何設定微信裡的全國實體店地圖？

酸奶小妹發表於2014-06-10
地圖

商家福利！如何提高微信公眾平臺的粉絲數？如何更好地與粉絲互動？如何為客戶提供更好的網路服務？

答案是，為自己的微信公眾平臺，新增地圖功能。有了地圖，您的使用者能更好更快地找到您實體店的地址，快捷地查詢路線。不同實體店還可以新增不同的電話號碼，讓使用者一鍵撥號，增強互動增強體驗。

什麼什麼，您不懂微信？不要緊，本文詳細講述瞭如何設定微信公眾平臺，如何將實體店地圖新增到微信公眾平臺中。

什麼什麼，您不懂開發不懂地圖？不要緊，高德提供如下服務：

1、高德【雲圖】，提供實體店位置、照片、電話、名稱等的儲存、顯示與檢索。

2、高德【URI API】，提供定位、駕車、搜周邊等地圖功能。

效果圖：

 

 

商家如何在微信上開啟地圖功能？解決方案請看本文~

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

一、微信的準備

1、登入微信公眾平臺：https://mp.weixin.qq.com

2、點選功能->高階功能->編輯模式

3、自定義選單->設定

 

4、新增選單與子選單，選擇連結方式。

放入自己的地圖連結：http://www.amfaqua.com/map/amf.html

連結是網站地圖，網站地圖如何做，在第三部分會介紹。

 

5、大功告成，看看效果！

 

二、微信效果展示

1、關注公眾微訊號：AMF400-6789-122

2、點選關於產品 -> 實體店地圖

 

3、跳轉到實體店地圖（地圖做法在第三部分）

 

 

4、地圖上的麻點圖，就是實體店分佈圖。點選地圖上的小紅點，彈出資訊視窗。

點選電話，可以直接調起打電話服務。

點選到這裡去，可以跳轉到高德mobile地圖。

 

6、點選右上角的列表模式，可是列出每個城市的實體店列表。

點選左邊的列表，可以進行城市切換。

點選電話，調起打電話服務。

點選到這裡去，調起高德mobile地圖。

 

三、【雲圖】與高德mobile地圖

1、申請一個開發者key：http://developer.amap.com/key

 

 

2、登入雲圖，點選新建地圖

雲圖登入地址：http://yuntu.amap.com/datamanager/

 

3、匯入您的實體店資料

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

 

4、點選預覽，就能看見您的實體店地圖啦

 

5、雲圖和高德mobile的程式碼，請大家檢視第四部分。

或者檢視上一篇教程《如何製作AMF生態魚缸實體店分佈圖》：http://www.cnblogs.com/milkmap/p/3778398.html

 

四、效果與原始碼

原始碼：

<!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>AMF海水農場實體店</title>
<link rel="stylesheet" type="text/css" href="amf.css" />
<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>
            <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" 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('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>
</html>

 

效果請關注【AMF海水農場】微信公眾號進行檢視。

 

demo連結：http://zhaoziang.com/amap/amf.html

 

 

相關文章