微信JS-SDK坐标位置如何转换为百度地图坐标

前端之家收集整理的这篇文章主要介绍了微信JS-SDK坐标位置如何转换为百度地图坐标前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

微信JS-SDK开发过程中,使用getLocation获取坐标位置,如何将微信获取的坐标直接应用到百度地图中,显示以下效果

说明:红色图标是从微信转换过来的位置,蓝色图标是周边位置。首先从微信开发流程讲解。

1、微信JS-SDK开发文档

首先进入官网的帮助文档:

可对文档进行详细的研读,要获取位置信息,分以下步骤:

第一步:

绑定域名

进入微信公众号,找到“公众号设置”菜单,进入“功能设置”面板,

点击“设置”可设置引用js的相关域名:

第二步:

引用官方js类库

在需要调用JS接口的页面引入如下JS文件,(支持https):

引用页面是location.aspx,如下:

<asp:Content ID="Content1" ContentPlaceHolderID="cphHead" runat="server">
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"&gt;
<script type="text/javascript">
$("#mask").show();
wx.config({
debug: false,//开启调试模式,如为true,则弹出每个js函数调用情况
appId: '<%= ResultJsData.GetValue("appid") %>',//必填,公众号的唯一标识
timestamp: <%= ResultJsData.GetValue("timestamp") %>,//必填,生成签名的时间戳
nonceStr: '<%= ResultJsData.GetValue("noncestr") %>',//必填,生成签名的随机串
signature: '<%= ResultJsData.GetValue("signature") %>',//必填,签名
jsApiList: [
'checkJsApi','onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo','hideMenuItems','showMenuItems','hideAllNonBaseMenuItem','showAllNonBaseMenuItem','translateVoice','startRecord','stopRecord','onRecordEnd','playVoice','pauseVoice','stopVoice','uploadVoice','downloadVoice','chooseImage','previewImage','uploadImage','downloadImage','getNetworkType','openLocation','getLocation','hideOptionMenu','showOptionMenu','closeWindow','scanQRCode','chooseWXPay','openProductSpecificView','addCard','chooseCard','openCard'
]
});
wx.ready(function(){
wx.checkJsApi({
jsApiList: [
'getNetworkType','getLocation'
],success: function (res) {
}
});
wx.getLocation({
type: 'wgs84',// 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
success: function (res) {
try {
var latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
var longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。
var speed = res.speed; // 速度,以米/每秒计
var accuracy = res.accuracy; // 位置精度
//alert(JsonUti.convertToString(res));
//wx.openLocation({
// latitude: res.latitude,// 纬度,浮点数,范围为90 ~ -90
// longitude: res.longitude,// 经度,浮点数,范围为180 ~ -180。
// name: '当前位置',// 位置名
// address: '点击查看',// 地址详情说明
// scale: 28,// 地图缩放级别,整形值,范围从1~28。默认为最大
// infoUrl: "location1.aspx?m=Home&c=Index&a=getlocation&latitude="+latitude+"&longitude="+longitude // 在查看位置界面底部显示的超链接,可点击跳转
//});
//alert(latitude+"-"+longitude);
$("#mask").hide();
window.location.href = "location1.aspx?m=Home&c=Index&a=getlocation&latitude=" +
latitude +
"&longitude=" +
longitude +
"&=speed" +
speed +
"&accuracy=" +
accuracy;
} catch (e) {
alert(e.message);
}
},cancel: function (res) {
window.location.href="none.aspx?msg=拒绝获取地理位置&r=" + Math.random();//拒绝
},fail:function() {
alert("未能获取地理位置!首先检查手机是否启用微信定位。");
}
});
});

wx.error(function(res) {
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
});

wx.fail(function(res) {
});


<i class="weui_icon_msg weui_icon_info">

<div class="input_errow" style="width: 60%; height: 60%; text-align: center;">
正在获取地理位置信息...

<div class="mask" style="display: none;">

页面效果:

注意事项:

(1)如果手机设置不允许微信获取位置信息,则提示以上信息。

(2)上图参数获取的是GPS坐标,如使用百度地图,要做一定转换,将在location1.aspx中体现。

(3)所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用。

对应location.aspx.cs实现:

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显示坐标

<div class="jb51code">
<pre class="brush:xhtml;">
<%@ Page Title="在线签到" Language="C#" MasterPageFile="~/wxcrm/Site.Master" AutoEventWireup="true" CodeFile="location1.aspx.cs" Inherits="DTcms.Web.wxcrm.location1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="cphHead" runat="server">