微信开发系列之八 - 微信公众号的地图集成

简介: 微信开发系列之八 - 微信公众号的地图集成

文章系列目录

Wechat development series 1 – setup your development environment

Wechat development series 2 – development Q&A service using nodejs

Wechat development series 3 – Trigger C4C Account creation in Wechat app

Wechat development series 4 – Send C4C Data change notification to Wechat app

Wechat development series 5 – embedded your UI5 application to Wechat app

Wechat development series 6 – Retrieve Wechat User info via oAuth2 and display it in UI5 application

Wechat development series 7 – use Redis to store Wechat conversation history

Wechat development series 8 – Map integration

Wechat development series 9 – Create C4C Social Media Message and Service within Wechat app

Wechat development series 10 – Use Wechat app to receive Service Request reply made from C4C

In Wechat development series 5 – embedded your UI5 application to Wechat app we have learned the steps how to put a web page into the Wechat app. Use the same approach, we can enable our subscription account with a little bit more feature: the map integration.

When a user has subscribed the test account, the Map integration menu is available:image.pngimage.pngThe user can type the address manually and press button “Search” to locate the address in the map view.image.pngimage.pngYou can use the control highlighted below to zoom in / out the map or switch the map type.

image.pngimage.pngThere are many free map providers available and in this blog I choose a popular provider in China: Baidu map. The same idea could be applied to other map provider as well.

In fact all the map related functionality such as location search, result render and the controls mentioned above are all implemented by map provider, all our needed to develop is just a wrapper html page where we get the search address input by end user, and call the search API, that’s all.

The functionality I show in this blog only needs 100 lines of html code to implement, unbelievable?


(1) Create a folder named “map”, and two files “baidu.js” and “bmap.css” inside it, whose source code could be found from my github.


(2) create an index.html and paste the following source code:image.pngimage.pngimage.pngI didn’t use any frontend framework to make this example simple and easily understood. When the map view is initially rendered, onload function findDefaultLocation() will be fired to locate the hard coded address “成都” in the map. End user can also change this address maintained in textarea and press search button to locate new address, implemented by function search().image.png(3) Add one line below in server.js, to support route based on url /map to the created folder in step one.image.pngRedeploy the whole application to cloud platform.

After that the index.html could be accessed via url in my laptop:image.png4) Create a new menu for your Wechat subscription account by calling Restful API with the following payload:image.pngow the whole scenario could be tested from your Wechat application.


相关文章
|
3月前
|
小程序 PHP
微信公众号开发(一)打通服务器与微信之间的通信
说来惭愧PHP做了这么久,好像就没有从头开发过一个微信公众号,这次刚好有机会从头接入开发一个完整的公众号,也不能说完整,但是这些微信的接口我基本上都试一试~看看大概是什么情况。 首先:打通服务器与微信之间的通信。
38 0
|
3月前
|
前端开发 开发者
【微信公众号对接】有关签名一直报错,提示invalid signature问题(我的签名和使用微信开发者工具验证返回的签名的是一致的)但还是报错!!!
【微信公众号对接】有关签名一直报错,提示invalid signature问题(我的签名和使用微信开发者工具验证返回的签名的是一致的)但还是报错!!!
32 0
|
3月前
|
Java 定位技术 Android开发
【Android App】集成腾讯地图显示位置和地图面板讲解及实战(附源码和演示 超详细必看)
【Android App】集成腾讯地图显示位置和地图面板讲解及实战(附源码和演示 超详细必看)
38 1
|
3月前
|
XML 移动开发 小程序
微信公众号开发(七)微信h5跳转小程序及小游戏示例
最近公司做活动,需要从h5页面跳转至微信小游戏。 当时接到这个需求的时候,就在想,这玩意能相互跳转么? 后来百度了一下,还真行。
74 1
|
3月前
|
小程序 PHP
微信公众号开发(六)微信支付(发红包、企业支付到零钱)需要证书请求示例
这里最主要的就是curlpost请求的时候需要带上证书。否则请求会失败。
37 0
|
3月前
|
JSON 小程序 数据库
微信公众号开发(二)微信公众号的access_token
微信对用户使用开放了很多的功能,如:自定义菜单接口、客服接口、获取用户信息接口、用户分组接口、群发接口,但是为了保证用户访问这些功能相对安全,每次访问都需要带上一个秘钥去验证身份。那么这个秘钥就是access_token。
44 0
|
6月前
|
SQL JavaScript 前端开发
SAP Field Service Management 和微信集成的案例分享和实现介绍
SAP Field Service Management 和微信集成的案例分享和实现介绍
49 0
微信公众号项目调起微信支付等
微信公众号项目调起微信支付等
|
8月前
|
定位技术
街道社区网格化信息管理Echarts集成百度地图bmap样式表冲突导致的无法显示地图的解决方案
街道社区网格化信息管理Echarts集成百度地图bmap样式表冲突导致的无法显示地图的解决方案
92 0
|
8月前
|
JSON Java 数据格式
Java SpringBoot 集成微信公众号
Java SpringBoot 集成微信公众号