Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解

 更新时间:2019年08月26日 16:58:12   作者:追逐时光  
这篇文章主要介绍了Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

前言:

前段时间有一个关于通过获取用户当前经纬度坐标,计算出该用户距离某指定地点之间的距离。因为做这个项目需要能够获取到比较精确的经纬度坐标,刚开始使用的是百度地图结果发现百度地图地位不太准确(有时候相差的比较的大,后来了解到了百度获取用户经纬度与用户当前使用的网络有很大的关系),后来换成了高德地图结果还是一样。最后我想刚好做的是个微信网站项目,为什么不使用微信自带接口呢?所以最后使用了微信JS-SDK来获取用户当前地理位置的接口。

微信JS-SDK的使用步骤,配置信息的生成获取讲解:

关于JS-SDK的使用步骤和timestamp(时间戳),nonceStr(随机串),signature(签名),access_token(接口调用凭据)生成获取的详细说明在此:https://www.cnblogs.com/Can-daydayup/p/11124092.html

前往微信公众平台查看是否开通获取用户地理位置接口权限:

调用微信JS-SDK获取地理位置接口,获取用户当前准确经纬度坐标:

微信官方文档使用说明:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#35

< script type = "text/javascript" >
//通过config接口注入权限验证配置
wx.config({
  debug: false,
  // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
  appId: 'your AppId',
  // 必填,公众号的唯一标识
  timestamp: 'your timestamp',
  // 必填,生成签名的时间戳
  nonceStr: 'your nonceStr',
  // 必填,生成签名的随机串
  signature: 'your signature',
  // 必填,签名
  jsApiList: ['getLocation'] // 必填,需要使用的JS接口列表
});

//注意,我们的经纬度坐标是要在页面加载完成后立即获取,不需要触发获取,因此需要把获取地理位置的接口放在ready(function(){});里面
wx.ready(function() {
  try {
    wx.getLocation({
      type: 'wgs84',
      // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
      success: function(res) {

        var latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
        var longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。
        var speed = res.speed; // 速度,以米/每秒计
        var accuracy = res.accuracy; // 位置精度
        $("#Longitude").val(longitude);
        $("#Latitude").val(latitude);
        alert("微信经纬度获取结果:" + latitude + "经度" + longitude);
      }
    });
  } catch(e) {
    console.log(e);
  }
}); < /script>/

授权公众号,获取当前地理位置:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家

相关文章

  • 使用JSX 建立 Markup 组件风格开发的示例(前端组件化)

    使用JSX 建立 Markup 组件风格开发的示例(前端组件化)

    这篇文章主要介绍了使用JSX 建立 Markup 组件风格开发的示例(前端组件化)本文重点讲解如何从0搭建一个组件系统,在这里我们会学习使用JSX来建立markup 的风格,我们基于与React 一样的 JSX 去建立我们组件的风格
    2021-04-04
  • ECharts两种动画效果完整代码

    ECharts两种动画效果完整代码

    这篇文章主要给大家介绍了关于ECharts两种动画效果的相关资料,在做项目时当我们用到echarts图表时,大部分产品经理都会要求我们给图表加上一些动画效果,让页面看起来更加炫酷,需要的朋友可以参考下
    2023-07-07
  • JavaScript实现拖拽网页内元素的方法

    JavaScript实现拖拽网页内元素的方法

    这篇文章主要介绍了JavaScript实现拖拽网页内元素的方法,以注释形式较为详细的分析了javascript事件监听、元素定位的相关技巧,并配有详细的注释以便于理解,需要的朋友可以参考下
    2015-04-04
  • 在JavaScript中使用for循环的方法详解

    在JavaScript中使用for循环的方法详解

    在本文中,我们将学习 JavaScript 中提供,的 for 循环,我们将了解如何在 JavaScript 中使用 for...in 循环语句、其语法、工作原理示例、何时使用或避免使用它以及我们可以使用哪些其他类型的循环,需要的朋友可以参考下
    2023-07-07
  • JS比较两个数值的大小实例

    JS比较两个数值的大小实例

    下面小编就为大家带来一篇JS比较两个数值的大小实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案

    ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案

    这篇文章主要介绍了ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案,在文章中用到了angularjs的指令知识点,对ionic隐藏底部导航栏知识感兴趣的朋友一起学习吧
    2016-11-11
  • Bootstrap表单布局

    Bootstrap表单布局

    这篇文章主要介绍了Bootstrap表单布局的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-07-07
  • javascript实现2016新年版日历

    javascript实现2016新年版日历

    这篇文章主要为大家介绍了javascript实现2016新年版日历的详细代码,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • JavaScript事件对象event用法分析

    JavaScript事件对象event用法分析

    这篇文章主要介绍了JavaScript事件对象event用法,结合实例形式分析了事件对象event中常用的属性、方法、相关操作技巧与注意事项,需要的朋友可以参考下
    2018-07-07
  • javascript获取选中的文本的方法代码

    javascript获取选中的文本的方法代码

    这篇文章介绍了javascript获取选中的文本的方法代码,有需要的朋友可以参考一下
    2013-10-10

最新评论