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是异步执行。

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

  1. 转:微信开发获取地理位置实例(java,非常详细,附工程源码)

    微信开发获取地理位置实例(java,非常详细,附工程源码)   在本篇博客之前,博主已经写了4篇关于微信相关文章,其中三篇是本文基础: 1.微信开发之入门教程,该文章详细讲解了企业号体验号免费申请与一 ...

  2. 微信开发获取地理位置实例(java,非常详细,附工程源码)

    在本篇博客之前,博主已经写了4篇关于微信相关文章,其中三篇是本文基础: 1.微信开发之入门教程,该文章详细讲解了企业号体验号免费申请与一些必要的配置,以及如何调用微信接口. 2.微信开发之通过代理调试 ...

  3. js 获取地理位置经纬度

    1. 加载百度API的核心js,ak表示获取百度地图的开发密钥,免费的需要申请下 <script type="text/javascript" src="http: ...

  4. js获取地理位置

    直接上代码: if(navigator.geolocation) { navigator.geolocation.getCurrentPosition( function (position) { v ...

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

    前言: 前段时间有一个关于通过获取用户当前经纬度坐标,计算出该用户距离某指定地点之间的距离.因为做这个项目需要能够获取到比较精确的经纬度坐标,刚开始使用的是百度地图结果发现百度地图地位不太准确(有时候 ...

  6. 百度webAPI配合微信JSDK获取用户当前位子

    逻辑: ①通过微信JS-SDK 获取地理位置接口 获取经纬度 ②调用百度地图转换经纬度的API,得到百度地图的经纬度 ③调用百度地图 正/逆地址编码服务-->国际化逆地理编码 得到JSON数据, ...

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

    微信公众号与HTML 5混合模式揭秘1——如何部署JSSDK 微信公众号与HTML 5混合模式揭秘2——分享手机相册中照片 JSSDK为开发者提供了两个位置API服务:获取地理位置和使用微信内置地图查 ...

  8. 微信公众号开发《三》微信JS-SDK之地理位置的获取,集成百度地图实现在线地图搜索

    本次讲解微信开发第三篇:获取用户地址位置信息,是非常常用的功能,特别是服务行业公众号,尤为需要该功能,本次讲解的就是如何调用微信JS-SDK接口,获取用户位置信息,并结合百度地铁,实现在线地图搜索,与 ...

  9. Java微信公众平台开发之获取地理位置

    本部分需要用到微信的JS-SDK,微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包.通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语音.位置等手机系统 ...

随机推荐

  1. python django中使用sqlite3数据库 存储二进制数据ByteArray

    在python中使用sqlite3数据库存储二进制流数据ByteArray,在django使用sqlite3数据库时,有时候也要注意最好使用二进制流ByteArray插入字符串. 使用ByteArra ...

  2. PHP学习笔记(10)mysql常用命令

    1. 连接mysql数据库: 输入: mysql> mysql -uroot -p123(注意后面没有分号!!) 输出: mysql: [Warning] Using a password on ...

  3. Dubbo—Zookeeper的典型应用

    1.Zookeeper 作为 Hadoop 项目中的一个子项目,是 Hadoop 集群管理的一个必不可少的模块,它主要用来控制集群中的数据,如它管理 Hadoop 集群中的 NameNode,还有 H ...

  4. Docker是用来干什么的?【快速入门】

    Docker从去年开始不仅能在Linux下运行 ,还支持windows.osX等主流系统. 下面的例子我自己经常使用,当然你有更好的案例也可以分享给我. 尝试新软件 对开发者而言,每天会催生出的各式各 ...

  5. Python 使用标准库根据进程名获取进程PID

    应用场景 在进行 Linux 运维的环境中,我们经常会遇到维护同一台服务器上的多个程序,涉及到程序的启动.关闭和重启操作. 通常这些程序之间存在着相互依存的关系需要进行依次的启动关闭操作. 下面介绍几 ...

  6. Control character in cookie value or attribute

    在cookie中添加中文导致静态页面打不开, (1)先清除缓存 (2)使用escape()函数对中文进行编码,获取的时候在对中文进行解码unescape(). cookie.Set("sto ...

  7. 第二百二十节,jQuery EasyUI,Slider(滑动条)组件

    jQuery EasyUI,Slider(滑动条)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Slider(滑动条)组件的使用方法,这个 ...

  8. 使用 Notepad 或 TextEdit 来编写 HTML

    可以使用专业的 HTML 编辑器来编辑 HTML: Adobe Dreamweaver Microsoft Expression Web CoffeeCup HTML Editor 不过,我们同时推荐 ...

  9. SQL Server Replace函数

    REPLACE用第三个表达式替换第一个字符串表达式中出现的所有第二个给定字符串表达式. 语法REPLACE ( 'string_expression1' , 'string_expression2' ...

  10. ubuntu1204-gedit中文乱码

    1 在界面上使用ALT-F2打开"执行应用程序"界面. 2 输入dconf-editor.然后点击"执行"打开"Configuration Edito ...