昨日收到了高德地圖微信公眾號的訊息推送，說有【一大波免費情趣用品正在襲來】，點進去看了一眼，說一個電商公司（估計是賣情趣用品的）用高德雲圖製作了一張可以標記做愛地點與詳情的地圖。這不就是中國版的I just made love麼？
滑到螢幕底下，看了看閱讀量，哇塞，居然有4萬3！！！說明實在是有很多人關注做愛地圖啊。本著研究地圖的心情（絕對不是為了什麼價值300的智慧情趣用品！），我也就點選了【閱讀原文】……
好吧，為了證明我真的不是為了獎品，我會一邊寫活動步驟，一邊揭祕其中的LBS技術。
----------------------------------------------------------------------------------------
一、說明頁面
1、瀏覽器定位
進入說明頁面，即跳出一個定位允許的彈窗。
在微信裡的webview頁面是如何定位的呢，答案肯定是“瀏覽器定位”啦。
瀏覽器定位程式碼：
function mapInit () { mapObj = new AMap.Map('iCenter'); mapObj.plugin('AMap.Geolocation', function () { geolocation = new AMap.Geolocation({ enableHighAccuracy: true,//是否使用高精度定位，預設:true timeout: 10000, //超過10秒後停止定位，預設：無窮大 maximumAge: 0, //定位結果快取0毫秒，預設：0 convert: true, //自動偏移座標，偏移後的座標為高德座標，預設：true showButton: true, //顯示定位按鈕，預設：true buttonPosition: 'LB', //定位按鈕停靠位置，預設：'LB'，左下角 buttonOffset: new AMap.Pixel(10, 20),//定位按鈕與設定的停靠位置的偏移量，預設：Pixel(10, 20) showMarker: true, //定位成功後在定位到的位置顯示點標記，預設：true showCircle: true, //定位成功後用圓圈表示定位精度範圍，預設：true panToLocation: true, //定位成功後將定位到的位置作為地圖中心點，預設：true zoomToAccuracy:true //定位成功後調整地圖視野範圍使定位位置及精度範圍視野內可見，預設：false }); mapObj.addControl(geolocation); AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位資訊 AMap.event.addListener(geolocation, 'error', onError); //返回定位出錯資訊 }); geolocation.getCurrentPosition(); //啟動定位 };
2、提升使用者體驗
因為瀏覽器定位需要時間，如果進入地圖介面後，再使用瀏覽器定位，會讓使用者感覺要等待很久。
不信大家可以看官方的瀏覽器定位，速度不會太快的：http://lbs.amap.com/api/javascript-api/example/g/0704-2/
所以為了提高使用者體驗，讓使用者感覺沒有等待時間，這就需要開啟頁面立刻定位，但又不能顯示出地圖。
於是，可以猜到說明頁面只是一個覆蓋層，是一個“障眼法”。
當使用者點選立刻參與的時候，這個層display:none了而已。
3、定位失敗策略
瀏覽器定位當然不可能100%成功。原因是：
1、使用者不允許網頁使用位置
2、瀏覽器不支援HTML5中的定位
3、PC瀏覽器沒有手機瀏覽器定位成功率高，因為手機例如iPhone上可以獲取GPS資訊
所以，這個活動在定位失敗時，會自動定位到深圳一個點。
難道這就是活動裡介紹的，“邂逅瀧澤蘿拉”麼？呵呵，關掉定位就好了啊。
不過我也百度了一下，瀧澤蘿拉的確是在這個位置這個時間，給該品牌做了帶鹽，還穿著夜光衣……
還在百度上發現了一個祕密，這女孩兒是92年的……混血……女明星……
二、地圖頁面
1、新增覆蓋物
當使用者允許位置使用，並且定位成功的話，就會自動定位到使用者的地點。
這時會顯示周圍有哪些marker，這裡的marker都是分男女的，是2種不同的marker，通過更改圖片url即可實現。
覆蓋物程式碼：
//例項化點標記 function addMarker(){ marker = new AMap.Marker({ icon:"marker-female.png", //換圖片即可實現男女marker喔 position:new AMap.LngLat(110.405467,39.927761) }); marker.setMap(mapObj); //在地圖上新增點 }
覆蓋物的新增邏輯，用到的是雲圖的多邊形檢索，將多邊形設定為當前螢幕可視範圍。
獲取可視區域，用mapObj.getBounds()。然後得到西南角（左下角）和東北角（右上角）。
用2點即可構建一個矩形，是不是超級方便！！可視區域雲檢索程式碼：
//多邊形檢索函式 function cloudSearch() { var curView = mapObj.getBounds(); //獲取可視區域 mapObj.clearMap(); var arr = new Array(); //繪製多邊形 arr.push(curView.getSouthWest()); //獲取左下角 arr.push(curView.getNorthEast()); //獲取右上角 var search; //載入CloudDataSearch服務外掛 mapObj.plugin(["AMap.CloudDataSearch"], function() { search = new AMap.CloudDataSearch('【您的雲圖tableid】'); //構造雲資料檢索類 AMap.event.addListener(search, "complete", cloudSearch_CallBack); //查詢成功時的回撥函式 AMap.event.addListener(search, "error", errorInfo); //查詢失敗時的回撥函式 search.searchInPolygon(arr); //多邊形檢索，自動變成矩形。 }); }
2、覆蓋物動畫
點選地圖上的男女圖示，都會跳動一下。這裡用到的是覆蓋物動畫。程式碼：
function cartoon(){ marker.setAnimation('AMAP_ANIMATION_BOUNCE'); //設定點標記的動畫效果，此處為彈跳效果 }
延時2秒關閉覆蓋物動畫，程式碼：
function closeCartoon(){ marker.setAnimation('AMAP_ANIMATION_NONE'); //關閉動畫 } setTimout(closeCartoon(),2000); //延時2秒關閉動畫
3、地圖事件
當螢幕擴大，覆蓋物會增加；地圖經過的地方，marker都會被保留，不會重複渲染。
這裡給地圖新增拖拽結束事件，當拖拽結束，就進行當前可視區域的雲檢索。地圖事件程式碼：
//地圖移動結束，進行雲檢索 AMap.event.addListener(mapObj,'moveend',function(){ cloudSearch();
});
如圖：
4、麻點圖
當地圖越縮越小，圖示達到一定數量後，就會密密麻麻看不見。
於是，麻點圖派上了用場。
程式碼：
//載入雲圖層外掛 function addCloudLayer() { mapObj.plugin('AMap.CloudDataLayer', function () {
var cloudDataLayer = new AMap.CloudDataLayer('【您的雲圖tableid】'); //例項化雲圖層類 cloudDataLayer.setMap(mapObj); //疊加雲圖層到地圖 AMap.event.addListener(cloudDataLayer, 'click', function (result) { cartoon();//marker動畫，談起tip }); }
5、地址解析
在地圖頂部，有個小小的橫條，裡面有地圖中心點的位置資訊。這裡就是用的地址解析。程式碼：
var lnglatXY = mapObj.getCenter(); //獲取地圖中心點 function geocoder() { var MGeocoder; //載入地理編碼外掛 mapObj.plugin(["AMap.Geocoder"], function() { MGeocoder = new AMap.Geocoder({ radius: 1000, extensions: "all" }); //返回地理編碼結果 AMap.event.addListener(MGeocoder, "complete", geocoder_CallBack); //逆地理編碼 MGeocoder.getAddress(lnglatXY); }); } //回撥函式 function geocoder_CallBack(data) { //返回地址描述 var address = data.regeocode.formattedAddress; alert(address);
三、內容選擇頁面
1、雲端儲存
使用者選擇完畢詳情內容，點提交按鈕，就發起請求。
這裡使用雲端儲存介面，官方說明：http://lbs.amap.com/yuntu/reference/cloudstorage/#yuntureference_creatdata
上圖中有“女生，室外”等選項，那麼傳送請求程式碼為：
http://yuntuapi.amap.com/datamanage/data/create?key=【使用者key】&tableid=【雲圖tableid】&data=["name":"1","location":"116,39","sex":"female","place":"outside","other":"tt|drag","star":"5","healthy":"130"]
根據選項設計資料庫結構：
|
名稱 |
說明 |
是否必填 |
||
|
Key |
客戶唯一標識 |
是 |
||
|
Tableid |
資料表唯一標識 |
是 |
||
|
data |
資料 |
是 |
||
|
|
_name |
資料名稱（用id號） |
是 |
|
|
|
_location |
座標 |
是 |
|
|
|
_sex |
性別 男：male 女：female |
是 |
|
|
|
_place |
家：home 酒店：hotel 室外：outdoor 車內：car 船上：boat |
是 |
|
|
|
_other |
其他準備 至少選1個 |
是 |
|
|
|
|
_tt |
安全套 Yes:1 No:0 |
|
|
|
|
_bath |
洗澡 Yes:1 No:0 |
|
|
|
|
_hottea |
熱水 Yes:1 No:0 |
|
|
|
|
_drag |
藥物 Yes:1 No:0 |
|
|
|
|
_nothing |
什麼都沒有 Yes:1 No:0 |
|
|
|
_stars |
使用者打分，滿意度 值：5,4,3,2,1 型別：number |
是 |
|
|
|
_healthy |
幸福指數 計算規則詳見5、幸福指數計算 型別：number |
是 |
|
|
|
_level |
擊敗百分之多少的人，計算規則詳見6、等級計算規則 型別：number |
是 |
|
|
|
_duihuanma |
兌換碼 型別：string |
否 |
|
2、雲檢索
點選一個marker，談起tip；點選tip則到詳情頁面。
這裡用的是雲檢索中的ID檢索。
程式碼：
//根據資料id查詢資料詳情 function cloudSearch(){ mapObj.clearMap(); var search; mapObj.plugin(["AMap.CloudDataSearch"], function() { search = new AMap.CloudDataSearch('【雲圖tableid】'); //構造雲資料檢索類 AMap.event.addListener(search, "complete", cloudSearch_CallBack); //查詢成功時的回撥函式 AMap.event.addListener(search, "error", errorInfo); //查詢失敗時的回撥函式 search.searchById("1"); //根據id查詢 }); }
四、得分頁面
最後一個得分頁面，與LBS沒有太多關係。但裡面也有幾個點可以拿來說一說。
一是分數計算，在內容選擇頁面發起請求時，根據每個選項的得分不同，就計算好分數，然後雲端儲存時，直接把分數傳送出去。
二是中獎規則，中獎規則應該由後臺給出，這樣可以防止作弊。
三是微博話題，看了看這個活動只有客觀選擇題，沒有主觀題，可能是為了規避敏感詞的法律風險。所以，把討論都放在了微博話題裡，並設定了微博抽獎。
四是微信分享，微信中的分享必須調起native元件，所以做了一個介面提示使用者去點選即可。
五、高分祕籍！！
技術部分已經結束，這裡是我玩遊戲的心得，算是攻略吧。
我是這樣玩的，先選最少的選項。多選裡面，每次只選1個，這樣很容易確定多選中的分數。
但是藥物那個不知道具體分數，好像每次都不太一樣。
|
專案 |
分數 |
|
|
|
||
|
其他準備 |
TT |
30 |
|
|
洗澡 |
10 |
|
|
熱水 |
5 |
|
|
藥物 |
每次都不太一樣 |
|
|
Nothing |
-5 |
|
|
||
微博上有人曬分數，居然有個玩家得了134！！！好高的分數，我從來沒玩出來過……桑心……
