获取用户的地理位置接口

获取用户的地理位置接口

本章节给大家介绍通过微信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

第二、之间的html代码

1 2 3 4

地理位置接口-使用微信内置地图查看位置接口 openLocation 地理位置接口-获取地理位置接口 getLocation

第三、初始化微信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+"/"; %>   欢迎来到微信jsapi测试界面-V型知识库 基础接口之判断当前客户端是否支持指定的js接口   地理位置接口-使用微信内置地图查看位置接口 openLocation 地理位置接口-获取地理位置接口 getLocation   获取网络状态接口 getNetworkType 图像接口 拍照或从手机相册中选图接口 chooseImage 预览图片接口 previewImage 上传图片接口 uploadImage 下载图片接口 downloadImage 显示图片

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

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

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

获取地理位置接口效果