微信开发获取用户地理位置_微信开发工具 无法获取 地理位置 - CSDN
  • 用户点击微信公众号底部【校区位置】菜单,打开应用页面,该页面中调用微信JSSDK打开微信内置地图,并设置目标地点(叩丁狼教育校区),此时可看到用户当前位置与目标地点位置的距离,还可通过右下角绿色按钮,调用...

    本文作者:陈惠,叩丁狼高级讲师。原创文章,转载请注明出处。

    本篇文章实现效果如下:
    用户点击微信公众号底部【校区位置】菜单,打开应用页面,该页面中调用微信JSSDK打开微信内置地图,并设置目标地点(叩丁狼教育校区),此时可看到用户当前位置与目标地点位置的距离,还可通过右下角绿色按钮,调用百度地图等第三方软件,点击后会自动设置用户的位置作为起点,目标地点作为终点,自动查询方案路线。

    叩丁狼教育.gif

    实现步骤

    一:绑定域名
    在公众号管理页面,设置JS接口安全域名,表示该域名下的所有页面,都拥有使用JSSDK的权限。

    叩丁狼教育.png

    二:创建微信公众号底部菜单
    实现具体流程可参考该文章https://www.jianshu.com/p/85573685f17d
    我使用的菜单json数据为:

    {
        "button": [
            {
                "type": "click",
                "name": "课程学习",
                "key": "course"
            },
            {
                "type": "click",
                "name": "就业资讯",
                "key": "JAVA"
            },
            {
                "type": "view",
                "name": "校区位置",
                "url": "http://huihui.mynatapp.cc/location.do"
            }
        ]
    }
    
    

    三:Controller代码
    主要是根据指定的算法,生成并提供微信规定的参数给页面。
    若对微信JS-SDK不了解的同学可先参考该文章:https://www.jianshu.com/p/b3c4450f845e

    @Controller
    public class LocationController {
        @RequestMapping("location")
        public String location(Model model,HttpServletRequest request) throws Exception {
            //32位随机数(UUID去掉-就是32位的)
            String uuid = UUID.randomUUID().toString().replace("-", "");
            //jssdk权限验证参数
            TreeMap<Object, Object> map = new TreeMap<>();
            map.put("appId",WeChatUtil.APPID);
            long timestamp = new Date().getTime();
            map.put("timestamp",timestamp);//全小写
            map.put("nonceStr",uuid);
            map.put("signature",WeChatUtil.getSignature(timestamp,uuid,RequestUtil.getUrl(request)));
            model.addAttribute("configMap",map);
            return  "location"; //视图页面
        }
    }
    

    参数介绍
    appId:必填,公众号的唯一标识
    timestamp:必填,时间戳
    nonceStr:必填,随机生成的字符串
    signature:必填,根据timestamp与nonceStr与jsapi_ticket按照某种算法生成的签名

    官方文档参考:
    https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 (附录1-JS-SDK使用权限签名算法)

    生成签名的工具方法:

       public static String getSignature(Long timestamp,String noncestr,String url ){
            //对所有待签名参数按照字段名的ASCII 码从小到大排序(字典序)
            Map<String,Object> map = new TreeMap<>();
            map.put("jsapi_ticket",getJsapi_ticket());
            map.put("timestamp",timestamp);
            map.put("noncestr",noncestr);
            map.put("url",url);
            //使用URL键值对的格式(即key1=value1&key2=value2…)拼接成字符串string1
            StringBuilder sb = new StringBuilder();
            Set<String> set = map.keySet();
            for (String key : set) {
                sb.append(key+"="+map.get(key)).append("&");
            }
            //去掉最后一个&符号
            String temp = sb.substring(0,sb.length()-1);
            //使用sha1加密
            return SecurityUtil.SHA1(temp);
        }
    

    jsapi_ticket:
    生成签名signature还需要一个叫jsapi_ticket的参数,jsapi_ticket是公众号用于调用微信JS接口的临时票据,可以通过基础接口的access_token来获取,有效期为7200秒,调用次数有限,所以在后台也需要全局缓存jsapi_ticket。

    代码:

    //获取JSSDK的接口地址
    public static final String GET_TICKET_URL = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi";
    /**
    * 获取JSSDK的jsapi_ticket
    */
    public static void getJsapi_ticket(){
         //发起请求到指定的接口
         String result = HttpUtil.get(GET_TICKET_URL.replace("ACCESS_TOKEN",getAccessToken()));
         System.out.println(result);
    }
    

    getAccessToken是之前开发教程(四)已经实现好的,有需要的可参考https://www.jianshu.com/p/85573685f17d

    三:页面中引入JS文件

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

    四:通过config接口注入权限验证配置

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

    在页面中添加这段js代码

    wx.config({
    	debug: false, // 开启调试模式
    	appId: '${configMap.appId}', // 公众号的唯一标识
    	timestamp: '${configMap.timestamp}', // 生成签名的时间戳
    	nonceStr: '${configMap.nonceStr}', // 生成签名的随机串
    	signature: '${configMap.signature}',// 签名
    	jsApiList: ['openLocation'] // 这里先声明我们要用到打开地图的JS接口
    });
    

    参数介绍
    debug:true为开启调试模式,调用的所有api的返回值会在客户端alert出来,若是生产环境则设置为false
    jsApiList:必填,在里面声明我们需要使用到的JS接口权限

    五:通过ready接口处理成功验证
    config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。

    最后添加以下js代码即可:

    wx.ready(function(){
    	wx.openLocation({
    		latitude:23.132006, // 纬度,浮点数,范围为90 ~ -90
    		longitude:113.377785, // 经度,浮点数,范围为180 ~ -180。
    		name: '叩丁狼教育', // 位置名
    		address: '专业IT培训', // 地址详情说明
    		scale: 25, // 地图缩放级别,整形值,范围从1~28。默认为最大
    		infoUrl: 'http://www.wolfcode.cn/' // 在查看位置界面底部显示的超链接,可点击跳转
    	});
    });
    

    latitude与longitude是目标地点的经纬度坐标,可以使用腾讯地图提供的坐标拾取器
    https://lbs.qq.com/tool/getpoint/ 搜索指定地点即可获取。

    叩丁狼教育

    展开全文
  • 很久没搞微信的js-sdk了, 搞了一下午, 刷新页面老是失败, 没想到结合经验给大家展示下获取用户地理位置 第一步:登录微信公众号https://mp.weixin.qq.com 首先先设置最基本的配置(这一步大家应该都会)   第二...

    很久没搞微信的js-sdk了, 搞了一下午, 刷新页面老是失败, 没想到结合经验给大家展示下获取用户地理位置

    第一步:登录微信公众号https://mp.weixin.qq.com

    首先先设置最基本的配置(这一步大家应该都会)

     

    第二步:点击公众平台右上角展开点击功能设置

    配置网页授权域名

    填写项目所使用的的域名并将文件下载放到项目根目录

    然后在配置js安全域名同样将要下载的txt文件放到项目目录也可以是二级目录, 如果放到二级目录域名后面要就目录路径哦

    保存之后:

    第三步: 公众号左边栏,开发->子栏目:接口权限

    开启用户获取地理位置

     

     

    第四步:先在php服务端配置好js-sdk所需要的参数:appId, timestamp , noceStr, signature , jsApiList

    复制代码

    function getSignPackage($appId,$appSecret) {
        $jsapiTicket = getJsApiTicket($appId,$appSecret);
        // 注意 URL 一定要动态获取,不能 hardcode.
        $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
        $url = "{$protocol}{$_SERVER[HTTP_HOST]}{$_SERVER[REQUEST_URI]}";
    
        $timestamp = time();
        $nonceStr = createNonceStr();
        // 这里参数的顺序要按照 key 值 ASCII 码升序排序
        $string = "jsapi_ticket={$jsapiTicket}&noncestr={$nonceStr}&timestamp={$timestamp}&url={$url}";
    
        $signature = sha1($string);
        // var_dump($signature);die;
        $signPackage = array(
          "appId"     => $appId,
          "nonceStr"  => $nonceStr,
          "timestamp" => $timestamp,
          "url"       => $url,
          "signature" => $signature,
          "rawString" => $string
        );
        return $signPackage; 
      }
    
    function createNonceStr($length = 16) {
        $chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
        $str = "";
        for ($i = 0; $i < $length; $i++) {
          $str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1);
        }
        return $str;
    }
    
    function getJsApiTicket($appId,$appSecret) {
        // jsapi_ticket 应该全局存储与更新,以下代码以写入到文件中做示例
        $data = json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT']."\jsapi_ticket.json"));
        // var_dump($data->expire_time);die;
        if ($data->expire_time < time()) {
          $accessToken = getAccessToken($appId,$appSecret);
          // 如果是企业号用以下 URL 获取 ticket
          // $url = "https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token=$accessToken";
          $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token={$accessToken}";
          $res = json_decode(httpGet($url));
          $ticket = $res->ticket;
          if ($ticket) {
            $data->expire_time = time() + 7000;
            $data->jsapi_ticket = $ticket;
            $fp = fopen($_SERVER['DOCUMENT_ROOT']."\jsapi_ticket.json", "w");
            fwrite($fp, json_encode($data));
            fclose($fp);
          }
        } else {
          $ticket = $data->jsapi_ticket;
        }
        return $ticket;
      }
    
    function getAccessToken($appId,$appSecret) {
        // access_token 应该全局存储与更新,以下代码以写入到文件中做示例
        $data = json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT']."\access_token.json"));
        if ($data->expire_time < time()) {
          // 如果是企业号用以下URL获取access_token
          // $url = "https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=$this->appId&corpsecret=$this->appSecret";
          $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={$appId}&secret={$appSecret}";
          $res = json_decode(httpGet($url));
          $access_token = $res->access_token;
          if ($access_token) {
            $data->expire_time = time() + 7000;
            $data->access_token = $access_token;
            $fp = fopen($_SERVER['DOCUMENT_ROOT']."\jsapi_ticket.json", "w");
            fwrite($fp, json_encode($data));
            fclose($fp);
          }
        } else {
          $access_token = $data->access_token;
        }
        return $access_token;
    }
    
    function httpGet($url) {
        $curl = curl_init();
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($curl, CURLOPT_TIMEOUT, 500);
        curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
        curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);
        curl_setopt($curl, CURLOPT_URL, $url);
        $res = curl_exec($curl);
        curl_close($curl);
        return $res;
    }

    复制代码

    然后接下来调用官方微信地理位置接口

    这段代码就是如果你的微信接口走不通就会执行此方法 , 还是加上此代码为好

     wx.error(function(res){

            alert("接口调取失败")

        });
    使用官方接口
    res.checkResult.getLocation(接口名字) 成功true  失败false
    success: function (res) {
                // alert(JSON.stringify(res));
                // alert(JSON.stringify(res.checkResult.getLocation));
                if (res.checkResult.getLocation == false) {
                    alert('你的微信版本太低,不支持微信JS接口,请升级到最新的微信版本!');
                    return;
                }
            }
     

    复制代码

    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <script>
    
    wx.config({
        debug: true,
        appId: '<?php echo $signPackage["appId"]; ?>',
        timestamp: <?php echo $signPackage["timestamp"]; ?>,
        nonceStr: '<?php echo $signPackage["nonceStr"]; ?>',
        signature: '<?php echo $signPackage["signature"]; ?>',
        jsApiList: [
            // 所有要调用的 API 都要加到这个列表中
              'getLocation',
          ]
    });
     wx.ready(function () {
        wx.checkJsApi({
            jsApiList: [
                'getLocation'
            ],
            
            success: function (res) {
                // alert(JSON.stringify(res));
                // alert(JSON.stringify(res.checkResult.getLocation));
                if (res.checkResult.getLocation == false) {
                    alert('你的微信版本太低,不支持微信JS接口,请升级到最新的微信版本!');
                    return;
                }
            }
        }); 
        wx.error(function(res){
            alert("接口调取失败")
        });
        wx.getLocation({
          success: function (res) {
            alert(JSON.stringify(res));
          },
          cancel: function (res) {
            alert('用户拒绝授权获取地理位置');
          }
        });
    });
     
    </script>

    复制代码

    公众号一定要记得配置js安全域名, 这是一个会可能被遗忘的步骤, 此时如果你进入微信公众号页面 询问你获取地理位置弹框, 授权之后, 会弹框经纬度说明你成功了

     

    转自:https://www.cnblogs.com/liuxinruif0/p/8652461.html

    展开全文
  • 在进行微信运营的时候,用户地理位置是我们进行营销策划、广告活动投放、用户精准营销的重要依据,今天我们就来分析一下微信开发中如何获取获取用户地理位置获取用户地理位置,你需要在微信公众平台开发者中心...

    在进行微信运营的时候,用户地理位置是我们进行营销策划、广告活动投放、用户精准营销的重要依据,今天我们就来分析一下微信开发中如何获取获取用户地理位置。

    获取用户地理位置,你需要在微信公众平台开发者中心开启上报地理位置接口功能,开启之后会在用户首次进入公众号时,弹出是否允许上报地理位置选项,如果选择允许则在用户每次进入公众号会话的时候微信会以xml形式将用户的地理位置上报到你开发者中心填写的url上。

    注意:用户地理位置是被动获取的,需用户同意后才会上报,微信公众平台开发不能主动获取用户地理位置。

    先看看官方给出的xml示例及解析。

    推送XML数据包示例:

    <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>
    参数说明:


    下面来记录用户的地理位置信息到数据库.

    首先引用Wechat SDK,

    若对Wechat SDK不了解的,请点击查博客中对Wechat SDK详情。

    use  Com\Wechat;

    将数据插入数据库

    public function index(){
        	$agent = $_SERVER['HTTP_USER_AGENT']; 
    	if(!strpos($agent,"MicroMessenger")) {
    		echo '只能在微信浏览器中使用';
    		exit;
    	}
    
            $token = '7894578953485348944qwe'; //微信后台填写的TOKEN         
    	/* 加载微信SDK */
    	$wechat = new Wechat($token);
    	/* 获取请求信息 */
    	$data = $wechat->request();		 
    	if($data && is_array($data)){
    		M('wxuser_location')->add($data); 
                    //此处为写入数据库操作,至于数据库结构,数据定入操作根据你的系统决定
    	}
    }
    保存到数据库中结果如下,

    这就把用户的地理位置数据记录下来了,以后如果需要根据用户地理位置推送某些消息(如附近的门店),就可以在数据库中查询用户的最近的一次地理位置信息来推送了,如你的微信菜单上有一个按钮叫做“附近门店”,就可以把这个地理位置再匹配你门店地理位置选择性的向用户推送,这个留在下一节来讲,敬请关注。


    转载地址:http://www.360doc.com/content/15/0818/16/10227105_493229885.shtml

    详细参考:http://blog.csdn.net/fanhu6816/article/details/52123394

    展开全文
  • 最近一直在做公众号开发,这两天公司让我做一个类似钉钉打卡的功能,这时候我需要获取用户的经纬度, ...但是这时候在我这里无法使用,我需要在微信公众号的网页中获取用户地理位置(经纬度) 最后发现,原...

    最近一直在做公众号开发,这两天公司让我做一个类似钉钉打卡的功能,这时候我需要获取到用户的经纬度,

    但是在这之前我只知道在关注微信公众号的时候获取用户地理位置:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140841

    但是这时候在我这里无法使用,我需要在微信公众号的网页中获取用户的地理位置(经纬度)

    最后发现,原来微信公众号提供了现成的获取用户地理位置的JS-SDK:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

    一:绑定域名

    登录微信公众号绑定JS接口安全域名(这里我使用的是测试号)

    image.png

    二:引入JS文件

    在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.4.0.js

    如需进一步提升服务稳定性,当上述资源不可访问时,可改访问:http://res2.wx.qq.com/open/js/jweixin-1.4.0.js (支持https)。

    三:通过config接口注入权限验证配置

    wx.config(<?php
            echo Yii::$app->wechat->js->config([
                'getLocation',
                'openLocation'
            ])
            ?>
        );

    'getLocation','openLocation'表示的是需要使用的JS接口列表,所有JS接口列表参考上面JS-JDK文档中的附录二

    这里我是在Yii框架中使用的是easywechat,原生写法可以参考上面的JS-SDK文档

    image.png

    三:获取用户的地理位置(经纬度)

    image.png

    查看文档会找到如上代码,这时候你将代码直接赋复制执行的话,这时候获取地理位置的接口时不会触发的,我们必须要将回去地理位置的接口放到wx.ready方法内部,如:

    wx.ready(function(){
            // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
            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; // 位置精度
                }
            });
        });

    这时候我们就可以获取到用户的地理位置信息了

    image.png

    完整的获取用户的地理位置(经纬度)代码

    <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <script>
        wx.config(<?php
            echo Yii::$app->wechat->js->config([
                'getLocation',
                'openLocation'
            ])
            ?>
        );
        wx.ready(function(){
            // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
            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; // 位置精度
                }
            });
        });
        wx.error(function(res){
            console.log(res);
            // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
        });
    </script

     

    展开全文
  • 本章节给大家介绍通过微信jsapi获取用户地理位置微信官方文档关于地理位置给了两种接口,一种是通过微信内置地图查看用户地理位置,第二种是直接获取当前用户地理位置坐标信息。 使用微信内置地图查看...

    本章节给大家介绍通过微信jsapi获取用户的地理位置,微信官方文档关于地理位置给了两种接口,一种是通过微信内置地图查看用户的地理位置,第二种是直接获取当前用户的地理位置坐标信息。

    使用微信内置地图查看位置接口


    1
    2
    3
    4
    5
    6
    7
    8
    wx.openLocation({
        latitude: 0, // 纬度,浮点数,范围为90 ~ -90
        longitude: 0, // 经度,浮点数,范围为180 ~ -180。
        name: ''// 位置名
        address: ''// 地址详情说明
        scale: 1, // 地图缩放级别,整形值,范围从1~28。默认为最大
        infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
    });

    获取地理位置接口

    1
    2
    3
    4
    5
    6
    7
    8
    9
    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; // 位置精度
        }
    });

    以上是微信官方文档给的接口使用说明,接下来我们介绍如何编写代码调用以上接口。

    第一、jsp界面引入js库

    1
    2
     <script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"> </script> 
     <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>

    第二、<body></body>之间的html代码

    1
    2
    3
    4
    <span class="desc" style="color: red">地理位置接口-使用微信内置地图查看位置接口</span><br>
          <button class="btn btn_primary" id="openLocation">openLocation</button><br>
          <span class="desc" style="color: red">地理位置接口-获取地理位置接口</span><br>
          <button class="btn btn_primary" id="getLocation">getLocation</button><br>

    第三、初始化微信jsapi库添加的上述两种接口openLocation接口和getLocation接口

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
     wx.config({  
        debug: true// 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。  
        appId: '${appId}'// 必填,公众号的唯一标识  
        timestamp: '${ timestamp}' // 必填,生成签名的时间戳  
        nonceStr: '${ nonceStr}'// 必填,生成签名的随机串  
        signature: '${ signature}',// 必填,签名,见附录1  
        jsApiList: ['checkJsApi',
                    'chooseImage',
                    'previewImage',
                     'uploadImage',
                     'downloadImage',
                      'getNetworkType',//网络状态接口
                      'openLocation',//使用微信内置地图查看地理位置接口
                      'getLocation' //获取地理位置接口
                   // 必填,需要使用的JS接口列表,所有JS接口列表见附录2  
    });

    第四、调用openLocation接口和getLocation接口两种接口的js代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    // 7 地理位置接口 开始
      // 7.1 查看地理位置
      document.querySelector('#openLocation').onclick = function () {
        wx.openLocation({
          latitude: 23.099994,
          longitude: 113.324520,
          name: 'TIT 创意园',
          address: '广州市海珠区新港中路 397 号',
          scale: 14,
          infoUrl: 'http://weixin.qq.com'
        });
      };
     
      // 7.2 获取当前地理位置
      document.querySelector('#getLocation').onclick = function () {
        wx.getLocation({
          success: function (res) {
            alert(JSON.stringify(res));
          },
          cancel: function (res) {
            alert('用户拒绝授权获取地理位置');
          }
        });
      };
      // 7 地理位置接口 结束

    这两个js方法是在上述第二步中用户点击id分别为openLocation和getLocation按钮的时候触发。注意这两种方法要放在wx.ready(function(){ });之间。

    第五、完整的jsp页面代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
    <%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    %>
     
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <base href="<%=basePath%>">
        <!-- www.vxzsk.com原创 -->
        <title>微信jsapi测试-V型知识库</title>
        <meta name="viewport" content="width=320.1,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
       <script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"> </script
       <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
         
      </head>
       
      <body>
      <center><h3>欢迎来到微信jsapi测试界面-V型知识库</h3></center>
         <p>基础接口之判断当前客户端是否支持指定的js接口</p>   
         <input type="button" value="checkJSAPI" id="checkJsApi"><br>
          
          <span class="desc" style="color: red">地理位置接口-使用微信内置地图查看位置接口</span><br>
          <button class="btn btn_primary" id="openLocation">openLocation</button><br>
          <span class="desc" style="color: red">地理位置接口-获取地理位置接口</span><br>
          <button class="btn btn_primary" id="getLocation">getLocation</button><br>
          
         <div style="display: none;"
         <span class="desc" style="color: red">获取网络状态接口</span><br>
          <button class="btn btn_primary" id="getNetworkType">getNetworkType</button><br>
          <h3 id="menu-image">图像接口</h3>
          <span class="desc">拍照或从手机相册中选图接口</span><br>
          <button class="btn btn_primary" id="chooseImage">chooseImage</button><br>
          <span class="desc">预览图片接口</span><br>
          <button class="btn btn_primary" id="previewImage">previewImage</button><br>
          <span class="desc">上传图片接口</span><br>
          <button class="btn btn_primary" id="uploadImage">uploadImage</button><br>
          <span class="desc">下载图片接口</span><br>
          <button class="btn btn_primary" id="downloadImage">downloadImage</button><br>
         
      <br>
      显示图片<img alt="" src="" id="faceImg">
      </div>
       
       
      <script type="text/javascript">
      wx.config({  
        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。  
        appId: '${appId}', // 必填,公众号的唯一标识  
        timestamp: '${ timestamp}' , // 必填,生成签名的时间戳  
        nonceStr: '${ nonceStr}', // 必填,生成签名的随机串  
        signature: '${ signature}',// 必填,签名,见附录1  
        jsApiList: ['checkJsApi',
                    'chooseImage',
                    'previewImage',
                     'uploadImage',
                     'downloadImage',
                      'getNetworkType',//网络状态接口
                      'openLocation',//使用微信内置地图查看地理位置接口
                      'getLocation' //获取地理位置接口
                   ] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2  
    });  
       
    wx.ready(function(){  
        // 5 图片接口
      // 5.1 拍照、本地选图
      var images = {
        localId: [],
        serverId: []
      };
      document.querySelector('#chooseImage').onclick = function () {
        wx.chooseImage({
          success: function (res) {
            images.localId = res.localIds;
            alert('已选择 ' + res.localIds.length + ' 张图片');
             $("#faceImg").attr("src", res.localIds[0]);//显示图片到页面上
          }
        });
      };
     
      // 5.2 图片预览
      document.querySelector('#previewImage').onclick = function () {
        wx.previewImage({
          current: 'http://www.vxzsk.com/upload//bf04c9b5-5699-421d-900e-3b68bbe58a8920160816.jpg',
          urls: [
            'http://www.vxzsk.com/upload//bf04c9b5-5699-421d-900e-3b68bbe58a8920160816.jpg',
            'http://www.vxzsk.com/upload//bf04c9b5-5699-421d-900e-3b68bbe58a8920160816.jpg',
            'http://www.vxzsk.com/upload//bf04c9b5-5699-421d-900e-3b68bbe58a8920160816.jpg'
          ]
        });
      };
     
      // 5.3 上传图片
      document.querySelector('#uploadImage').onclick = function () {
        if (images.localId.length == 0) {
          alert('请先使用 chooseImage 接口选择图片');
          return;
        }
        var i = 0, length = images.localId.length;
        images.serverId = [];
        function upload() {
          wx.uploadImage({
            localId: images.localId[i],
            success: function (res) {
              i++;
              //alert('已上传:' + i + '/' + length);
              images.serverId.push(res.serverId);
              if (i < length) {
                upload();
              }
            },
            fail: function (res) {
              alert(JSON.stringify(res));
            }
          });
        }
        upload();
      };
     
      // 5.4 下载图片
      document.querySelector('#downloadImage').onclick = function () {
        if (images.serverId.length === 0) {
          alert('请先使用 uploadImage 上传图片');
          return;
        }
        var i = 0, length = images.serverId.length;
        images.localId = [];
        function download() {
          wx.downloadImage({
            serverId: images.serverId[i],
            success: function (res) {
              i++;
              alert('已下载:' + i + '/' + length);
              images.localId.push(res.localId);
              if (i < length) {
                download();
              }
            }
          });
        }
        download();
      };
       
      // 6 设备信息接口
      // 6.1 获取当前网络状态
      document.querySelector('#getNetworkType').onclick = function () {
        wx.getNetworkType({
          success: function (res) {
            alert(res.networkType);
          },
          fail: function (res) {
            alert(JSON.stringify(res));
          }
        });
      };
      //网络接口结束
       
      // 7 地理位置接口 开始
      // 7.1 查看地理位置
      document.querySelector('#openLocation').onclick = function () {
        wx.openLocation({
          latitude: 23.099994,
          longitude: 113.324520,
          name: 'TIT 创意园',
          address: '广州市海珠区新港中路 397 号',
          scale: 14,
          infoUrl: 'http://weixin.qq.com'
        });
      };
     
      // 7.2 获取当前地理位置
      document.querySelector('#getLocation').onclick = function () {
        wx.getLocation({
          success: function (res) {
            alert(JSON.stringify(res));
          },
          cancel: function (res) {
            alert('用户拒绝授权获取地理位置');
          }
        });
      };
      // 7 地理位置接口 结束 
       
    });  
     //初始化jsapi接口 状态
    wx.error(function (res) {
      alert("调用微信jsapi返回的状态:"+res.errMsg);
    });
       
     </script>
        
      </body>
    </html>

    上述jsp代码中有四个参数,这四个参数是成功调用微信jsapi的凭证,分别为appId(必填,公众号的唯一标识),timestamp(必填,生成签名的时间戳), nonceStr(必填,生成签名的随机串) ,signature(必填,签名),关于如何生成这四个参数,如果不知道的读者,请查看本页面左上角的菜单,里面有详细介绍,在这里不在累述。 

    第六、上述代码运行效果图如下:

     使用微信内置地图查看位置接口


    获取地理位置接口效果

    此文章本站原创,地址 http://www.vxzsk.com/115.html   转载请注明出处!谢谢!
    展开全文
  • 微信公众平台开启接口权限——接口权限—网页服务—地理位置—开启 JSSDK使用步骤 步骤一:绑定域名 先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。 备注:登录后可在...
  • ThinkPHP5.0微信开发获取用户地理位置
  • 章节给大家介绍通过微信jsapi获取用户地理位置微信官方文档关于地理位置给了两种接口,一种是通过微信内置地图查看用户地理位置,第二种是直接获取当前用户地理位置坐标信息。 使用微信内置地图查看位置...
  • 微信开发获取地理位置实例(java),使用环境 eclipse + maven + springmvc,虽然项目名是first_maven_project,但是确实是微信开发实例哈,不要有任何怀疑,免费分享啦,哈哈。实例讲解欢迎访问博主博客...
  • 微信公众号开发获取用户地理位置微信公众号需要设置JS安全访问域名 域名设置请不要加上https: 如果你的域名是https://mp.csdn.net/postedit 请设置为:mp.csdn.net/postedit 1、后台获取验证签名信息 ...
  • 在本篇博客之前,博主已经写了4篇关于微信相关文章,其中三篇是本文基础:1、微信...3、微信开发之使用java获取签名signature(贴源码,附工程),该文详细讲些了如何获取签名,代码十分详细。对于初学者,可能还不知
  • 关键字:微信公众平台 JSSDK 获取地理位置接口 网页获取用户地理位置 getLocation作者:方倍工作室 原文:http://www.cnblogs.com/txw1958/p/weixin-web-location.html 在这篇微信公众平台开发教程中,我们将...
  • 在项目的逻辑业务当中,有时候需要获取用户当前所在的地理位置。那么,我们怎么去获取用户地理位置定位呢?  可以采用百度地图接口获取用户地理位置定位。要使用该服务,你得先注册成为百度地图开发者。...
  • 微信企业号开发地理位置信息获取
  • 获取签名工具类(httpclient和sha1加密) package com.luo.util; import java.io.IOException; import java.io.UnsupportedEncodingException; import java.security.MessageDigest; import java.security....
  • 微信主动获取用户地理位置,只能用这种办法,要开启地理位置获取高级接口。
  • 通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验。 官方文档 一、...
  • 本文介绍在微信公众平台上如何使用高级接口开发获取用户地理位置的功能。 一、获取用户地理位置接口 开通了上报地理位置接口的公众号,用户在关注后进入公众号会话时,会弹框让用户确认是否允许公众号使用其地理...
1 2 3 4 5 ... 20
收藏数 6,702
精华内容 2,680
关键字:

微信开发获取用户地理位置