关于微信:SAP系统和微信集成的系列教程之八100行代码在微信公众号里集成地图搜索功能

本系列的英文版 Jerry 写作于 2017 年，这个教程总共蕴含十篇文章，发表在 SAP 社区上。

系列目录

(1) 微信开发环境的搭建

(2) 如何通过微信公众号生产 API

(3) 微信用户关注公众号之后，主动在 SAP C4C 零碎创立客户主数据

(4) 如何将 SAP C4C 主数据变动推送给微信公众号

(5) 如何将 SAP UI5 利用嵌入到微信公众号菜单中

(6) 如何通过 OAuth2 获取微信用户信息并显示在 SAP UI5 利用中

(7) 应用 Redis 存储微信用户和公众号的对话记录

(8) 微信公众号的地图集成：100 行代码在微信公众号里集成地图搜索性能 (本文)

(9) 如何将微信用户发送到微信公众号的音讯保留到 SAP C4C 零碎

(10) 如何在 SAP C4C 零碎间接回复音讯给微信公众号的订阅者

最近有不少敌人在微信上向我征询 SAP 零碎和微信公众号集成的问题，因而我把过后写的英文版翻译成中文，从新公布在我的公众号上。

须要留神的是，时隔三年，微信公众号的开发流程可能有所变动，请大家自行甄别。和微信公众号集成的零碎，我三年前抉择的是 SAP Cloud for Customer.

Jerry 之前在 SAP 成都研究院数字翻新空间工作时，常常须要做一些在微信 app 里展现的原型，而微信里间接进行地图搜索，曾经是国内客户公认的一个最根本的需要了。

Jerry 过后工作中须要给某个微信公众号削减一个新的菜单，用户点击之后，须要在微信 app 内嵌的浏览器里，应用地图搜索性能。我过后在网上找了很多例子，都是基于前端框架比方 jQuery，Bootstrap，Vue 来开发的。我感觉对于实现我那个简略的地图搜索需要来说，这些前端框架太重了，因而本人花了一点工夫，把网上找到的一个例子的地图搜索性能，从其前端实现框架中剥离进去，之后这个例子无需任何前端框架即可运行。

这个地图搜索的性能应用起来很简略，在微信公众号里通过菜单关上我剥离之后，纯 HTML/JavaScript 实现的百度地图的搜寻界面后，在 input 字段里输出地址，而后点 Search 按钮，即可主动定位到目标地址。

地图的放大和放大，地图类型的切换都是百度地图库自身提供的，开发人员无需任何额定的编程工作。

残缺代码在我的 Github 上。

上面是局部代码阐明。

这个微信公众号地图集成的思路还是和如何将 SAP UI5 利用嵌入到微信公众号菜单中提到的一样，即先在本地开发一个能提供地图搜索的网页利用，测试通过后将其部署到云平台，将部署到云平台后生成的 url 绑定到微信公众号菜单即可。

我的这个地图搜索网页利用只须要实现惟一的一个 index.html，源代码刚好 100 行：

能够复制粘贴的代码地址如下。

网页加载时，onload hook 触发函数 findDefaultLocation, 将默认地址，成都，定位并显示在地图上。

新建一个文件夹 map，将 index.html 放至其内，用 url /map 映射到 map 文件夹：

这样咱们在浏览器地址栏里增加 /map 的片段，就能通过 nodejs express 库，拜访到 map 文件夹下的 index.html 网页了。该 nodejs 利用部署到云平台后的拜访成果如下：

浏览器输出 https://wechatjerry.herokuapp…

默认主动定位到成都：

最初调用如何将 SAP UI5 利用嵌入到微信公众号菜单中提到的微信公众号菜单创立 API，将下列 JSON 负载传入 API，即可将云平台上的地图搜索网页利用同新建的微信公众号菜单绑定在一起。

本系列最初两篇文章，也是最有用的两个场景，即：

(1) 如何将微信用户发送给微信公众号的内容主动转存到 SAP C4C 零碎
(2) 如何在 SAP C4C 零碎内间接回复音讯到用户的微信 app 上

敬请期待。