昨日收到了高德地圖微信公衆號的消息推送，說有【一大波免費情趣用品正在襲來】，點進去看了一眼，說一個電商公司（估計是賣情趣用品的）用高德雲圖製作了一張可以標記做愛地點與詳情的地圖。這不就是中國版的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',cloudSearch();
如圖：
4、麻點圖
當地圖越縮越小，圖標達到一定數量後，就會密密麻麻看不見。
於是，麻點圖派上了用場。
代碼：
'AMap.CloudDataLayer', () {
cloudDataLayer = AMap.CloudDataLayer('');
cloudDataLayer.setMap(mapObj);
AMap.event.addListener(cloudDataLayer, 'click',
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"]
根據選項設計數據庫結構：
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個，這樣很容易確定多選中的分數。
但是藥物那個不知道具體分數，好像每次都不太一樣。
微博上有人曬分數，居然有個玩家得了134！！！好高的分數，我從來沒玩出來過……桑心……
