注意事项：
（1）如果手机设置不允许微信获取位置信息，则提示以上信息。
（2）上图参数获取的是GPS坐标，如使用百度地图，要做一定转换，将在location1.aspx中体现。
（3）所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用。
对应location.aspx.cs实现：
using Payment.WxWebHlper; using Payment.WxWebHlper.Actions; using System; using System.Globalization; using WxJsSDK; using WxPayAPI; namespace DTcms.Web.wxcrm { public partial class location : PageBase { protected string appId { get; set; } protected string timestamp { get; set; } protected string nonceStr { get; set; } protected string signature { get; set; } public static string WxJsApiParam { get; set; } public WxJsData ResultJsData { get; set; } protected void Page_Load(object sender, EventArgs e) { JudgeCode(); var webAuthorize = new WebAuthorizeAction(); Code2TokenResult = webAuthorize.Code2Token(Request["code"]); if (Code2TokenResult.HasError()) { Response.Redirect(Urls.PageOfLocation); GotoNonePage("获取用户凭证失败，请重新获取"); return; } GetUserInfoResult = webAuthorize.GetUserInfo(Code2TokenResult.access_token); if (GetUserInfoResult.HasError()) { GotoNonePage("获取用户信息失败，请重新获取"); } var userid = wxOperation.HasBind(GetUserInfoResult.openid); if (userid.Equals(Guid.Empty)) { Response.Redirect(Urls.Oauth2Url); GotoNonePage("微信用户未绑定"); } appId = WxPayConfig.APPID; timestamp = WxPayApi.GenerateTimeStamp(); nonceStr = WxPayApi.GenerateNonceStr(); //以下实现将在3、核心代码实现 体现 var jsApi = new JsApi(this); ResultJsData = jsApi.GetJsData(); WxJsApiParam = jsApi.GetJsApiParameters();//获取H5调起JS API参数 } } }
2、将微信GPS坐标转换为百度坐标
微信获取坐标成功后，页面自动跳转到location1.aspx，处理流程如下：
微信坐标—>转换为百度地图坐标—>根据百度地图API获取位置信息—>根据百度地图API显示坐标
<%@ Page Title="在线签到" Language="C#" MasterPageFile="~/wxcrm/Site.Master" AutoEventWireup="true" CodeFile="location1.aspx.cs" Inherits="DTcms.Web.wxcrm.location1" %> <asp:Content ContentPlaceHolderID="cphHead" runat="server"> <meta content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> #allmap { width: 100%; height: 300px; } </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=dhRLKMR9QUO4wHmnnSZTarta"></script> <script type="text/javascript"> //GPS坐标 var yy = <%= this.Request["longitude"] %>; //经度，浮点数，范围为180 ~ -180。 var xx = <%= this.Request["latitude"] %>; //纬度，浮点数，范围为90 ~ -90 var gpsPoint = new BMap.Point(xx,yy); var bxx = 0.0; var byy = 0.0; /* * ?title=webapi/guide/changeposition */ var PositionUrl = "http://api.map.baidu.com/geoconv/v1/?"; function changePosition(){ var str = "coords="+yy+","+xx+"&from=1&to=5"; var url = PositionUrl + str; $("#positionUrl").html(url+"&ak=dhRLKMR9QUO4wHmnnSZTartg"); var script = document.createElement('script'); script.src = url + '&ak=dhRLKMR9QUO4wHmnnSZTarta&callback=dealResult'; document.getElementsByTagName("head")[0].appendChild(script); } function dealResult(msg){ if(msg.status != 0){ alert("无正确的返回结果。"); $("#mask").hide(); return; } //JsonUti.convertToString(msg); bxx = msg.result[0].x; byy = msg.result[0].y; doOptions(); } function getBaiduPosition() { var url ="http://api.map.baidu.com/geoconv/v1/?coords="+yy+","+xx+"&from=1&to=5&ak=dhRLKMR9QUO4wHmnnSZTarta"; $.ajax({ url: url, success: function(data,status,xhr) { alert(status); alert(data.status); }, dataType: json }); } var ADVANCED_POST = ''; var advancedOptions = ''; var address; var map; function renderOption(response) { var html = ''; if (response.status ) { $("#mask").hide(); var text = "无正确的返回结果！"; alert(text); return; } var result = response.result; var location = response.result.location; var uri = 'http://api.map.baidu.com/marker?location='+ location.lat+','+location.lng +'&title='+response.result.level+'&content='+address+'&output=html'; var staticimageUrl = "http://api.map.baidu.com/staticimage?center=" + location.lng+','+location.lat + "&markers=" + location.lng+','+location.lat; html = '<p>坐标：纬度: ' + location.lat + " 经度: " + location.lng+'<br />'; html += '精度: '+response.result.precise+'<br />' ; html += '可信度: '+response.result.confidence +'<br />'; html += '地址类型: '+response.result.level+'</p>' ; html += '<p><img src="' + staticimageUrl + '" /></p>' ; html += '<p>分享该点: <a href="' + uri + '" target="_blank">' + uri + '</a></p>'; //将该链接设置成可单击 // 百度地图API功能 map = new BMap.Map("allmap"); var point = new BMap.Point(bxx, byy); var marker = new BMap.Marker(point); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中 map.centerAndZoom(point, 100); var opts = { width: 200, // 信息窗口宽度 height: 100, // 信息窗口高度 title: "我的位置", // 信息窗口标题 enableMessage: true,//设置允许信息窗发送短息 message: result.formatted_address } $("#divPo").html("当前位置：" + result.formatted_address); var infoWindow = new BMap.InfoWindow(result.formatted_address, opts); // 创建信息窗口对象 marker.addEventListener("click", function () { map.openInfoWindow(infoWindow, point); //开启信息窗口 }); var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), { offset: new BMap.Size(10, 25), // 指定定位位置 imageOffset: new BMap.Size(0, 0 - 10 * 25) // 设置图片偏移 }); var pois = result.pois; for(var i=0;i<pois.length;i++){ var marker = new BMap.Marker(new BMap.Point(pois[i].point.x,pois[i].point.y),{icon:myIcon}); // 创建标注 var name = pois[i].name; var addr = pois[i].addr; map.addOverlay(marker); // 将标注添加到地图中 addClickHandler(name,addr,marker); } $("#mask").hide(); $("#btnSign").show(); return; } function addClickHandler(name,addr,marker){ marker.addEventListener("click",function(e){ openInfo(name,addr,e)} ); } function openInfo(name,addr,e){ var p = e.target; var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat); var opts = { width: 200, // 信息窗口宽度 height: 100, // 信息窗口高度 title: name, // 信息窗口标题 enableMessage: true,//设置允许信息窗发送短息 message: addr } var infoWindow = new BMap.InfoWindow(addr,opts); // 创建信息窗口对象 map.openInfoWindow(infoWindow,point); //开启信息窗口 } function doOptions() { var script = document.createElement('script'); script.type = 'text/javascript'; ADVANCED_POST ="http://api.map.baidu.com/geocoder/v2/?ak=dhRLKMR9QUO4wHmnnSZTartg&callback=renderOption&location=" + byy + ","+bxx+ "&output=json&pois=2"; script.src = ADVANCED_POST; document.body.appendChild(script); }; $(function () { $("#mask").show(); $("#btnSign").hide(); changePosition(); }); </script> </asp:Content> <asp:Content ContentPlaceHolderID="cphTitle" runat="server"> 在线签到 </asp:Content> <asp:Content ContentPlaceHolderID="cphContainer" runat="server"> <form runat="server"> <div> <div><span>位置信息</span></div> <div> <ul> <div></div> </ul> </div> <div> <ul> <div></div> </ul> </div> </div> <div> <input type="button" value="我要签到" /> </div> <div> <span> <img src="https://www.jb51.net/templates/txwap/images/mask.gif" /> </span> </div> </form> </asp:Content>
本页面主要涉及到百度地图开放平台，要申请百度地图ag。否则调用js则提示：APP不存在，AK有误请重新检查在重试。
（1）百度地图技术一：坐标转换API
官网地址：
文档有详细的说明，不再赘述哦。
（2）百度地图技术二：根据坐标获取位置
官网网址：
Geocoding API包括地址解析和逆地址解析功能：