• 微信小程序例子——打开微信小程序内置地图

    1、效果展示


    2、关键代码

    .wxml布局文件代码


    .js逻辑文件代码

    Page({
      openMap:function(){
        wx.getLocation({
          type: 'gcj02', // 默认为 wgs84 返回 gps 坐标,gcj02 返回可用于 wx.openLocation 的坐标
          success: function(res){
            // success
            wx.openLocation({
              latitude: res.latitude, // 纬度,范围为-90~90,负数表示南纬
              longitude: res.longitude, // 经度,范围为-180~180,负数表示西经
              scale: 28, // 缩放比例          
            })
          }
        })
      }
    })
    

    3、源代码获取方式

    百度云链接:http://pan.baidu.com/s/1bWEP0i


    4、在打开微信小程序内置地图的过程中有遇到任何问题或者不明白的地方,欢迎添加我的微信进行咨询,感谢您的支持!微信号:FutureJet

    5、觉得不错请打赏,您的十分满意是笔者的无限动力。

          
    展开全文
  • 用户点击微信公众号底部【校区位置】菜单,打开应用页面,该页面中调用微信JSSDK打开微信内置地图,并设置目标地点(叩丁狼教育校区),此时可看到用户当前位置与目标地点位置的距离,还可通过右下角绿色按钮,调用...

    本文作者:陈惠,叩丁狼高级讲师。原创文章,转载请注明出处。

    本篇文章实现效果如下:
    用户点击微信公众号底部【校区位置】菜单,打开应用页面,该页面中调用微信JSSDK打开微信内置地图,并设置目标地点(叩丁狼教育校区),此时可看到用户当前位置与目标地点位置的距离,还可通过右下角绿色按钮,调用百度地图等第三方软件,点击后会自动设置用户的位置作为起点,目标地点作为终点,自动查询方案路线。

    叩丁狼教育.gif

    实现步骤

    一:绑定域名
    在公众号管理页面,设置JS接口安全域名,表示该域名下的所有页面,都拥有使用JSSDK的权限。

    叩丁狼教育.png

    二:创建微信公众号底部菜单
    实现具体流程可参考该文章https://www.jianshu.com/p/85573685f17d
    我使用的菜单json数据为:

    {
        "button": [
            {
                "type": "click",
                "name": "课程学习",
                "key": "course"
            },
            {
                "type": "click",
                "name": "就业资讯",
                "key": "JAVA"
            },
            {
                "type": "view",
                "name": "校区位置",
                "url": "http://huihui.mynatapp.cc/location.do"
            }
        ]
    }
    
    

    三:Controller代码
    主要是根据指定的算法,生成并提供微信规定的参数给页面。
    若对微信JS-SDK不了解的同学可先参考该文章:https://www.jianshu.com/p/b3c4450f845e

    @Controller
    public class LocationController {
        @RequestMapping("location")
        public String location(Model model,HttpServletRequest request) throws Exception {
            //32位随机数(UUID去掉-就是32位的)
            String uuid = UUID.randomUUID().toString().replace("-", "");
            //jssdk权限验证参数
            TreeMap<Object, Object> map = new TreeMap<>();
            map.put("appId",WeChatUtil.APPID);
            long timestamp = new Date().getTime();
            map.put("timestamp",timestamp);//全小写
            map.put("nonceStr",uuid);
            map.put("signature",WeChatUtil.getSignature(timestamp,uuid,RequestUtil.getUrl(request)));
            model.addAttribute("configMap",map);
            return  "location"; //视图页面
        }
    }
    

    参数介绍
    appId:必填,公众号的唯一标识
    timestamp:必填,时间戳
    nonceStr:必填,随机生成的字符串
    signature:必填,根据timestamp与nonceStr与jsapi_ticket按照某种算法生成的签名

    官方文档参考:
    https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 (附录1-JS-SDK使用权限签名算法)

    生成签名的工具方法:

       public static String getSignature(Long timestamp,String noncestr,String url ){
            //对所有待签名参数按照字段名的ASCII 码从小到大排序(字典序)
            Map<String,Object> map = new TreeMap<>();
            map.put("jsapi_ticket",getJsapi_ticket());
            map.put("timestamp",timestamp);
            map.put("noncestr",noncestr);
            map.put("url",url);
            //使用URL键值对的格式(即key1=value1&key2=value2…)拼接成字符串string1
            StringBuilder sb = new StringBuilder();
            Set<String> set = map.keySet();
            for (String key : set) {
                sb.append(key+"="+map.get(key)).append("&");
            }
            //去掉最后一个&符号
            String temp = sb.substring(0,sb.length()-1);
            //使用sha1加密
            return SecurityUtil.SHA1(temp);
        }
    

    jsapi_ticket:
    生成签名signature还需要一个叫jsapi_ticket的参数,jsapi_ticket是公众号用于调用微信JS接口的临时票据,可以通过基础接口的access_token来获取,有效期为7200秒,调用次数有限,所以在后台也需要全局缓存jsapi_ticket。

    代码:

    //获取JSSDK的接口地址
    public static final String GET_TICKET_URL = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi";
    /**
    * 获取JSSDK的jsapi_ticket
    */
    public static void getJsapi_ticket(){
         //发起请求到指定的接口
         String result = HttpUtil.get(GET_TICKET_URL.replace("ACCESS_TOKEN",getAccessToken()));
         System.out.println(result);
    }
    

    getAccessToken是之前开发教程(四)已经实现好的,有需要的可参考https://www.jianshu.com/p/85573685f17d

    三:页面中引入JS文件

    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    

    四:通过config接口注入权限验证配置

    所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用JSSDK的相关API。

    在页面中添加这段js代码

    wx.config({
    	debug: false, // 开启调试模式
    	appId: '${configMap.appId}', // 公众号的唯一标识
    	timestamp: '${configMap.timestamp}', // 生成签名的时间戳
    	nonceStr: '${configMap.nonceStr}', // 生成签名的随机串
    	signature: '${configMap.signature}',// 签名
    	jsApiList: ['openLocation'] // 这里先声明我们要用到打开地图的JS接口
    });
    

    参数介绍
    debug:true为开启调试模式,调用的所有api的返回值会在客户端alert出来,若是生产环境则设置为false
    jsApiList:必填,在里面声明我们需要使用到的JS接口权限

    五:通过ready接口处理成功验证
    config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。

    最后添加以下js代码即可:

    wx.ready(function(){
    	wx.openLocation({
    		latitude:23.132006, // 纬度,浮点数,范围为90 ~ -90
    		longitude:113.377785, // 经度,浮点数,范围为180 ~ -180。
    		name: '叩丁狼教育', // 位置名
    		address: '专业IT培训', // 地址详情说明
    		scale: 25, // 地图缩放级别,整形值,范围从1~28。默认为最大
    		infoUrl: 'http://www.wolfcode.cn/' // 在查看位置界面底部显示的超链接,可点击跳转
    	});
    });
    

    latitude与longitude是目标地点的经纬度坐标,可以使用腾讯地图提供的坐标拾取器
    https://lbs.qq.com/tool/getpoint/ 搜索指定地点即可获取。

    叩丁狼教育

    展开全文
  • 图示:index.wxml&lt;!--index.wxml--&gt; &lt;button bindtap="map"&gt;定位&lt;/button&gt;//index.js //获取应用实例 const app = getApp() Page({ ... type:...

    图示:

    clipboard.png

    index.wxml

    <!--index.wxml-->
    <button bindtap="map">定位</button>
    //index.js
    //获取应用实例
    const app = getApp()
    Page({
      data: {
        
      },
      map:function(){
        wx.getLocation({
          type: 'gcj02', //返回可以用于wx.openLocation的经纬度
          success: function (res) {
            var latitude = res.latitude
            var longitude = res.longitude
            wx.openLocation({
              latitude: latitude,
              longitude: longitude,
              scale: 28
            })
          }
        })
      }
    })
    
    解说:
    1、index.wxml只有一个button,用于触发获取地理位置的,首次获取位置,会询问是否要获取地理位置,要允许才会获取,即需要授权才可以获取位置。

    2、index.js调用了wx.chooseLocation这个api获取,通过map这个点击事件,触发这个方法,获取到经纬度,然后定位,再wx.openLocation,调用微信内置地图查看位置。



    展开全文
  • 目前很多微信小程序都具备地图查看的功能,那么对于在微信小程序中如何实现地图插件的调用方法,可能很多初学小程序开发的技术人员还存在很多疑问,那么下面就来跟大家详细解答一下。  首先肯定是借助小程序自带的...

      目前很多微信小程序都具备地图查看的功能,那么对于在微信小程序中如何实现地图插件的调用方法,可能很多初学小程序开发的技术人员还存在很多疑问,那么下面就来跟大家详细解答一下。

      首先肯定是借助小程序自带的map组件 .wxml代码:

    <map id="myMap" style="width: 100%; height: 300px;" latitude="{{latitude}}" longitude="{{longitude}}" markers="{{markers}}" polyline="{{polyline}}" show-location bindmarkertap="selectMarket" include-points="{{markers}}" show-location="true"></map>

      首先我们要创建一个画布 .js

      onReady: function (e) {

      this.mapCtx = wx.createMapContext('myMap');

      }

      要去后台接收数据,在markers里然后放入data在前台展示数据

      在js中写入事件代码

      selectMarket(e) {

      //console.log(e)

      var that = this;

      that.setData({

      uid: e.markerId

      })

      wx.getLocation({//获取当前经纬度

      type: 'wgs84', //返回可以用于wx.openLocation的经纬度,官方提示bug: iOS 6.3.30 type 参数不生效,只会返回 wgs84 类型的坐标信息

      success: function (res) {

      var url = getApp().data.servsers;

      var uid = that.data.uid

      //console.log(uid)

      wx.request({

      url: url + 'Index/nav_data?uid=' + uid,

      success: function (data) {

      console.log(data)

      wx.openLocation({//使用微信内置地图查看位置。

      latitude: Number(data.data.latitude),//要去的纬度-地址

      longitude: Number(data.data.longitude),//要去的经度-地址

      name: data.data.name,

      address: data.data.address

      })

      }

      })

      }

      })

      }

      })

      操作完毕。点击标注之后跳到微信内置地图实现导航,整个步骤流程是不是看起来非常的简单,但是操作起来并非如此,大家一定要一步一步来,好了如果还存在有疑问的话,可以留言咨询。

      本文由专业的微信小程序开发公司燚轩科技整理发布,原创不易,如需转载,请注明出处!

    转载于:https://blog.51cto.com/13686158/2149579

    展开全文
  • 2、微信开发之通过代理调试本地项目,该文章详细讲解了如何调试本地项目,使用工具的详细安装与配置。 3、微信开发之使用java获取签名signature(贴源码,附工程),该文详细讲些了如何获取签名,代码十分详

    在本篇博客之前,博主已经写了4篇关于微信相关文章,其中三篇是本文基础:

    1、微信开发之入门教程,该文章详细讲解了企业号体验号免费申请与一些必要的配置,以及如何调用微信接口。

    2、微信开发之通过代理调试本地项目,该文章详细讲解了如何调试本地项目,使用工具的详细安装与配置。

    3、微信开发之使用java获取签名signature(贴源码,附工程),该文详细讲些了如何获取签名,代码十分详细。

    对于初学者,可能还不知道订阅号、服务号、和企业号的区别,博主之前也是一直没有弄清楚,因此查阅资料整理了一篇博客供大家阅读:微信服务号、订阅号和企业号的区别(运营和开发两个角度)。建议有时间得猿友还是阅读一下为好。

    上面的文章内容虽然有点多而且繁琐,看完之后不敢说已经入门,但是初步了解,自己写实例是没有问题的。不积跬步无以至千里,希望猿友们耐心继续下去!!!!!!

    上面的文章内容虽然有点多而且繁琐,看完之后不敢说已经入门,但是初步了解,自己写实例是没有问题的。不积跬步无以至千里,希望猿友们耐心继续下去!!!!!!

    上面的文章内容虽然有点多而且繁琐,看完之后不敢说已经入门,但是初步了解,自己写实例是没有问题的。不积跬步无以至千里,希望猿友们耐心继续下去!!!!!!

    期间可能会遇到一些坑,欢迎与博主评论交流

    有了上面的基础,接下来博主将分享一个具体的微信开发实例,获取用户当前的地理位置。

    一、结果演示

    这里写图片描述 这里写图片描述 这里写图片描述 这里写图片描述

    二、代码及代码讲解

    本工程使用的环境是Eclipse + maven + springmvc,下面附上关键代码,springmvc和web.xml相关配置和maven相关依赖就不一一列举,最后会附上工程供大家下载。

    2.1、获取签名工具类(httpclient和sha1加密)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    package com.luo.util;
     
    import java.io.IOException;
    import java.io.UnsupportedEncodingException;
    import java.security.MessageDigest;
    import java.security.NoSuchAlgorithmException;
    import java.util.ArrayList;
    import java.util.HashMap;
    import java.util.Iterator;
    import java.util.List;
    import java.util.Map;
    import java.util.Set;
    import java.util.UUID;
    import net.sf.json.JSONObject;
    import org.apache.http.HttpEntity;
    import org.apache.http.HttpResponse;
    import org.apache.http.NameValuePair;
    import org.apache.http.ParseException;
    import org.apache.http.client.ClientProtocolException;
    import org.apache.http.client.entity.UrlEncodedFormEntity;
    import org.apache.http.client.methods.HttpGet;
    import org.apache.http.client.methods.HttpPost;
    import org.apache.http.client.methods.HttpUriRequest;
    import org.apache.http.impl.client.DefaultHttpClient;
    import org.apache.http.message.BasicNameValuePair;
    import org.apache.http.protocol.HTTP;
    import org.apache.http.util.EntityUtils;
     
    public class HttpXmlClient {
     
        public static String post(String url, Map<String, String> params) {
            DefaultHttpClient httpclient = new DefaultHttpClient();
            String body = null;
            HttpPost post = postForm(url, params);
            body = invoke(httpclient, post);
            httpclient.getConnectionManager().shutdown();
            return body;
        }
     
        public static String get(String url) {
            DefaultHttpClient httpclient = new DefaultHttpClient();
            String body = null;
            HttpGet get = new HttpGet(url);
            body = invoke(httpclient, get);
            httpclient.getConnectionManager().shutdown();
            return body;
        }
     
        private static String invoke(DefaultHttpClient httpclient,
                HttpUriRequest httpost) {
            HttpResponse response = sendRequest(httpclient, httpost);
            String body = paseResponse(response);
            return body;
        }
     
        private static String paseResponse(HttpResponse response) {
            HttpEntity entity = response.getEntity();
            String charset = EntityUtils.getContentCharSet(entity);
            String body = null;
            try {
                body = EntityUtils.toString(entity);
            } catch (ParseException e) {
                e.printStackTrace();
            } catch (IOException e) {
                e.printStackTrace();
            }
            return body;
        }
     
        private static HttpResponse sendRequest(DefaultHttpClient httpclient,
                HttpUriRequest httpost) {
            HttpResponse response = null;
            try {
                response = httpclient.execute(httpost);
            } catch (ClientProtocolException e) {
                e.printStackTrace();
            } catch (IOException e) {
                e.printStackTrace();
            }
            return response;
        }
     
        private static HttpPost postForm(String url, Map<String, String> params) {
     
            HttpPost httpost = new HttpPost(url);
            List<NameValuePair> nvps = new ArrayList<NameValuePair>();
     
            Set<String> keySet = params.keySet();
            for (String key : keySet) {
                nvps.add(new BasicNameValuePair(key, params.get(key)));
            }
     
            try {
                httpost.setEntity(new UrlEncodedFormEntity(nvps, HTTP.UTF_8));
            } catch (UnsupportedEncodingException e) {
                e.printStackTrace();
            }
     
            return httpost;
        }
     
        public static void main(String[] args) {
     
            //获取access_token
            Map<String, String> params = new HashMap<String, String>();
            params.put("corpid","wx5f24fa0db1819ea2");
            params.put("corpsecret","uQtWzF0bQtl2KRHX0amekjpq8L0aO96LSpSNfctOBLRbuYPO4DUBhMn0_v2jHS-9");
            String xml = HttpXmlClient.post("https://qyapi.weixin.qq.com/cgi-bin/gettoken",params);
            JSONObject jsonMap  = JSONObject.fromObject(xml);
            Map<String, String> map = new HashMap<String, String>();
            Iterator<String> it = jsonMap.keys(); 
            while(it.hasNext()) { 
                String key = (String) it.next(); 
                String u = jsonMap.get(key).toString();
                map.put(key, u); 
            }
            String access_token = map.get("access_token");
            System.out.println("access_token=" + access_token);
     
            //获取ticket
            params.put("access_token",access_token);
            xml = HttpXmlClient.post("https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket",params);
            jsonMap  = JSONObject.fromObject(xml);
            map = new HashMap<String, String>();
            it = jsonMap.keys(); 
            while(it.hasNext()) { 
                String key = (String) it.next(); 
                String u = jsonMap.get(key).toString();
                map.put(key, u); 
            }
            String jsapi_ticket = map.get("ticket");
            System.out.println("jsapi_ticket=" + jsapi_ticket);
     
            //获取签名signature
            String noncestr = UUID.randomUUID().toString();
            String timestamp = Long.toString(System.currentTimeMillis() / 1000);
            String url="http://mp.weixin.qq.com";
            String str = "jsapi_ticket=" + jsapi_ticket +
                    "&noncestr=" + noncestr +
                    "&timestamp=" + timestamp +
                    "&url=" + url;
            //sha1加密
            String signature = SHA1(str);
            System.out.println("noncestr=" + noncestr);
            System.out.println("timestamp=" + timestamp);
            System.out.println("signature=" + signature);
            //最终获得调用微信js接口验证需要的三个参数noncestr、timestamp、signature
        }
     
           /**
         * @author:罗国辉
         * @date: 2015年12月17日 上午9:24:43
         * @description: SHA、SHA1加密
         * @parameter:   str:待加密字符串
         * @return:  加密串
        **/
        public static String SHA1(String str) {
            try {
                MessageDigest digest = java.security.MessageDigest
                        .getInstance("SHA-1"); //如果是SHA加密只需要将"SHA-1"改成"SHA"即可
                digest.update(str.getBytes());
                byte messageDigest[] = digest.digest();
                // Create Hex String
                StringBuffer hexStr = new StringBuffer();
                // 字节数组转换为 十六进制 数
                for (int i = 0; i < messageDigest.length; i++) {
                    String shaHex = Integer.toHexString(messageDigest[i] & 0xFF);
                    if (shaHex.length() < 2) {
                        hexStr.append(0);
                    }
                    hexStr.append(shaHex);
                }
                return hexStr.toString();
     
            } catch (NoSuchAlgorithmException e) {
                e.printStackTrace();
            }
            return null;
        }
    }

    2.2、controller代码(尽可能仔细阅读下面的每一行代码,特别是url部分)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    package com.luo.controller;
     
    import java.util.HashMap;
    import java.util.Iterator;
    import java.util.Map;
    import java.util.UUID;
    import javax.servlet.http.HttpServletRequest;
    import net.sf.json.JSONObject;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.servlet.ModelAndView;
     
    import com.luo.util.HttpXmlClient;
     
    @Controller 
    public class UserController { 
     
        @RequestMapping("/")   
        public ModelAndView getIndex(HttpServletRequest request){ 
     
            ModelAndView mav = new ModelAndView("index"); 
            //获取access_token
            Map<String, String> params = new HashMap<String, String>();
            params.put("corpid","wx7099477f2de8aded");
            params.put("corpsecret","4clWzENvHVmpcyuA4toys0URkfYanIqWtxZ5plbisn6Cd5AVTF0thpaK6UAhjIvN");
            String xml = HttpXmlClient.post("https://qyapi.weixin.qq.com/cgi-bin/gettoken",params);
            JSONObject jsonMap  = JSONObject.fromObject(xml);
            Map<String, String> map = new HashMap<String, String>();
            Iterator<String> it = jsonMap.keys(); 
            while(it.hasNext()) { 
                String key = (String) it.next(); 
                String u = jsonMap.get(key).toString();
                map.put(key, u); 
            }
            String access_token = map.get("access_token");
     
            //获取ticket
            params.put("access_token",access_token);
            xml = HttpXmlClient.post("https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket",params);
            jsonMap  = JSONObject.fromObject(xml);
            map = new HashMap<String, String>();
            it = jsonMap.keys(); 
            while(it.hasNext()) { 
                String key = (String) it.next(); 
                String u = jsonMap.get(key).toString();
                map.put(key, u); 
            }
            String jsapi_ticket = map.get("ticket");
     
            //获取签名signature
            String noncestr = UUID.randomUUID().toString();
            String timestamp = Long.toString(System.currentTimeMillis() / 1000);
            //获取请求url
            String path = request.getContextPath();
            //以为我配置的菜单是http://yo.bbdfun.com/first_maven_project/,最后是有"/"的,所以url也加上了"/"
            String url = request.getScheme() + "://" + request.getServerName() +  path + "/"
            String str = "jsapi_ticket=" + jsapi_ticket +
                    "&noncestr=" + noncestr +
                    "&timestamp=" + timestamp +
                    "&url=" + url;
            //sha1加密
            String signature = HttpXmlClient.SHA1(str);
            mav.addObject("signature", signature);  
            mav.addObject("timestamp", timestamp);  
            mav.addObject("noncestr", noncestr);  
            mav.addObject("appId", "wx7099477f2de8aded");
            System.out.println("jsapi_ticket=" + jsapi_ticket);
            System.out.println("noncestr=" + noncestr);
            System.out.println("timestamp=" + timestamp);
            System.out.println("url=" + url);
            System.out.println("str=" + str);
            System.out.println("signature=" + signature);
            return mav;   
     
        }   
    }

    2.3、前端js代码(尽可能仔细阅读下面的每一行代码)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
    <html>
    <head>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script>
        wx.config({
            debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
            appId: '${appId}', // 必填,企业号的唯一标识,此处填写企业号corpid
            timestamp: parseInt("${timestamp}",10), // 必填,生成签名的时间戳
            nonceStr: '${noncestr}', // 必填,生成签名的随机串
            signature: '${signature}',// 必填,签名,见附录1
            jsApiList: ['getLocation'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
        });
        wx.ready(function(){
        });
     
        wx.error(function(res){
        });
    </script>
    </head>
    <body>
    <button id="getBBS" style="width:1000px;height:600px;font-size:150px;" onclick="submitOrderInfoClick();">获取地理位置</button>
    </body>
    <script type="text/javascript">
    function submitOrderInfoClick(){
      wx.getLocation({
            success: function (res) {
                alert("小宝鸽获取地理位置成功,经纬度为:(" + res.latitude + "," + res.longitude + ")" );
            },
            fail: function(error) {
                AlertUtil.error("获取地理位置失败,请确保开启GPS且允许微信获取您的地理位置!");
            }
        });
    }
    </script>
    </html>

    三、源码下载

    http://download.csdn.net/detail/u013142781/9400470

    展开全文
  • 这两天在做微信公众号页面开发,一些小知识点总结一下 手机浏览器定位不准,使用百度地图API定位也不是很准确。可以使用微信定位wx.geolocation()。其实就是微信内置浏览器对定位的支持。 微信开发者工具可以用做在...
  • 今天整理一下微信开发展示当前位置的相关内容。 开发环境参考:微信开发(一)--分享接口 点击打开链接 一.页面配置: 设置jsp页面显示&lt;div class="weui_cells"&gt; &lt;div ...
  • 微信小程序开发 读写data与vue不同 this.data.dataname//读 this.setData({key:value})//写 页面布局:flex布局 垂直flex-direction: column; 水平flex-direction: row; justify-content、align-items、flex-wrap等...
  • 微信公众号开发教程

    2016-05-08 12:58:50
    微信公众号的开发,说简单也简单,说麻烦也麻烦,麻烦的不是开发过程,而是搭建开发环境的过程。不过俗话说得好,磨刀不误砍柴工,我们有必要花点时间来研究下如何攻破微信公众号的开发环。说白了,公众号的开发就是...
  • 本文转百度知道网友 作为前端工程师,从前端的视角,为大家分析下微信小程序和HTML5与之间的主要区别 第一条是运行环境的不同。...小程序最后的发布上线需要微信审核,微信在不更新自身软件的情况...
  • 1.1微信的现在发展 微信,是一个生活方式。微信是一对一的。微信当前统治了中国移动(微博)市场,拥有8.89亿月活跃用户。微信平台不仅完全改变了中国人在线交流与社交的方式,还改变了他们日常支付和消费的方式。...
  • 业内开发框架层出不穷,wepy,mpvue,taro等等,都在朝着更快,更强大的方向发展,有统一 H5、微信、支付宝、百度和头条小程序的大趋势。 本文旨在以mpvue框架为基础,探讨地图类小程序的开发思路,权当分享和总结。...
  • 开发场景 已知地点的经纬度,期望在打开的地图进行标注位置和进行开车、徒步、公交、骑行等的路线规划! 效果图 实际应用体验 JS Page({ openLocation(){ ...
  • 实例 || 微信小程序-基于百度地图API天气预报 一、简介 这是一款基于百度地图API获取天气信息的天气预报小程序,本篇文章主要介绍整个开发的大概过程。 说明: 这是我第一次开发小程序,用了两三天的时间学习并完成...
  • 微信公众号H5页面开发微信JS-SDK引用 微信提供了微信公众号开发者手册,官方地址:https://mp.weixin.qq.com/ 公众号内许多复杂的业务场景,都是通过网页形式来提供服务,这时需要用到: 微信JS-SDK。以地理位置...
  • 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。 通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、...
  • 微信JS接口 ...微信JS接口 分享到朋友圈 分享给朋友 分享到QQ 拍照或从手机相册中选图 识别音频并...微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。 通过使用微信JS-SDK,网页开
  • 框架提供丰富的微信原生API,可以方便的调起微信提供的能力,如获取用户信息,本地存储,支付功能等。 说明: wx.on 开头的 API 是监听某个事件发生的API接口,接受一个 CALLBACK 函数作为参数。当该事件触发时,...
  • 微信公众号内调用微信支付接口wx.chooseWXPay,需要引用JSSDK,配置config,这个步骤在我的另一篇调用地图接口博客有详细说明,这里就不介绍了,然后微信公众号里还提供了wx.onBridgeReady,这个就不需要配置直接调用...
1 2 3 4 5 ... 20
收藏数 2,501
精华内容 1,000