【高德地图API】汇润运营地图技术大揭秘

　　昨日收到了高德地图微信公众号的消息推送，说有【一大波免费情趣用品正在袭来】，点进去看了一眼，说一个电商公司（估计是卖情趣用品的）用高德云图制作了一张可以标记做爱地点与详情的地图。这不就是中国版的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！！！好高的分数，我从来没玩出来过……桑心……