您现在的位置是：首页 > 文章详情

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

日期：2015-01-07点击：688收藏

原文:【高德地图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查询  }); }