【高德地图API】汇润运营地图技术大揭秘
汇润云购利用高德云图制作了一张能存储海量位置数据的，匿名发布做爱地点与详情的地图。虽然这只是一个运营活动，感觉似乎仿佛也抄袭了国外的I just made love，但其庞大的参与量，还是让我觉得可以写一篇相关的技术分析，让更多人可以利用高德云图，制作形式有趣的地图。更重要的是，这是一个很好的获得UGC用户贡献的方式，也能方便地进行大数据分析。
昨日收到了高德地图微信公众号的消息推送，说有【一大波免费情趣用品正在袭来】，点进去看了一眼，说一个电商公司（估计是卖情趣用品的）用高德云图制作了一张可以标记做爱地点与详情的地图。这不就是中国版的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！！！好高的分数，我从来没玩出来过……桑心……