<!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. 倍福TwinCAT(贝福Beckhoff)基础教程2.0 TwinCAT常用快捷键

    F5:运行程序 CTRL+F5:停止运行当前程序 F12:登出 F11:登录 CTRL+F7:强制写入数值     更多教学视频和资料下载,欢迎关注以下信息: 我的优酷空间: http://i.you ...

  2. PS 如何附加增效工具.

    编辑-首选项-增效工具,选择目标增效工具文件夹

  3. C++Singleton的DCLP（双重锁）实现以及性能测评

      本文系原创,转载请注明:http://www.cnblogs.com/inevermore/p/4014577.html   根据维基百科,对单例模式的描述是: 确保一个类只有一个实例,并提供对该 ...

  4. 深入浅出java静态代理和动态代理

    首先介绍一下.什么是代理: 代理模式,是经常使用的设计模式. 特征是.代理类与托付类有同样的接口,代理类主要负责为托付类预处理消息.过滤消息.把消息转发给托付类.以及事后处理消息. 代理类和托付类,存 ...

  5. STL学习笔记（迭代器类型）

    迭代器类型 迭代器是一种“能够遍历某个序列内的所有元素”的对象.它可以透过与一般指针一致的接口来完成自己的工作. 不同的迭代器具有不同的”能力“(行进和存取能力) Input迭代器 Input迭代器只 ...

  6. Android蓝牙

    代码地址如下:http://www.demodashi.com/demo/12772.html 前言:最近,新换了一家公司,公司的软件需要通过蓝牙与硬件进行通讯,于是趁此机会将Android蓝牙详细的 ...

  7. Android 关于SD的操作

    1 http://www.cnblogs.com/shaoyangjiang/archive/2012/03/09/2388178.html 2

  8. asp.net core mvc视频A：笔记3-4.母版页与部分视图

    新建项目3.4, 新建一个共享文件,一般存放在Shared目录下方 选择 如果安装了Reshaper插件可以这样添加(插件在本人博客中找) 代码 创建一个空的控制器TestController 使用布 ...

  9. MVC| Razor 布局-模板页 | ViewStart.cshtml

    来自:http://blog.csdn.net/fanbin168/article/details/49725175 这个图就看明白了 _ViewStart.cshtml 视图文件的作用  _View ...

  10. C语言小板凳（1）

    ①strlen()函数作用:计算字符串的长度,当遇到"\n"字符时结束,即遇到数值"0"时结束计算,有一点特别要注意当这个函数用来计算数组的长度的时候遇到数值0 ...