【高德地图API】汇润做爱地图技术大揭秘

阅读量：5869 次

发布时间：2019-06-19

本文共 6147 字，大约阅读时间需要 20 分钟。

原文:

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

因为浏览器定位需要时间，如果进入地图界面后，再使用浏览器定位，会让用户感觉要等待很久。

不信大家可以看官方的浏览器定位，速度不会太快的：

所以为了提高用户体验，让用户感觉没有等待时间，这就需要打开页面立刻定位，但又不能显示出地图。

于是，可以猜到说明页面只是一个覆盖层，是一个“障眼法”。

当用户点击立刻参与的时候，这个层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://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查询    });}