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

【高德地图API】汇润做爱地图技术大揭秘的更多相关文章

  1. 【高德地图API】从零开始学高德JS API(七)——定位方式大揭秘

    原文:[高德地图API]从零开始学高德JS API(七)——定位方式大揭秘 摘要:关于定位,分为GPS定位和网络定位2种.GPS定位,精度较高,可达到10米,但室内不可用,且超级费电.网络定位,分为w ...

  2. 【高德地图API】从零开始学高德JS API(一)地图展现——仙剑地图,麻点图,街景,室内图

    原文:[高德地图API]从零开始学高德JS API(一)地图展现——仙剑地图,麻点图,街景,室内图 摘要:关于地图的显示,我想大家最关心的就是麻点图,自定义底图的解决方案了吧.在过去,marker大于 ...

  3. 【高德地图API】从零开始学高德JS API(二)地图控件与插件——测距、圆形编辑器、鼠标工具、地图类型切换、鹰眼鱼骨

    原文:[高德地图API]从零开始学高德JS API(二)地图控件与插件——测距.圆形编辑器.鼠标工具.地图类型切换.鹰眼鱼骨 摘要:无论是控件还是插件,都是在一级API接口的基础上,进行二次开发,封装 ...

  4. 【百度地图API】如何自定义地图图层?实例:制作麻点图(自定义图层+热区)

    原文:[百度地图API]如何自定义地图图层?实例:制作麻点图(自定义图层+热区) 摘要:自定义地图图层的用途十分广泛.常见的应用,比如制作魔兽地图和清华校园地图(使用切图工具即可轻松实现).今天我们来 ...

  5. 【百度地图API】如何利用地图API制作汽车沿道路行驶的动画?——如何获得道路层数据

    原文:[百度地图API]如何利用地图API制作汽车沿道路行驶的动画?--如何获得道路层数据 有几个做汽车导航的朋友问我说,他们想在地图上制作一辆车沿着道路行驶的动画.可是,百度地图的道路数据并没有公开 ...

  6. 【百度地图API】多家地图API内存消耗对比测验(带源码)

    原文:[百度地图API]多家地图API内存消耗对比测验(带源码) 任务描述: 啊,美妙的春节结束了.酸奶小妹和妈妈的山西平遥之旅也宣告成功!距离平遥古城7km,有一个同样身为“世界文化遗产”的寺庙,叫 ...

  7. 【百度地图API】如何在地图上添加标注?——另有:坐标拾取工具+打车费用接口介绍

    原文:[百度地图API]如何在地图上添加标注?--另有:坐标拾取工具+打车费用接口介绍 摘要: 在这篇文章中,你将学会,如何利用百度地图API进行标注.如何使用API新增的打车费用接口. ------ ...

  8. 【百度地图API】多家地图API文件大小对比

    原文:[百度地图API]多家地图API文件大小对比 于2011.6.9日更新百度地图API文件大小.同时更新图片. 任务描述: 明天就是元宵佳节啦~这是一个团团圆圆的节日,于是,再次想把各家API聚在 ...

  9. 百度地图api通过地址显示地图,白名单

    百度地图api通过地址显示地图,白名单 http://developer.baidu.com/map/jsdemo.htm#i7_1?qq-pf-to=pcqq.c2c---------------- ...

随机推荐

  1. 【转】d3d的投影矩阵推导

    原帖地址:http://blog.csdn.net/popy007/article/details/4091967 上一篇文章中我们讨论了透视投影变换的原理,分析了OpenGL所使用的透视投影矩阵的生 ...

  2. hdu 2243 考研绝望——复杂的文字(AC自己主动机+矩阵高速功率)

    pid=2243" target="_blank" style="">题目链接:hdu 2243 考研路茫茫--单词情结 题目大意:略. 解题思 ...

  3. struts2于validate要使用

    package com.test.action; import com.opensymphony.xwork2.ActionSupport; import com.test.model.User; p ...

  4. [译]MVC应用程序生命周期

    原文:MVC Application Lifecycle 来一探究竟在MVC应用程序中参与请求处理的各个不同组件. 目录: 序言 背景 UrlRoutingModule RouteHandler Mv ...

  5. MVC常用特性

    MVC常用特性使用   简介 在以前的文章中,我和大家讨论如何用SingalR和数据库通知来完成一个消息监控应用. 在上一篇文章中,我介绍了如何在MVC中对MongoDB进行CRUD操作. 今天,我将 ...

  6. stringstream转换CString为string出错

    使用stringstream转换CString为string时,调试时发现是CString赋给stringstream没有问题,stringstram赋给string就不行,倒也不是没有赋成功,只是赋 ...

  7. [SQL Server优化]善用系统监视器,确定系统瓶颈

    原文:[SQL Server优化]善用系统监视器,确定系统瓶颈 来自: http://hi.baidu.com/solorez/blog/item/f82038fa0e71b78d9e51468c.h ...

  8. springmvc 接收对象 滴灌摘要

    js 对象 该阵列看起来像 我明白http://blog.csdn.net/baicp3/article/details/12752255本文 我们指示样品棒 data3一个js对象.遗嘱java当代 ...

  9. CentOS 忘记 root password处理

    在倒计时启动时间,按任意键进入,例如下面的页面 输入 e. 进入这个页面.上下移动至高亮条到中间 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQ29yZV ...

  10. 使用WireShark简单分析ICMP报文

    ICMP协议介绍 1.ICMP是"Internet Control Message Protocol"(Internet控制消息协议)的缩写. 它是TCP/IP协议族的一个子协议. ...