原文:【高德地图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！！！好高的分数，我从来没玩出来过……桑心……
![]()
