微信开发系列之八 - 微信公众号的地图集成
文章系列目录
- 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的原创文章,请关注公众号"汪子熙":
相关文章
- 交通集成 - 交通基础 - 道路管理
- spring boot 集成 redis lettuce(jedis)
- 高可用Hadoop平台-集成Hive HAProxy
- Flutter: SliverAppBar 应用程序栏与滚动视图集成,以便它可以根据滚动偏移量在高度上变化
- Spring Boot 集成配置 HTTPS
- android集成支付宝简介
- Hudi(21):Hudi集成Flink之核心原理分析
- SAP系统和微信集成的系列教程之十:如何在SAP C4C系统里直接回复消息给微信用户
- C4C微信集成 - agent在C4C系统回复,微信用户在微信端直接收到
- SAP Field Service Management 和微信集成的案例分享和实现介绍
- SAP Business ByDesign 和支付宝与钉钉集成的一个原型开发案例
- SAP系统和微信集成的系列教程之一:微信开发环境的搭建
- 【SpringMVC笔记12】SpringMVC集成Thymeleaf模板引擎
- BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第6章节--在SharePoint2013中开发、集成和构建应用程序 总结
- 【Ensemble Learning】第 5 章: 使用集成学习库
- EasyNLP集成K-BERT算法,借助知识图谱实现更优Finetune导读