[原创]利用百度地图未公开定位"API" Js查找附近门店

搬砖王

技术分享 1月前 1 浏览

[原创]利用百度地图未公开定位"API" Js查找附近门店

前段时间在公司工作时接到一个项目，要求使用微信公众平台API接口定位微信号所在位置的附近门店，微信官方的接口文档是这样的：
<xml>
<ToUserName><![CDATA[toUser]]></ToUserName>
<FromUserName><![CDATA[fromUser]]></FromUserName>
<CreateTime>123456789</CreateTime>
<MsgType><![CDATA[event]]></MsgType>
<Event><![CDATA[LOCATION]]></Event>
<Latitude>23.137466</Latitude>
<Longitude>113.352425</Longitude>
<Precision>119.385040</Precision>
</xml>
参数说明：
参数描述
ToUserName 开发者微信号
FromUserName    发送方帐号（一个OpenID）
CreateTime    消息创建时间（整型）
MsgType    消息类型，event
Event    事件类型，LOCATION
Latitude    地理位置纬度
Longitude    地理位置经度
Precision    地理位置精度
即采用微信自带功能“发送我的地理位置”，微信服务器封装后返回附近门店。
但是采用XML方式以及数据来源问题无疑比较繁琐。微信提供的东西固然好，但却没有提供计算附近地址的功能。且让用户多做一次发送地理位置的操作何不如将其实现在web上。
因此我们需要一种简洁的调用方式，只需要我们自己实现定位功能，搜索附近门店的功能则交由某些公众平台系统。
于是在偶然之间发现了百度地图中有一个根据关键字搜索门店的功能，但没有提供定位当前位置功能。
在经过页面的参数分析和计算后，有了以下实现：

<div class="ui-feedback indent show">

			<div class="msg">

				<i class="ico-success"></i>

					<h2 class="tit">

						正在定位您的所在地点....

					</h2>

				<div class="info"></div>

			</div>

		</div>

		<div class="ui-feedback indent hidden" style="display:none;">

				<div class="msg">

					<i class="ico-warn"></i>

					<h2 class="tit">定位失败！</h2>

					<div class="info">您好，请检查您的设备是否支持导航定位或是否开启GPS位置服务功能</div>

				</div>

		</div>

	<!--  <input type="button" onclick="getGeo();"/>  -->

	<script type="text/javascript">

	<!--

	  function lonlat2mercator(lonlat){

		var  mercator={x:0,y:0};

		var x = lonlat.x *20037508.34/179.91963298551755551678377995356;

		var y = Math.log(Math.tan((90+lonlat.y)*Math.PI/360))/(Math.PI/180);

		y = y *20037508.34/181.29087434340528;

		mercator.x = x;

		mercator.y = y;

		return mercator ;

	   }

	function getGeo()

	{

		var geolocation = new BMap.Geolocation();

		geolocation.getCurrentPosition(function(r){

		if(this.getStatus() == BMAP_STATUS_SUCCESS){

			var lonlat = {x:r.point.lng,y:r.point.lat};

		  	var mercator = lonlat2mercator(lonlat);

			var url = "http://map.baidu.com/mobile/webapp/search/search/qt=s&wd=[COLOR="Red"]此处门店名的字符编码[/COLOR]&searchFlag=bigBox&version=5&exptype=dep&nb_x=" + mercator.x + "&nb_y=" + mercator.y + "¢er_rank=1/vt=";

			window.location = url;

		}else

			{

				//alert('获取地理位置失败，请确认定位服务是否被关闭');

				jQuery('.show').hide();

				jQuery('.hidden').show();

			}

		});

	}

    function loadScript() {

  	  var script = document.createElement("script");

  	  script.src = "http://api.map.baidu.com/api?v=1.5&ak=3d8a2804**8710a6adf9cac***558fe&callback=getGeo";

  	  document.body.appendChild(script);

  	}

 	 window.onload = loadScript;

 	 //-->

	</script>

实现的过程中墨卡托投影坐标转换参数有点不同。经修正后的误差基本在50m-300m以内。
如果是标准方式，套用在百度地图上，应该在13km左右。
当然，如果是需要让用户看到详细门店信息的朋友还是请使用微信官方的API接口，因为官方图文格式信息的URL是可以自定义的
(跳转门店介绍网址之类，虽然百度的很全面，但是带上logo就不好了)。
定位效果：