【高德地圖API】匯潤作愛地圖技術大揭祕

時間 2019-12-02

標籤高德地圖API 地圖技術揭祕简体版

原文原文鏈接

　　昨日收到了高德地圖微信公衆號的消息推送，說有【一大波免費情趣用品正在襲來】，點進去看了一眼，說一個電商公司（估計是賣情趣用品的）用高德雲圖製做了一張能夠標記作愛地點與詳情的地圖。這不就是中國版的I just made love麼？html

　　滑到屏幕底下，看了看閱讀量，哇塞，竟然有4萬3！！！說明實在是有不少人關注作愛地圖啊。本着研究地圖的心情（絕對不是爲了什麼價值300的智能情趣用品！），我也就點擊了【閱讀原文】……java

　　好吧，爲了證實我真的不是爲了獎品，我會一邊寫活動步驟，一邊揭祕其中的LBS技術。web

----------------------------------------------------------------------------------------數據庫

1、說明頁面

一、瀏覽器定位

進入說明頁面，即跳出一個定位容許的彈窗。api

在微信裏的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(); //啓動定位
};

二、提高用戶體驗

由於瀏覽器定位須要時間，若是進入地圖界面後，再使用瀏覽器定位，會讓用戶感受要等待好久。安全

不信你們能夠看官方的瀏覽器定位，速度不會太快的：http://lbs.amap.com/api/javascript-api/example/g/0704-2/微信

因此爲了提升用戶體驗，讓用戶感受沒有等待時間，這就須要打開頁面馬上定位，但又不能顯示出地圖。

因而，能夠猜到說明頁面只是一個覆蓋層，是一個「障眼法」。

當用戶點擊馬上參與的時候，這個層display:none了而已。

三、定位失敗策略

瀏覽器定位固然不可能100%成功。緣由是：

一、用戶不容許網頁使用位置

二、瀏覽器不支持HTML5中的定位

三、PC瀏覽器沒有手機瀏覽器定位成功率高，由於手機例如iPhone上能夠獲取GPS信息

因此，這個活動在定位失敗時，會自動定位到深圳一個點。

難道這就是活動裏介紹的，「邂逅瀧澤蘿拉」麼？呵呵，關掉定位就行了啊。

不過我也百度了一下，瀧澤蘿拉的確是在這個位置這個時間，給該品牌作了帶鹽，還穿着夜光衣……

還在百度上發現了一個祕密，這女孩兒是92年的……混血……女明星……

2、地圖頁面

一、添加覆蓋物

當用戶容許位置使用，而且定位成功的話，就會自動定位到用戶的地點。

這時會顯示周圍有哪些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); //多邊形檢索，自動變成矩形。
    });
}

二、覆蓋物動畫

點擊地圖上的男女圖標，都會跳動一下。這裏用到的是覆蓋物動畫。代碼：

function cartoon(){
    marker.setAnimation('AMAP_ANIMATION_BOUNCE'); //設置點標記的動畫效果，此處爲彈跳效果
}

延時2秒關閉覆蓋物動畫，代碼：

function closeCartoon(){
    marker.setAnimation('AMAP_ANIMATION_NONE'); //關閉動畫 
} 
setTimout(closeCartoon(),2000); //延時2秒關閉動畫

三、地圖事件

當屏幕擴大，覆蓋物會增長；地圖通過的地方，marker都會被保留，不會重複渲染。

這裏給地圖添加拖拽結束事件，當拖拽結束，就進行當前可視區域的雲檢索。地圖事件代碼：

//地圖移動結束，進行雲檢索
AMap.event.addListener(mapObj,'moveend',function(){
    cloudSearch();
});

如圖：

四、麻點圖

當地圖越縮越小，圖標達到必定數量後，就會密密麻麻看不見。

因而，麻點圖派上了用場。

代碼：

//加載雲圖層插件
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
    　　});
}

五、地址解析

在地圖頂部，有個小小的橫條，裏面有地圖中心點的位置信息。這裏就是用的地址解析。代碼：

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);

3、內容選擇頁面

一、雲存儲

用戶選擇完畢詳情內容，點提交按鈕，就發起請求。

這裏使用雲存儲接口，官方說明：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	幸福指數計算規則詳見五、幸福指數計算類型：number		是
	_level	擊敗百分之多少的人，計算規則詳見六、等級計算規則類型：number		是
	_duihuanma	兌換碼類型：string		否

二、雲檢索

點擊一個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查詢
    });
}