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.com/map/
默认自动定位到成都:
最后调用 如何将SAP UI5应用嵌入到微信公众号菜单中 提到的微信公众号菜单创建API,将下列JSON负载传入API,即可将云平台上的地图搜索网页应用同新建的微信公众号菜单绑定在一起。
本系列最后两篇文章,也是最有用的两个场景,即:
(1) 如何将微信用户发送给微信公众号的内容自动转存到SAP C4C系统
(2) 如何在SAP C4C系统内直接回复消息到用户的微信app上
敬请期待。
系列目录
(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系统直接回复消息给微信公众号的订阅者
更多Jerry的原创文章,尽在:“汪子熙”:
SAP系统和微信集成的系列教程之八:100行代码在微信公众号里集成地图搜索功能相关推荐
- SAP系统和微信集成的系列教程之七:使用Redis存储微信用户和公众号的对话记录
这是Jerry 2020年的第88篇文章,也是汪子熙公众号总共第269篇原创文章. 本系列的英文版Jerry写作于2017年,这个教程总共包含十篇文章,发表在SAP社区上. 系列目录 (1) 微信开发 ...
- 精简教程版 | 100行代码入手天池CV赛事
来源:Datawhale 本文长度为7200字,建议阅读10分钟 本文从数据分析和解题思路分析两方面对阿里赛题进行了详细解读. 本文针对阿里天池<零基础入门CV赛事-街景字符编码识别>,给 ...
- pythonista检测内容自动点击_Pythonista中文教程:100行代码实现一款远程键盘
前言 最近在逛AppStore的时候看到了一个挺有意思的app叫"远程输入法",意在使用电脑上使用键盘给iOS设备进行远程输入.出于好奇就买下来玩了玩,功能确实不错,但是总觉得少了 ...
- SAP系统和微信集成的系列教程之九:如何将微信用户发送给微信公众号的内容自动转存到SAP C4C系统
本系列的英文版Jerry写作于2017年,这个教程总共包含十篇文章,发表在SAP社区上. 最近有不少朋友在微信上向我咨询SAP系统和微信公众号集成的问题,因此我把当时写的英文版翻译成中文,重新发布在我 ...
- 微信公众号支付php demo,200行代码实现微信支付-公众号支付,不再踩坑,附:demo...
开发微信支付需要认证服务号并且已经开通微信支付,获得微信支付商ID,设置apikey了的. 官方给了公众号支付的php源码SDK 但是这个SDK文件非常多,源码乱七八糟的,真的一开始接触的人拿着官方的 ...
- SAP系统和微信集成的系列教程之四:如何将SAP C4C主数据变化推送给微信公众号的关注者
这是Jerry 2020年的第85篇文章,也是汪子熙公众号总共第267篇原创文章. 本系列的英文版Jerry写作于2017年,这个教程总共包含十篇文章,发表在SAP社区上. 系列目录 (1) 微信开发 ...
- SAP系统和微信集成的系列教程之三:微信用户关注公众号之后,自动在SAP C4C系统创建客户主数据
这是Jerry 2020年的第84篇文章,也是汪子熙公众号总共第266篇原创文章. 本系列的英文版Jerry写作于2017年,这个教程总共包含十篇文章,发表在SAP社区上. 系列目录 (1) 微信开发 ...
- 公众号向特定用户主动推送消息_SAP系统和微信集成的系列教程之三:微信用户关注公众号之后,自动在SAP C4C系统创建客户主数据...
这是Jerry 2020年的第84篇文章,也是汪子熙公众号总共第266篇原创文章. 本系列的英文版Jerry写作于2017年,这个教程总共包含十篇文章,发表在SAP社区上: https://blogs ...
- SAP系统和微信集成的系列教程之二:如何通过微信公众号消费API
本系列的英文版Jerry写作于2017年,这个教程总共包含十篇文章,发表在SAP社区上. 系列目录 (1) 微信开发环境的搭建 (2) 如何通过微信公众号消费API(本文) (3) 微信用户关注公众号 ...
最新文章
- Qt 不再使用 LGPLv2.1 授权
- golang中的web服务平滑重启
- 20 个最常用的 Git 命令用法说明及示例
- ZRender实现粒子网格动画实战
- r语言将百分数化为小数_「淮南师出」教师资格/招聘小学数学:《百分数与小数的互化》...
- python常用连接字符串
- java properties $_Java读取Properties文件的六种方法
- 梯度消失和梯度爆炸_梯度消失和梯度爆炸详解
- screen命令详解
- lua : require' stn'
- 安卓饼状图设置软件_Android自定义控件实现饼状图
- poster模板_高分北斗大赛报名进行中,ppt、poster展示模板推送
- eclipse svn插件离线安装
- 如何提高测试团队效率?
- Linux—生成随机密码
- XSS笔记-来源于个人思路构造以及网络分享
- javaweb后台区分手机或是电脑登录
- 2020云米5G战略新品发布,超越时代探索“互联未来•互动家”
- 最新版Ubuntu 18.04将语言改为中文(简体)
- linux telnet成功显示什么_一文带你彻底理解 Linux 的各种终端类型及概念
热门文章
- 2016-12-31:最后一天:回顾
- Linux下套接字详解(补充)--OSI七层与TCP/IP五层网络架构详解
- C++关键字(1)——const
- 比较第一与第二个字符串,是否有连续的5个字符相同.sql
- js中关于array的slice和sort方法(转自JavaEye)
- asp.net ajax1.0基础回顾(六):调用ASPX页面方法
- 【转】datagridview的checkbox列,当修改checkbox状态时实时获得其准确状态值
- Nginx 完整安装篇
- Android之项目推荐使用的第三方库
- 解决Mono for android的xml编辑器无法代码完成的问题