微信js-sdk开发文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

1.页面配置

引用微信js-sdk,  http://res.wx.qq.com/open/js/jweixin-1.2.0.js ，然后通过config接口注入权限验证配置。先在自己的服务器上写个获取数据的接口

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>位置信息</title>

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

    <script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>

</head>

<body>

    <!-- <h1>微信地图</h1> -->

</body>

<script>

    // 获取微信sdkConfig

    function getWxJSSDK() {

        // 拿到当前页面url

        var thisPageUrl = location.href;

        $.ajax({

            url: "/api/h5/getWxJsSdkConfig",

            type: "post",

            dataType: "JSON",

            data: {

                "url": thisPageUrl,

            },

            success: function (result) {

                console.log(result);

                configWeiXin(result.obj);

            },

            error: function (err) {

            }

        });

    }

    function configWeiXin(data) {

        wx.config({

            debug: false, // true开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。

            appId: data.appId,

            timestamp: data.timestamp,

            nonceStr: data.nonceStr,

            signature: data.signature,

            jsApiList: ['openLocation', 'getLocation']

        });

    }

    getWxJSSDK();

    wx.ready(function () {

        wx.openLocation({

            latitude: "<%-lag%>", // 纬度，浮点数，范围为90 ~ -90

            longitude: "<%-lng%>", // 经度，浮点数，范围为180 ~ -180。

            name: "<%-shopName%>", // 位置名

            address: "<%-shopAddress%>", // 地址详情说明

            scale: 15, // 地图缩放级别,整形值,范围从1~28。默认为最大

            infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转

        });

    });

</script>

</html>

2.服务器配置（NodeJs版）

// 引用依赖

const sha1 = require('sha1');

// 接口方法

async getWxJsSdkConfig(ctx) {

  try {

    const createRule = {

      url: { type: 'string', required: true },

    };

    try {

      ctx.validate(createRule, ctx.request.body);

    } catch (e) {

      return ctx.body = packageRes.packageRes(3, "参数错误", "");

    }

    let url1 = ctx.request.body.url

    let jsapi_ticket = '微信 JSAPI_TICKET'

    let appid = '微信APPID'

    let nonce_str = '123456'  // 密钥，字符串任意，可以随机生成

    let timestamp = moment().unix() // 时间戳

    // 将请求以上字符串，先按字典排序，再以'&'拼接，如下：其中j > n > t > u，此处直接手动排序

    let str = 'jsapi_ticket=' + jsapi_ticket + '&noncestr=' + nonce_str + '&timestamp=' + timestamp + '&url=' + url1

    // 用sha1加密

    let signature = sha1(str)

    let data = {

      debug: false,

      appId: appid,

      timestamp: timestamp,

      nonceStr: nonce_str,

      signature: signature,

    }

    return ctx.body = packageRes(0, "", data)

  } catch (error) {

  }

}

微信公众号对接JS-SDK接口 调用微信内置地图的更多相关文章

  1. 公众号第三方平台开发 教程六 代公众号使用JS SDK说明

    公众号第三方平台开发 教程一 创建公众号第三方平台 公众号第三方平台开发 教程二 component_verify_ticket和accessToken的获取 公众号第三方平台开发 教程三 微信公众号 ...

  2. 微信公众号开发C#系列-2、微信公众平台接入指南

    概述 微信公众平台消息接口的工作原理大概可以这样理解:从用户端到公众号端一个流程是这样的,用户发送消息到微信服务器,微信服务器将接收到的消息post到用户接入时填写的url中,在url处理程序中,首先 ...

  3. 微信公众号开发C#系列-12、微信前端开发利器：WeUI

    1.前言 通过前面系列文章的学习与讲解,相信大家已经对微信的开发有了一个全新的认识.后端基本能够基于盛派的第三方sdk搞定大部分事宜,剩下的就是前端了.关于手机端的浏览器的兼容性问题相信一直是开发者们 ...

  4. 微信公众号通过图片选取接口上传到阿里oss

    前言 之前写过一篇微信JS-SDK的使用方法,可进行参考 https://www.cnblogs.com/fozero/p/10256862.html 配置并调用公众号接口权限 1.配置权限微信公众号 ...

  5. 树莓派与微信公众号对接（python）

    一 内网穿透,让外网可以访问树莓派 二 树莓派对接微信 需要安装webpy和python-lxml git clonegit://github.com/webpy/webpy.git ln -s `p ...

  6. js 微信公众号网页用户授权，获取微信code，access_tocken,用户信息

    第一次做微信网页授权,过程有点艰难,主要是不知道redirect_uri的地址要怎么写,刚开始我以为就是授权结束后要跳转到的首页地址,于是写成了uri = 'http://18i194c049.ias ...

  7. 微信公众号支付之坑：调用支付jsapi缺少参数 timeStamp等错误解决方法

    这段时间一直比较忙,一忙起来真感觉自己就只是一台挣钱的机器了(说的好像能挣到多少钱似的,呵呵):这会儿难得有点儿空闲时间,想把前段时间开发微信公众号支付遇到问题及解决方法跟大家分享下,这些“暗坑”能不 ...

  8. 玩玩微信公众号Java版之一：配置微信公众平台服务器信息

    在进行微信公众平台开发前,前先做好准备工作,好了以后,我们可以开始啦!   第一.准备好服务端接口   定义一个http服务接口,主要分为如下几步:   1.创建一个servlet类,用来接收请求: ...

  9. 解决微信公众号授权登录和开放平台微信第三方应用授权登录获取到的用户Openid关联问题

    开发背景: 最近一段时间一直在做关于微信方面的网站应用开发,这段时间也收获的不少关于微信开发方面的开发技能,接触的比较多的主要有微信公众号和微信网站app第三方登录授权,以及微信会员卡,优惠券和扫描二 ...

  10. 微信公众号开发C#系列-1、微信公众平台注册

    微信公众号简介 微信公众号分为服务号.订阅号.企业号,订阅号可以个人申请,服务号和企业号要有企业资质才可以. 我们所说的微信公众号开发主要指的是公众号的账号类型,公众号的账号类型分为订阅号.服务号.企 ...

随机推荐

  1. Queue Pair in RDMA （zz）

    Queue Pair in RDMA 首页分类标签留言关于订阅2018-03-21 | 分类 Network  | 标签 RDMA 一个CA(Channel Adapter)可以包含多个QP,QP相当 ...

  2. RESOURCE SUMMARY

    I dont know where to start so searched the net and get a lot of free videos, my plan is to watch the ...

  3. Python操作Jira

    目录 认证 项目(Project) 问题(Issue) 配置域(Fields) 关注者/评论/附件 创建/分配/转换问题 搜索 Jira提供了完善的RESTful API,如果不想直接请求API接口可 ...

  4. fatal: 'origin' does not appear to be a git repository

    git push时报以下错误: fatal: 'origin' does not appear to be a git repository fatal: Could not read from re ...

  5. java.lang.IllegalStateException: Method get not annotated with HTTP method type (ex. GET, POST)；

    明明指定了请求方法类型还报错: 代码: @RequestMapping(value="/enterprise/detail",method = RequestMethod.POST ...

  6. BZOJ2716天使玩偶

    不会KD-tree怎么办?CQD硬搞. 建立正常的平面直角坐标系,首先我们只考虑在目标点左下角的点对目标点的贡献,由于左下点的横纵坐标都小于目标点,那么曼哈顿距离就可以化简了,绝对值去掉后,得到$x2 ...

  7. Mac之Sublime Text使用Go

    安装Golang build 包 点击 Preferences > Package control 菜单(MAC快捷键 shift + command + p) 在弹出的输入框输入 instal ...

  8. 将Nginx封装为Windows服务并自启动

    需要借助"Windows Service Wrapper"小工具,项目地址: https://github.com/kohsuke/winsw 下载地址:  http://repo ...

  9. 【分类算法】感知机（Perceptron）

    0 - 算法描述 感知机算法是一类二分类算法,其问题描述为,给定一个训练数据集 $$T=\{(x_1,y_1),(x_2,y_2),\cdots,(x_N,y_N)\},$$ 其中$x_i\in \m ...

  10. html js 遮罩层

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...