地理位置接口 微信开发_微信jdk获取地理位置 使用微信内置地图查看位置接口 - CSDN
精华内容
参与话题
  • 调用微信地理位置接口,需要用到微信的JSSDK,这是微信的介绍: 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。 通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、...

     

    调用微信地理位置接口,需要用到微信的JSSDK,这是微信的介绍:

     

    微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。

    通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验。

    JSSDK使用步骤:

     

    步骤一:绑定域名

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

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

    步骤二:引入JS文件

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

    备注:支持使用 AMD/CMD 标准模块加载方法加载

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

    所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现web app的页面会导致签名失败,此问题会在Android6.2中修复)。

    wx.config({

        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。

        appId: '', // 必填,公众号的唯一标识

        timestamp: , // 必填,生成签名的时间戳

        nonceStr: '', // 必填,生成签名的随机串

        signature: '',// 必填,签名,见附录1

        jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2

    });

    步骤四:通过ready接口处理成功验证

    wx.ready(function(){

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

    });

    步骤五:通过error接口处理失败验证

    wx.error(function(res){

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

    });

    微信文档大概意思是,如果想调微信JSSDK,然后必须引入http://res.wx.qq.com/open/js/jweixin-1.2.0.js,而这个js需要配置成功才能够使用,成功就自动走ready方失败则error。

    这里调用地图接口,是wx.openLocation和wx.getLocation,对wx.config进行配置,  jsApiList: []中填这两个接口,其中签名需要在后台进行。

    下面介绍如何配置config,一定要注意参数名的大小写,不能错!:

    1、appId就不用说了,就是公众号的appId,timestamp是时间戳,生成签名用,这里单位是秒。

     

    	    /**
    	     * 获取当前时间戳,单位秒
    	     * @return
    	     */
    	    public static long getCurrentTimestamp() {
    	        return System.currentTimeMillis()/1000;
    	    }
    
    	    /**
    	     * 获取当前时间戳,单位毫秒
    	     * @return
    	     */
    	    public static long getCurrentTimestampMs() {
    	        return System.currentTimeMillis();
    	    }

    2、nonceStr,生成签名的随机字符串

     

     

     /**
    	     * 获取随机字符串 Nonce Str
    	     *
    	     * @return String 随机字符串
    	     */
    	    public static String generateNonceStr() {
    	        return UUID.randomUUID().toString().replaceAll("-", "").substring(0, 32);
    	    }


    3、signature,按照微信的签名算法,签名需要的参数noncestr-随机串,jsapi_ticket-临时票据,timestamp-时间戳,url-调用js接口的页面地址,绝对路径,形成签名的方法,分为二步

     

    (1)获取access_token,这个access_token有一个过时的问题,有效时间7200秒,而获取access_token每天限制为100000次,所以,我是把access_token存到数据库里,每次用的时候查询一下上次更新的时间是否有超过7200秒,这个时间可以设置的小一些,用来避免临界7200秒的问题,如果超过7200秒再重新请求一次,再更新数据库存入更新的时间。获取到access_token后,再用access_token获取临时票据ticket,就是上面的jsapi_ticket。

     

    public static Map<String,String> getTicket() throws ClientProtocolException, IOException{
    		Map<String,String> map = new HashMap<String,String>();
    		String turl = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid="+ConfigUtil.APPID
    				+"&secret="+ConfigUtil.APP_SECRECT;
    		JSONObject jsonObject = AuthUtil.doGetJson(turl);
    		String access_token = jsonObject.optString("access_token");
    	    String expires_in = String.valueOf(jsonObject.optInt("expires_in"));
    		String turl2 = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token="+access_token
    				+"&type=jsapi";
    		JSONObject jsonObject1 = AuthUtil.doGetJson(turl2);
    		String ticket = jsonObject1.optString("ticket");
    		map.put("expires_in", expires_in);
    		map.put("access_token", access_token);
    		map.put("ticket", ticket);
    		return map;
    	}
    public static JSONObject doGetJson(String url) throws ClientProtocolException, IOException{
    		JSONObject jsonObject = null;
    		DefaultHttpClient client =  new DefaultHttpClient();
    		HttpGet get = new HttpGet(url);
    		HttpResponse response = client.execute(get);
    		HttpEntity entity = response.getEntity();
    		if(entity!=null){
    			String result = EntityUtils.toString(entity, "UTF-8");
    			jsonObject = JSONObject.fromObject(result);
    		}
    		get.releaseConnection();
    		return jsonObject;
    	}

     

    (2)四个参数形成签名,把四个参数用key=value形成四个字符串,然后对其字典序排序,按照顺序用‘&’连接起来,形成一个字符串对其sha1加密,形成签名signature。

     

    public static String getSign(String timestamp,String noncestr,String jsapi_ticket,String url){
    		
    		
    		String arr[] =new String[] {"jsapi_ticket="+jsapi_ticket,"noncestr="+noncestr,"timestamp="+timestamp,"url="+url};
    		Arrays.sort(arr);//字典序排序
        	String str = "";
    		str = arr[0]+"&"+arr[1]+"&"+arr[2]+"&"+arr[3];
    	    System.out.println(str);
    		String mParms = null;//sha1加密
    	    MessageDigest digest = null;
    	    try {
    	      digest = java.security.MessageDigest.getInstance("SHA");
    	    } catch (NoSuchAlgorithmException e) {
    	      // TODO Auto-generated catch block
    	      e.printStackTrace();
    	    }
    	    digest.update(str.getBytes());
    	    byte messageDigest[] = digest.digest();
    	    // Create Hex String
    	    StringBuffer hexString = new StringBuffer();
    	    for (int i = 0; i < messageDigest.length; i++) {
    	      String shaHex = Integer.toHexString(messageDigest[i] & 0xFF);
    	      if (shaHex.length() < 2) {
    	        hexString.append(0);
    	      }
    	      hexString.append(shaHex);
    	    }
    	    mParms = hexString.toString();
    	    	return mParms;
    	    }
    	
    	
    	public static String byteToStr(byte[] byteArray){
    		
    		String str = "";
    		for(int i=0;i<byteArray.length;i++){
    			str += byteToHexStr(byteArray[i]); 		
    		}
    		return str;
    		
    		
    	}
    	 
    	
    	public static String byteToHexStr(byte mbyte){
    		char[] Digit = {'1','2','3','4','5','6','7','8','9','0','A','B','C','D','E','F'};
    		char[] tempArr = new char[2];
    		tempArr[0] = Digit[(mbyte >>> 4) & 0X0F]; 
    		tempArr[1] = Digit[mbyte & 0X0F]; 
    		 String s = new String(tempArr); 
    		 return s; 
    		
    		
    		
    	}

     

     

     

    最近在整理一些资源工具,放在网站分享 http://tools.maqway.com
    欢迎关注公众号:麻雀唯伊 , 不定时更新资源文章,或许有你想看的

     

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

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

    获取用户地理位置,你需要在微信公众平台开发者中心开启上报地理位置接口功能,开启之后会在用户首次进入公众号时,弹出是否允许上报地理位置选项,如果选择允许则在用户每次进入公众号会话的时候微信会以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

    展开全文
  • 微信获取地理位置接口

    千次阅读 2017-12-12 15:25:34
    关键字:微信公众平台 JSSDK 获取地理位置接口 网页获取用户地理位置 getLocation 作者:方倍工作室  原文:http://www.cnblogs.com/txw1958/p/weixin-web-location.html    在这篇微信公众平台开发...

    关键字:微信公众平台 JSSDK 获取地理位置接口 网页获取用户地理位置 getLocation
    作者:方倍工作室 
    原文:http://www.cnblogs.com/txw1958/p/weixin-web-location.html  

     

    在这篇微信公众平台开发教程中,我们将介绍如何在网页中获取用户的地理位置信息。

    本文分为以下二个部分:

    1. 生成JS-SDK权限验证签名
    2. 使用地理位置接口获取坐标

     

    一、微信JS-SDK

    1. 获得Access Token

    access token的获得方法在前面有介绍,详情见 微信公众平台开发(26) ACCESS TOKEN

    2. 获取jsapi_ticket

    生成签名之前必须先了解一下jsapi_ticket,jsapi_ticket是公众号用于调用微信JS接口的临时票据。正常情况下,jsapi_ticket的有效期为7200秒,通过access_token来获取。由于获取jsapi_ticket的api调用次数非常有限,频繁刷新jsapi_ticket会导致api调用受限,影响自身业务,开发者必须在自己的服务全局缓存jsapi_ticket 。

    参考以下文档获取access_token(有效期7200秒,开发者必须在自己的服务全局缓存access_token):
    用第一步拿到的access_token 采用http GET方式请求获得jsapi_ticket(有效期7200秒,开发者必须在自己的服务全局缓存jsapi_ticket),接口地址如下

    https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

    成功返回如下JSON:

    复制代码
    {
        "errcode":0,
        "errmsg":"ok",
        "ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",
        "expires_in":7200
    }
    复制代码

    获得jsapi_ticket之后,就可以生成JS-SDK权限验证的签名了。

    3. 签名算法实现

    签名生成规则如下:参与签名的字段包括noncestr(随机字符串), 有效的jsapi_ticket, timestamp(时间戳), url(当前网页的URL,不包含#及其后面部分) 。对所有待签名参数按照字段名的ASCII 码从小到大排序(字典序)后,使用URL键值对的格式(即key1=value1&key2=value2…)拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。对string1作sha1加密,字段名和字段值都采用原始值,不进行URL 转义。

    即signature=sha1(string1)。 示例:

    noncestr=Wm3WZYTPz0wzccnW
    jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg
    timestamp=1414587457
    url=http://mp.weixin.qq.com?params=value

    步骤1. 对所有待签名参数按照字段名的ASCII 码从小到大排序(字典序)后,使用URL键值对的格式(即key1=value1&key2=value2…)拼接成字符串string1:

    jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW&timestamp=1414587457&url=http://mp.weixin.qq.com?params=value

    步骤2. 对string1进行sha1签名,得到signature:

    0f9de62fce790f9a083d5c99e95740ceb90c27ed

    完整代码如下

    复制代码
    <?php
    class JSSDK {
      private $appId;
      private $appSecret;
    
      public function __construct($appId, $appSecret) {
        $this->appId = $appId;
        $this->appSecret = $appSecret;
      }
    
      public function getSignPackage() {
        $jsapiTicket = $this->getJsApiTicket();
    
        // 注意 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 = $this->createNonceStr();
    
        // 这里参数的顺序要按照 key 值 ASCII 码升序排序
        $string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr&timestamp=$timestamp&url=$url";
    
        $signature = sha1($string);
    
        $signPackage = array(
          "appId"     => $this->appId,
          "nonceStr"  => $nonceStr,
          "timestamp" => $timestamp,
          "url"       => $url,
          "signature" => $signature,
          "rawString" => $string
        );
        return $signPackage; 
      }
    
      private 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;
      }
    
      private function getJsApiTicket() {
        // jsapi_ticket 应该全局存储与更新,以下代码以写入到文件中做示例
        $data = json_decode(file_get_contents("jsapi_ticket.json"));
        if ($data->expire_time < time()) {
          $accessToken = $this->getAccessToken();
          // 如果是企业号用以下 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($this->httpGet($url));
          $ticket = $res->ticket;
          if ($ticket) {
            $data->expire_time = time() + 7000;
            $data->jsapi_ticket = $ticket;
            $fp = fopen("jsapi_ticket.json", "w");
            fwrite($fp, json_encode($data));
            fclose($fp);
          }
        } else {
          $ticket = $data->jsapi_ticket;
        }
    
        return $ticket;
      }
    
      private function getAccessToken() {
        // access_token 应该全局存储与更新,以下代码以写入到文件中做示例
        $data = json_decode(file_get_contents("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=$this->appId&secret=$this->appSecret";
          $res = json_decode($this->httpGet($url));
          $access_token = $res->access_token;
          if ($access_token) {
            $data->expire_time = time() + 7000;
            $data->access_token = $access_token;
            $fp = fopen("access_token.json", "w");
            fwrite($fp, json_encode($data));
            fclose($fp);
          }
        } else {
          $access_token = $data->access_token;
        }
        return $access_token;
      }
    
      private 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;
      }
    }
    复制代码

     

    二、网页获得地理位置坐标

    1. 绑定域名

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

    2. 获取签名包

    <?php
    require_once "jssdk.php";
    $jssdk = new JSSDK("yourAppID", "yourAppSecret");
    $signPackage = $jssdk->GetSignPackage();
    ?>

    3. 引入JS文件

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

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

    4.通过config接口注入权限验证配置

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

    复制代码
     wx.config({
        debug: false,
        appId: '<?php echo $signPackage["appId"];?>',
        timestamp: <?php echo $signPackage["timestamp"];?>,
        nonceStr: '<?php echo $signPackage["nonceStr"];?>',
        signature: '<?php echo $signPackage["signature"];?>',
        jsApiList: [
            // 所有要调用的 API 都要加到这个列表中
            'checkJsApi',
            'openLocation',
            'getLocation'
          ]
    });
    复制代码

    5. 通过ready接口处理成功验证

    地理位置需要在页面加载时就调用,需要把相关接口放在ready函数中调用来确保正确执行

    wx.ready(function () {
    });

    5.1 通过checkJsApi判断当前客户端版本是否支持指定获取地理位置

    复制代码
    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;
            }
        }
    });
    复制代码

    5.2. 使用getLocation接口获取地理位置坐标

    复制代码
    wx.getLocation({
        success: function (res) {
            var latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
            var longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。
            var speed = res.speed; // 速度,以米/每秒计
            var accuracy = res.accuracy; // 位置精度
        },
        cancel: function (res) {
            alert('用户拒绝授权获取地理位置');
        }
    });
    复制代码

     

    三、实现效果

    弹出请求获取页面

    JS成功获取地理位置参数

    展开全文
  • 本章节给大家介绍通过微信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   转载请注明出处!谢谢!
    展开全文
  • 在本篇博客之前,博主已经写了4篇关于微信相关文章,其中三篇是本文基础:1、微信开发之入门教程,该文章详细讲解了企业号体验号免费申请与一些必要的配置,以及如何调用微信接口。2、微信开发之通过代理调试本地...
  • 获取签名工具类(httpclient和sha1加密) ... import java.io.IOException; import java.io.UnsupportedEncodingException; import java.security.MessageDigest; import java.security.NoSuchAlgorithmExce...
  • 微信获取用户地理位置

    千次阅读 2018-07-02 10:45:28
    开通了上报地理位置接口的公众号,用户在关注后进入公众号会话时,会弹框让用户确认是否允许公众号使用其地理位置。弹框只在关注后出现一次,用户以后可以在公众号详情页面进行操作。第三方在收到地理位置上报信息...
  • 微信开发 - 获取用户地理位置定位

    万次阅读 2018-02-01 19:49:42
     可以采用百度地图接口获取用户的地理位置定位。要使用该服务,你得先注册成为百度地图开发者。http://lbsyun.baidu.com/ 百度地图开放平台地址  注册成为开发者后,你会获取到百度地图给你的一个密匙key,这个...
  • 关键字:微信公众平台 JSSDK 获取地理位置接口 网页获取用户地理位置 getLocation作者:方倍工作室 原文:http://www.cnblogs.com/txw1958/p/weixin-web-location.html 在这篇微信公众平台开发教程中,我们将...
  • 章节给大家介绍通过微信jsapi获取用户的地理位置微信官方文档关于地理位置给了两种接口,一种是通过微信内置地图查看用户的地理位置,第二种是直接获取当前用户的地理位置坐标信息。 使用微信内置地图查看位置...
  • ThinkPHP5.0微信开发之获取用户地理位置
  • 微信公众号开发之获取用户地理位置微信公众号需要设置JS安全访问域名 域名设置请不要加上https: 如果你的域名是https://mp.csdn.net/postedit 请设置为:mp.csdn.net/postedit 1、后台获取验证签名信息 ...
  • 不会的朋友可以看看《微信开发-初级接入微信公众平台MP》 2. 引用微信js-sdk, http://res.wx.qq.com/open/js/jweixin-1.0.0.js,然后通过config接口注入权限验证配置。先在自己的服务器上写个获取数据的接口...
  • 微信主动获取用户地理位置,只能用这种办法,要开启地理位置获取高级接口
  • 用户点击微信公众号底部【校区位置】菜单,打开应用页面,该页面中调用微信JSSDK打开微信内置地图,并设置目标地点(叩丁狼教育校区),此时可看到用户当前位置与目标地点位置的距离,还可通过右下角绿色按钮,调用...
  • 微信开发之入门教程

    万次阅读 多人点赞 2016-01-12 10:55:26
    时间葱葱,小宝鸽入职也有半年了,刚入的时候刚好有负责开发一个微信企业号的新项目。...因为经过微信,因此你的web会附加一些微信平台所提供的一些功能,如获取用户地理位置、获取微信用户头像、拍照上传、
  • 微信公众平台开发网页获取用户地理位置

    万次阅读 多人点赞 2018-05-09 14:06:57
    生成JS-SDK权限验证签名使用地理位置接口获取坐标   一、微信JS-SDK 1. 获得Access Token access token的获得方法在前面有介绍,详情见 微信公众平台开发(26) ACCESS TOKEN 2. 获取jsapi_tic
1 2 3 4 5 ... 20
收藏数 5,380
精华内容 2,152
关键字:

地理位置接口 微信开发