<!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&amp;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的更多相关文章

  1. 手机版的百度map封装,使用gps定位

    代码如下,包自己引 包参考 一个百度MAP导航的基础封装 使用的是浏览器调用gps定位 修改了标注的大小 效果如图: 代码...... <!DOCTYPE html> <html&g ...

  2. H5结合百度map实现GPS定位

    前言 目前我们做m端时都会用到定位,当用户第一次打开h5页面时会启动gps定位,并结合百度map来查找城市.按照我们的逻辑思路就是gps定位获取经纬度,传到后台调用百度的一个接口查找城市名称. 1.查 ...

  3. （转）百度Map API

    转自  http://blog.sina.com.cn/s/blog_6079f38301013sb3.html 一.与地图操作相关的接口哦! (这些接口的开启都是写在执行成功的回调函数那里) map ...

  4. 一个百度MAP导航的基础封装

    项目中需要根据点击时候点击的内容,输入百度地图查找并展示规划等相关功能 于是封装了一个单独的百度map的html页面以供调用 功能包括了 ①展示底图 ②切换卫星图,切换卫星路线图,切换普通地图 ③通过 ...

  5. C#显示百度地图API

    http://dev.baidu.com/wiki/static/map/API/examples/?v=1.3&2_0#2&0 太原市的经纬度:112.596, 37.884 北京市 ...

  6. 在iOS APP中使用H5显示百度地图时如何支持HTTPS？

    现象: 公司正在开发一个iOSAPP,使用h5显示百度地图,但是发现同样的H5页面,在安卓可以显示出来,在iOS中就显示不出来. 原因分析: 但是现在iOS开发中,苹果已经要求在APP中的所有对外连接 ...

  7. 【js】【图片显示】js控制html页面显示图片方式

    js控制html页面显示图片方式,只需要引入“jquery-1.11.2.min.js” js: /* 引用 <script src="jquery-1.11.2.min.js&quo ...

  8. js 定义像java一样的map方便取值【转】

    js 定义像java一样的map方便取值.  百度有位大神说"js对象本身就是一种Map结构",这真是一段让人欢天喜地的代码. <script> //定义一个全局map ...

  9. Blazor组件自做七 : 使用JS隔离制作定位/持续定位组件

    1. 运行截图 演示地址 2. 在文件夹wwwroot/lib,添加geolocation子文件夹,添加geolocation.js文件 本组件主要是调用浏览器两个API实现基于浏览器的定位功能,现代 ...

随机推荐

  1. ReadWriteLock 读写锁(读书笔记)

     读写分离锁可以有效的帮助减少锁的竞争,提升系统的效率, 读-读不互斥 读读之间不阻塞 读-写互斥 读阻塞写,写也会阻塞读 写-写互斥 写写阻塞 在系统中,读操作次数远远大于写操作,则读写锁就可以发挥 ...

  2. ionic - 运行起来

    更新时间: 2018-8-1 (首次更新) 1.首先下载python(至于为什么安装,看截图) https://www.python.org/downloads/release/python-370/ ...

  3. Android学习（十八）Toast的使用

    一.什么是Toast 1.Toast是一种提供给用户简洁提示信息的视图. 2.该视图以浮于应用程序之上的形式呈现给用户, Toast提示界面不获取焦点,在不影响用户使用的情况下,给用户某些提示. 3. ...

  4. Git提交时提示‘The file will have its original line endings in your working directory’

    Git提交时提示'The file will have its original line endings in your working directory' Git出现错误 git add -A ...

  5. c++打印蛇形矩阵

    一个m*n的矩阵里按照下图形式填充,最后形成的矩阵即为蛇形矩阵,下图是m=4, n =5时的蛇形矩阵: 方法一:逐层循环 #include <iostream> using namespa ...

  6. Android版CSDN发现的一些问题

          作为CSDN的忠有用户,在他一推出这款APP以后.就下载了使用,近期发现了一些个问题,在此提出来.希望看到或者遇到同样问题的,提出你们的解决方式.       在CSDN手机版的首页上,我 ...

  7. Android环境变量的设置（详细图解版）

    分类: Android初学学习笔记2011-07-10 09:47 99479人阅读 评论(0) 收藏 举报 androidtoolspathcmd 查阅了网上很多的资料但是对于环境变量设置介绍的不够 ...

  8. 《TomCat与Java Web开发技术详解》（第二版） 第八章节的学习总结 -- 访问mysql

    终于学到如何访问Mysql了 1. 可以看看此章节提供的sql脚本,以后可以照着写了.此外,对于Mysql如何使用,最好的地方就是其官网介绍了.http://dev.mysql.com/doc/ref ...

  9. Vue.js 2 入门与提高（一）

    ** Vue.js -- 渐进式前端框架 ** Vue.js作为一个后起的前端框架,借鉴了Angular .React等现代前端框架/库的诸多特点,并且 取得了相当不错的成绩. Vue.js的定位是一 ...

  10. onInterceptTouchEvent和onTouchEvent调用时序(转)

    onInterceptTouchEvent和onTouchEvent调用时序 onInterceptTouchEvent()是ViewGroup的一个方法,目的是在系统向该ViewGroup及其各个c ...