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. atitit.LimeSurvey 安装 attilax 总结

    LimeSurvey 安装 (OSSEZ) CHS 技术参考, 2011-05-02 Author: YUCHENG HU, HA Websystems, Inc. 备忘 Copyright © HA ...

  2. atitit.浏览器插件解决方案----ftp插件 attilax 总结

    atitit.浏览器插件解决方案----ftp插件  attilax 总结 1. 界面概览  D:云盘同步文件夹p5p5f tp.demo.html1 2. 初始化1 3. 事实调用2 4. 参考2 ...

  3. Oracle之sqlplus显示中文出现乱码

    解决办法: win+R快捷键>>--regedit>>HKEY_LOCL_MACHINE>>SOFTWARE>>ORALCE>>KEY_OR ...

  4. 数据泵导出oracle 10g数据库

    首先连接sqlplus: sqlplus /nolog conn system/manager (或者连接其他用户) 1.创建whboa目录,用于存放导出的dmp文件(需要提前手动创建目录“E:\or ...

  5. IOS证书之Certificates,Devices, Identifiers & Profiles

    做IOS开发的,在需要发布应用的时候,会接触到iOS Dev Center里面的证书制作,按照网上的资料操作,我们可以很容易的制作证书并且完成真机调试或者是产品发布,但是对于Certificates. ...

  6. Java与.NET机制比较分析

    一.概述 不管是什么语言开发的web应用程序,都是在解决一个问题,那就是用户输入url怎么把对应的页面响应出来,如何通过url映射到响应的类,由于自己做asp.net的时间也不短了,还算是对asp.n ...

  7. 快使用阿里云的maven仓库

    自从开源中国的maven仓库挂了之后就一直在用国外的仓库,慢得想要砸电脑的心都有了.如果你和我一样受够了国外maven仓库的龟速下载?快试试阿里云提供的maven仓库,从此不在浪费生命…… 仓库地址: ...

  8. C++ 类的多态五(多态的语法本质分析)

    //多态的语法本质分析 #include<iostream> using namespace std; /* 三种易混淆的多态场景 */ class Point{ public: Poin ...

  9. JDBC(Java Database Connectivity,Java数据库连接)API是一个标准SQL(Structured Query Language

    JDBC(Java Database Connectivity,Java数据库连接)API是一个标准SQL(Structured Query Language,结构化查询语言)数据库访问接口,它使数据 ...

  10. Timer类与TimerTask类

    有个schedule方法,可以指定过多长时间定期的执行某个程序或某段代码,或者过多长时间启动一个线程等. TimerTask类实现了Runnable接口,要执行的类由它里面实现的run方法来完成. 编 ...