wechat JS-SKD (getLoaction) 定位显示百度map
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<title></title>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript">
//通过config接口注入权限验证配置
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '', // 必填，公众号的唯一标识
timestamp: '<?php echo time();?>', // 必填，生成签名的时间戳
nonceStr: '<?php echo $nonceStr;?>', // 必填，生成签名的随机串
signature: '<?php echo $signature;?>',// 必填，签名
jsApiList: [] // 必填，需要使用的JS接口列表
});
//通过ready接口处理成功验证
wx.ready(function(){
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后 });
document.querySelector('#getLocation').onclick = function() {
wx.getLocation({
type: 'wgs84',
success: function(res) {
var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。 },
cancel: function(res) {
alert('用户拒绝授权获取地理位置');
}
});
};
</script>
</head>
<body>
<input type="button" value="Getloaction" id="getLoaction"/>
<input type=""
</body>
</html>
注意：
* 1. 所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
* 2. 如果发现在 Android 不能分享自定义内容，请到官网下载最新的包覆盖安装，Android 自定义分享接口需升级至 6.0.2.58 版本及以上。
* 3. 完整 JS-SDK 文档地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
引入百度地图API
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的key"></script>
<script type="text/javascript">
var go = function (a, b) {
// 百度地图API功能
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(113.58, 22.25), 12);
map.enableScrollWheelZoom(true); var p1 = new BMap.Point(113.584793, 22.253452);
var p2 = new BMap.Point(113.582202, 22.252536);
var p3 = new BMap.Point(113.585175, 22.258135);
var p4 = new BMap.Point(113.582305, 22.251052);
var p5 = new BMap.Point(a, b);
var walking = new BMap.WalkingRoute(map, { renderOptions: { map: map, autoViewport: true } });
walking.search(p1, p5);
// switch(type){ // case 'driving':
// var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
// driving.search(p1, p4);
// break; // case 'transit':
// var transit = new BMap.TransitRoute(map, {renderOptions:{map: map, autoViewport: true}});
// transit.search(p3, p1);
// break; // case 'walking':
// var walking = new BMap.WalkingRoute(map, {renderOptions:{map: map, autoViewport: true}});
// walking.search(p1, p2);
// break;
// case 'test':
// var walking = new BMap.WalkingRoute(map, {renderOptions:{map: map, autoViewport: true}});
// walking.search(p1, p5);
// break;
// }
} </script>
最后在WeChat JSSDK
document.querySelector('#getLocation').onclick = function() {
wx.getLocation({
type: 'wgs84',
success: function(res) {
var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
go(longitude,latitude);
},
cancel: function(res) {
alert('用户拒绝授权获取地理位置');
}
});
};
最后在微信上进制定的链接 在页面点击getlocation按钮 就可以看到你当前位置到你固定好的位置的步行距离了
地图显示的样式
<div id="allmap" style="height: 469px; width: 569px; max-width: 100%; overflow:hidden;"></div>
2015-09-11 Stuart
wechat JS-SKD (getLoaction) 定位显示百度map的更多相关文章
- 手机版的百度map封装,使用gps定位
代码如下,包自己引 包参考 一个百度MAP导航的基础封装 使用的是浏览器调用gps定位 修改了标注的大小 效果如图: 代码...... <!DOCTYPE html> <html&g ...
- H5结合百度map实现GPS定位
前言 目前我们做m端时都会用到定位,当用户第一次打开h5页面时会启动gps定位,并结合百度map来查找城市.按照我们的逻辑思路就是gps定位获取经纬度,传到后台调用百度的一个接口查找城市名称. 1.查 ...
- （转）百度Map API
转自 http://blog.sina.com.cn/s/blog_6079f38301013sb3.html 一.与地图操作相关的接口哦! (这些接口的开启都是写在执行成功的回调函数那里) map ...
- 一个百度MAP导航的基础封装
项目中需要根据点击时候点击的内容,输入百度地图查找并展示规划等相关功能 于是封装了一个单独的百度map的html页面以供调用 功能包括了 ①展示底图 ②切换卫星图,切换卫星路线图,切换普通地图 ③通过 ...
- C#显示百度地图API
http://dev.baidu.com/wiki/static/map/API/examples/?v=1.3&2_0#2&0 太原市的经纬度:112.596, 37.884 北京市 ...
- 在iOS APP中使用H5显示百度地图时如何支持HTTPS？
现象: 公司正在开发一个iOSAPP,使用h5显示百度地图,但是发现同样的H5页面,在安卓可以显示出来,在iOS中就显示不出来. 原因分析: 但是现在iOS开发中,苹果已经要求在APP中的所有对外连接 ...
- 【js】【图片显示】js控制html页面显示图片方式
js控制html页面显示图片方式,只需要引入“jquery-1.11.2.min.js” js: /* 引用 <script src="jquery-1.11.2.min.js&quo ...
- js 定义像java一样的map方便取值【转】
js 定义像java一样的map方便取值. 百度有位大神说"js对象本身就是一种Map结构",这真是一段让人欢天喜地的代码. <script> //定义一个全局map ...
- Blazor组件自做七 : 使用JS隔离制作定位/持续定位组件
1. 运行截图 演示地址 2. 在文件夹wwwroot/lib,添加geolocation子文件夹,添加geolocation.js文件 本组件主要是调用浏览器两个API实现基于浏览器的定位功能,现代 ...
随机推荐
- 初探J2EE
还记得在技术交流会上八期给我们讲的J2EE,当时就是云里来屋里去.留在自己脑子中的仅仅有两个字"规范",其他的真是一无全部. 可是如今学了后,又在脑子里留下了两个字"规范 ...
- 程序员不修复BUG怎么办
在测试过程中,难免遇到开发人员因为一些原因不想修改个别bug的情况.遇到这种问题时,该如何去推进开发修改bug呢? 一.现状分析 1.开发人员为啥不愿意修复BUG? (1)开发与测试对bug的定义理解 ...
- C/C++ 内存管理总结
C内存管理 存储时: 执行程序在存储时(没有调入到内存)分为代码区(text).数据区(data)和未初始化数据区(bss)3个部分. 1 代码区(text segment) 存放CPU执行的机器指令 ...
- SSH框架整合时，如果某一个action提交请求时数据校验失败，后续请求全部失败
© 版权声明:本文为博主原创文章,转载请注明出处 1.问题描述 SSH框架搭建好进行验证时发现,执行某个请求时,若参数校验失败,修改参数符合要求后再次请求依然失败.该请求一直报错如下: No resu ...
- atititi.soa 微服务 区别 联系 优缺点.doc
atititi.soa 微服务 区别 联系 优缺点.doc 1. 应用微服务的动机,跟传统巨石应用的比较1 2. 面向服务架构(SOA) esb2 3. 微服务架构(Microservices)2 ...
- k8s集群容器监控
硬件环境: 两台虚拟机, 10.10.20.203 部署docker.etcd.flannel.kube-apiserver.kube-controller-manager.kube-schedule ...
- bg、fg、nohup
1.bg 执行如下命令: tail -f log.txt 此时程序是在前台运行的,将程序放到后台执行,按ctrl+z,执行结果如下: []+ Stopped tail -f log.txt 执行bg命 ...
- 在Ubuntu下利用Eclipse调试FFmpeg
[编辑]第一步:准备编译环境 .tar.bz2 -2245/ ./configure -linux-i586.tar.gz 解压后得到jre1.7.0_17目录 最后通过java -version检查 ...
- CLR内存回收机制
代龄机制. 通过递归构建可达对象图,不可达的对象会被回收,然后CLR会矫正对象指针. 对于终止化/Finalize对象, 一开始时这些对象指针/根/引用会被放到终止化链表中,当CLR垃圾收集开始时,那 ...
- iOS中 HTTP/Socket/TCP/IP通信协议具体解释 韩俊强的博客
简介: // OSI(开放式系统互联), 由ISO(国际化标准组织)制定 // 1. 应用层 // 2. 表示层 // 3. 会话层 // 4. 传输层 // 5. 网络层 // 6. 数据链接层 / ...