100 行代码在微信公众号里集成地图搜索功能

2022 年 9 月 26 日
四川
本文字数：2557 字
阅读完需：约 8 分钟

最近有不少朋友在微信上向我咨询 SAP 系统和微信公众号集成的问题，因此笔者把之前项目中学习到的集成经验总结成此文，分享给大家。

笔者之前在 SAP 成都研究院数字创新空间工作时，经常需要做一些在微信 app 里展示的原型，而微信里直接进行地图搜索，已经是国内客户公认的一个最基本的需求了。

Jerry 当时工作中需要给某个微信公众号增添一个新的菜单，用户点击之后，需要在微信 app 内嵌的浏览器里，使用地图搜索功能。我当时在网上找了很多例子，都是基于前端框架比如 jQuery，Bootstrap，Vue 来开发的。我觉得对于实现我那个简单的地图搜索需求来说，这些前端框架太重了，因此自己花了一点时间，把网上找到的一个例子的地图搜索功能，从其前端实现框架中剥离出来，之后这个例子无需任何前端框架即可运行。

这个地图搜索的功能使用起来很简单，在微信公众号里通过菜单打开我剥离之后，纯 HTML/JavaScript 实现的百度地图的搜索界面后，在 input 字段里输入地址，然后点 Search 按钮，即可自动定位到目的地址。

地图的放大和缩小，地图类型的切换都是百度地图库本身提供的，开发人员无需任何额外的编程工作。

完整代码在我的Github上。

下面是部分代码说明。

我们利用微信公众号的菜单项，启动一个 SAP UI5 应用，并运行在微信的内嵌浏览器里。

如下图“Jerry List”菜单项所示：

我们提前把 SAP UI5 应用部署在云平台上，得到该应用的 url，然后直接将 url 绑定到 Jerry List这个公众号菜单即可。最后，点击公众号菜单后，这个 SAP UI5 应用在微信浏览器里打开的效果如下：

下面是实现细节。

使用微信开发文档里提到的公众号菜单创建 API，创建一个新的名为 Jerry List 的菜单，url 字段指定成部署到云平台上的 SAP UI5 应用的 url:

url: https://api.weixin.qq.com/cgi-bin/menu/create?access_token=4_otQpSMfcwvmcL-T-DovhnozCAYCpy6wiKU3t4LUeZcQOF_i85a9NbpKpx7seLyEeHlrxl1rtlztL0miJthojqlqHqJArx7sm5OUdnsAupPpUwGr2EWljdJrLlrAVDNcADACKU

Access Token 使用如下的 API 调用，通过 app id 和 app secret 换取：

https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=<your app id>&secret=<your secret>

将 SAP UI5 应用部署到云平台上，得到 url：

http://wechatjerry.herokuapp.com/ui5/

确保该 url 直接在浏览器里访问能够正常工作：

上面这个 UI5 应用的完整源代码，可以在我的Github上找到。

这个 nodejs 应用，调用第 6 行的 app.use 方法，将 webapp 文件夹下的 SAP UI5 应用，通过/ui5 暴露给用户。

下面我们先在本地开发一个能提供地图搜索的网页应用，测试通过后将其部署到云平台，将部署到云平台后生成的 url 绑定到微信公众号菜单即可。

我的这个地图搜索网页应用只需要实现唯一的一个 index.html，源代码刚好 100 行：

完整代码：

<!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>