微信js获取地理位置

1.绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

备注:登录后可在“开发者中心”查看对应的接口权限。

2.引入js文件

<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=DD279b2a90afdf0ae7a3796787a0742e"></script>//地图文件

3.获取微信需要字段


var appId, //公众号名称,由商户传入
    timeStamp, //时间戳,自1970年以来的秒数
    nonceStr, //随机串
    signature; //微信签名方式

$.ajax({
                type : ‘post‘,
                url : ‘../‘,
                dataType:‘json‘,
                success : function(data){ 

                     //alert(JSON.stringify(data));
                        appId= data.appId; // 必填,公众号的唯一标识
                        timeStamp= data.timeStamp; // 必填,生成签名的时间戳
                        nonceStr= data.nonceStr; // 必填,生成签名的随机串
                        signature= data.signature;

                        getLocation();//获取地理位置                            

                },
                beforeSend:function(){

                },
                error:function(){

                    alert(‘error‘);
                }
            });

4.调微信获取地理位置接口(返回经、纬度值)

function getLocation(){

            /* 微信分享朋友圈 */
            wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
                appId: appId, // 必填,公众号的唯一标识
                timestamp: timeStamp, // 必填,生成签名的时间戳
                nonceStr: nonceStr, // 必填,生成签名的随机串
                signature: signature,// 必填,签名,见附录1
                jsApiList: ["getLocation"] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
            });

            wx.ready(function(){
                //获取地理位置
                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; // 位置精度
                        //alert(‘纬度‘+latitude+" ;经度"+longitude);
                        //生成地理位置
                        var fname = ‘‘;
                        var point = new BMap.Point(longitude, latitude);
                        var geoc = new BMap.Geocoder();
                        geoc.getLocation(point, function(rs) {
                            var addComp = rs.addressComponents;

                            //alert(addComp.province + ", "+addComp.city + ", "+addComp.district + ", "+addComp.street + ", "+addComp.streetNumber);
                            fname = addComp.district;
                            //alert(‘您现在所处位置:‘+fname);
                            //抽奖--判断地理位置 & 抽奖机会

                            if(fname==‘XX区‘){
                                //执行
                            }else{
                                alert(‘本次活动目前向针对活动地区开放,其他地区敬请期待!‘);return;
                            }
                        });
                    },
                    fail:function(res){
                        alert("获取位置失败,检查是否开启定位服务");
                    }
                });
            });

            wx.error(function(res){
                console.log(res.errMsg);
            });

            wx.checkJsApi({
                jsApiList: ["getLocation"], // 需要检测的JS接口列表,所有JS接口列表见附录2,
                success: function(res) {
                    //alert(‘check success!‘)
                    // 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
                }
            });
        }

5.根据径、纬度获取地理位置方法

/*
         * 根据经纬度获取位置
         * param1:经度
         * param2:纬度
         */
        //获取地理位置
       //var map = new BMap.Map("allmap");
            var point = new BMap.Point(lng, lat);
            //map.centerAndZoom(point, 12);
            var geoc = new BMap.Geocoder();
            geoc.getLocation(point, function(rs) {
                var addComp = rs.addressComponents;

                //alert(addComp.province + ", "+addComp.city + ", "+addComp.district + ", "+addComp.street + ", "+addComp.streetNumber);
                return addComp.district;
            });
        

6.常见问题

我在使用时把经纬度转换地理位置写成一个getAddress()方法,在wx.getLocation的成功回调是调用getAddress,发现我几处弹框弹出的顺序不对,没有成功拿到getAddress的返回值。

所以使用时需要注意百度地图的这个API是异步执行。

时间: 2024-12-26 18:12:44

微信js获取地理位置的相关文章

js 获取地理位置经纬度

1. 加载百度API的核心js,ak表示获取百度地图的开发密钥,免费的需要申请下 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=42b8ececa9cd6fe72ae4cddd77c0da5d"></script> 2.代码: //设置默认地理位置 访问失败时使用默认地理位置 var defaultPosition="121

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

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

微信公众平台网页开发实战--3.利用JSSDK在网页中获取地理位置(HTML5+jQuery)

复制一份JSSDK环境,创建一份index.html文件,结构如图7.1所示. 图7.1  7.1节文件结构 在location.js中,封装“getLocation”接口,如下: 01 wxJSSDK.location = function(locationApi){ 02 if(wxJSSDK.isReady){ //wxJSSDK.isReady 查看微信JSSDK是否初始化完毕 03 if(locationApi){ 04 locationApi.getLocation && wx

【原创】微信公众号与HTML 5混合模式揭秘——JSSDK获取地理位置

微信公众号与HTML 5混合模式揭秘1——如何部署JSSDK 微信公众号与HTML 5混合模式揭秘2——分享手机相册中照片 JSSDK为开发者提供了两个位置API服务:获取地理位置和使用微信内置地图查看位置. 下面还是沿用以往的实战演示方法.先创建一份location.js文件,为“wxJSSDK”增加“location”的相关API,代码如下: 01 wxJSSDK.location= function(locationApi){ 02 if(wxJSSDK.isReady){//wxJSSD

微信JS-SDK之地理位置的获取与在线导航,集成百度地图实现在线地图搜索

原创声明:本文来源于本人另一博客[微信JS-SDK之地理位置的获取,集成百度地图实现在线地图搜索]原创作品,绝非他处摘取,转载请联系博主 本次讲解微信开发第三篇:获取用户地址位置信息,是非常常用的功能,特别是服务行业公众号,尤为需要该功能,本次讲解的就是如何调用微信JS-SDK接口,获取用户位置信息,并结合百度地铁,实现在线地图搜索,与在线导航. 官方文档地址:https://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.htm

微信js-sdk开发获取签名和获取地理位置接口示例

### 微信js-sdk开发获取签名和获取地理位置接口示例 前言:在做微信公众号开发时需要获取用户的地理位置信息,之前通过高德或者百度.腾讯等地图的api时发现经常获取不到,毕竟第三方的东西,后来改为采用微信内置的js-sdk中的获取地理位置接口,在这主要记录下签名的获取(麻烦点)和一个获取地理位置的例子. 准备工作: 微信测试号appid和appsecret 获取地址:微信测试账号获取 在测试账号里先填写接口配置信息和js接口安全域名(这个是必须的) 示例:页面中需要点击图标获取地理位置信息

网页JS获取当前地理位置(省市区)

转载自:http://www.cnblogs.com/ZHF/p/4169634.html 1.手机WEB定位方法: var getLocation = function (successFunc, errorFunc) { //successFunc获取定位成功回调函数,errorFunc获取定位失败回调 //首先设置默认城市 var defCity = { id: '000001', name: '北京市', date: curDateTime()//获取当前时间方法 }; //默认城市 $

微信连接转发后无法获取地理位置问题解决

微信分享会根据分享的不同,为原始链接拼接如下参数: 朋友圈 from=timeline&isappinstalled=0微信群 from=groupmessage&isappinstalled=0好友分享 from=singlemessage&isappinstalled=0 这样导致请求页面获取地理位置wx.getLocation方法失败,可通过wx.config设置debug : ture进行调试,发现究其原因是签名计算错误了. 进入获取签名的方法中,需要在url上添加固定分享

使用JS获取当前地理位置方法汇总(如用谷歌接口,会出再以上报错,必须申请密钥并设置接受服务器IP!!!)

RefererNotAllowedMapError 错误 加载 Google Maps JavaScript API 的当前 URL 尚未添加到允许的引用站点列表中.请在 Google API Console 上检查您的 API 密钥的引用站点设置. 请参阅 Google API Console 中的 API 密钥.如需了解详细信息,请参阅 API 密钥安全使用最佳实践. 如用谷歌接口,会出再以上报错,必须申请密钥并设置接受服务器IP!!! 今年的项目开发中,初步接触了移动端WEB开发,也就边学