微信开发系列之八 - 微信公众号的地图集成
文章系列目录
- 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.
- Hadoop(十七)之MapReduce作业配置与Mapper和Reducer类
- Design Pattern: Observer Pattern
- Hadoop(十六)之使用Combiner优化MapReduce
- ActiveMQ笔记(6):消息延时投递
- CentOS 安装 Maven
- Architecture Pattern: Publish-subscribe Pattern
- OOAD-设计模式(三)之创建型设计模式(5种)
- ActiveMQ笔记(5):JMX监控
- session失效时间设置
- ActiveMQ笔记(4):搭建Broker集群(cluster)
- OOAD-设计模式(二)之GRASP模式与GOF设计模式概述
- 围棋之幸?围棋之悲?史上最年轻“五冠王”柯洁宣布再战AI
- spring 在Thread中注入@Resource失败,总为null的解决方案
- ActiveMQ笔记(3):基于Networks of Brokers的HA方案
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- MySQL INSERT的4种形态
- PowerBI DAX 性能优化 高级视图算法 超越经典 性能提升成千上万倍
- Java开发必备 Git 分支开发:规范指南及完全学会Git的24堂课笔记
- 聊聊dubbo-go的failbackCluster
- 视频综合管理平台EasyNVS通道列表如何获得RTMP地址和RTSP地址?
- 【每周一库】 rust-ftp - an FTP client written in Rust
- Mall 电商实战项目发布重大更新,全面支持SpringBoot 2.3.0 !
- Python与Tableau相结合,万字长文搞定传统线下连锁店数据分析
- 社群答疑精选03:拆分数据到新工作表
- 【Rust日报】2020-08-08:用rust制作的一个Taskwarrior终端用户界面
- 【Rust日报】2020-08-09:1Paasword Linux版本
- 聊聊dubbo-go的failfastCluster
- Caused by: java.lang.ClassNotFoundException: Cannot find class: userMap
- 链路聚合实验
- 聊聊dubbo-go的failsafeCluster