文章系列目录

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:

The user can type the address manually and press button “Search” to locate the address in the map view.

You can use the control highlighted below to zoom in / out the map or switch the map type.

There 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:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Jerry's map practice</title>
</head><style>body {margin: 10px;color: #4c5667;height: 100%;overflow-x: hidden !important;
}html {overflow-x: hidden;position: relative;min-height: 100%;height: 100%;
}.form-control {width: 90%;height: auto;
}.map {height: 90%;width: 95%;
}</style>
<link href="bmap.css" rel="stylesheet" type="text/css"><body onload = "findDefaultLocation()"><div class = "map" id= "map_addressInfo"></div><label  class="control-label">Type Search Address here</label><div><textarea class="form-control" id = "address" rows="1">成都</textarea></div><button onclick = "search()">Search</button><script src="baidu.js"></script>
<script>var vm = {};
vm.map = new BMap.Map("map_addressInfo");</script><script>function _search(address){var localSearch = new BMap.LocalSearch(vm.map, { renderOptions: { map: vm.map, autoViewport: true} });vm.map.clearOverlays(); localSearch.setSearchCompleteCallback(function (searchResult) {var poi = searchResult.getPoi(0);if(!poi){alert("no address found for Address: " + address);return;}vm.map.centerAndZoom(poi.point, 13);});localSearch.search(address);
}function search(){_search(getUserInput());
}function getUserInput(){return document.getElementById("address").value;
}function findDefaultLocation(){var routePolicy = [BMAP_DRIVING_POLICY_LEAST_TIME,BMAP_DRIVING_POLICY_LEAST_DISTANCE,BMAP_DRIVING_POLICY_AVOID_HIGHWAYS];vm.map.zoomTo(10);vm.map.enableScrollWheelZoom();vm.map.enableKeyboard();vm.map.enableContinuousZoom();vm.map.enableInertialDragging();vm.map.addControl(new BMap.NavigationControl()); vm.map.addControl(new BMap.ScaleControl());      vm.map.addControl(new BMap.OverviewMapControl()); vm.map.addControl(new BMap.MapTypeControl());search();
}</script>
</body>
</html>

I 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().

(3) Add one line below in server.js, to support route based on url /map to the created folder in step one.

Redeploy the whole application to cloud platform.

After that the index.html could be accessed via url in my laptop:

(4) Create a new menu for your Wechat subscription account by calling Restful API with the following payload:

{"button":[{"name":"Web Application","sub_button":[{"type": "view","name": "Map integration","url": "http://wechatjerry.herokuapp.com/map"},{"type": "click","name": "Other UI5 application","key": "dataQuery"}]}]}

Now the whole scenario could be tested from your Wechat application.

要获取更多Jerry的原创文章，请关注公众号"汪子熙":

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

限时团购，6.9折：《微信开发深度解析：公众号、小程序高效开发秘籍》推荐序
全书由目 Senparc.Weixin SDK 作者苏震巍历时 2 年完成,涵盖了开发微信公众号及小程序需要用的的各项后端开发技能.技巧.避坑提示,以及 Senparc.Weixin SDK 微信公众 ...
微信开发系列之一 - 微信公众号开发的开发环境搭建
文章系列目录 Wechat development series 1 – setup your development environment Wechat development series 2 ...
微信开发：申请测试公众号
前言: 咳咳,好久没更新了,我又回来了嘿嘿,进入正题!!!这次准备更新一个微信专栏系列,之前呢,也有零零落落的写过一些关于微信开发相关的事情,这次准备整合一下把目前用到的功能写一个专栏,希望能帮助到你 ...
php公众号获取code,微信开发系列——公众号内嵌H5页面获取code，拿到openID
如果在微信客户端中访问第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,进而实现业务逻辑. 我们要进行授权,先要经过用户授权(静默授权和授权页弹出授权两种,具体看文档中scope解析)拿 ...
C#开发微信门户及应用(27)-公众号模板消息管理
原文:C#开发微信门户及应用(27)-公众号模板消息管理通过模板消息接口,公众号能向关注其账号的用户发送预设模板的消息.模板消息仅用于公众号向用户发送重要的服务通知,只能用于符合其要求的服务场景中, ...
【微信公众号开发】四、公众号按钮设置及自己的微信按钮编辑器
文章详情:[微信公众号开发]四.公众号按钮设置及自己的微信按钮编辑器链接:https://www.microanswer.cn/blog/14
JeeWx捷微2.4.1版本发布，JAVA微信管家平台（支持公众号、企业号）
JeeWx捷微2.4.1版本发布,JAVA微信管家平台(支持公众号.企业号) 1.JEEWX平台介绍 Jeewx是一款开源.敏捷.组件化的微信管家平台,支持微信公众号.微信企业号管理,采用JAVA语 ...
JeeWx捷微 2.4.1版本发布，开源JAVA微信管家平台（支持公众号、企业号）
JeeWx捷微2.4.1版本发布,JAVA微信管家平台(支持公众号.企业号) 1.JEEWX平台介绍 Jeewx是一款开源.敏捷.组件化的微信管家平台,支持微信公众号.微信企业号管理,采用JAVA语 ...
微信查券返利机器人公众号搭建教程分享
微信查券返利机器人公众号搭建教程分享一.登陆淘宝联盟用需要开通淘宝联盟的手机淘宝扫码授权登陆联盟地址:https://www.alimama.com 二.配置推广位,获取PID(推荐使用会员PI ...

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

文章系列目录

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

最新文章

热门文章