當前位置：首頁 > 运维知识 > windows >内容正文

windows

SAP系统和微信集成的系列教程之八：100行代码在微信公众号里集成地图搜索功能

發布時間：2023/12/19 windows 37 豆豆

生活随笔收集整理的這篇文章主要介紹了 SAP系统和微信集成的系列教程之八：100行代码在微信公众号里集成地图搜索功能小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

本系列的英文版Jerry寫作于2017年，這個教程總共包含十篇文章，發表在SAP社區上。

系列目錄

(1)?微信開發環境的搭建

(2)?如何通過微信公眾號消費API

(3)?微信用戶關注公眾號之后，自動在SAP C4C系統創建客戶主數據

(4)?如何將SAP C4C主數據變化推送給微信公眾號

(5)?如何將SAP UI5應用嵌入到微信公眾號菜單中

(6)?如何通過OAuth2獲取微信用戶信息并顯示在SAP UI5應用中

(7)?使用Redis存儲微信用戶和公眾號的對話記錄

(8) 微信公眾號的地圖集成：100行代碼在微信公眾號里集成地圖搜索功能( 本文 )

(9) 如何將微信用戶發送到微信公眾號的消息保存到SAP C4C系統

(10) 如何在SAP C4C系統直接回復消息給微信公眾號的訂閱者

最近有不少朋友在微信上向我咨詢SAP系統和微信公眾號集成的問題，因此我把當時寫的英文版翻譯成中文，重新發布在我的公眾號上。

需要注意的是，時隔三年，微信公眾號的開發流程可能有所變化，請大家自行鑒別。和微信公眾號集成的系統，我三年前選擇的是SAP Cloud for Customer.

Jerry之前在SAP成都研究院數字創新空間工作時，經常需要做一些在微信app里展示的原型，而微信里直接進行地圖搜索，已經是國內客戶公認的一個最基本的需求了。

Jerry當時工作中需要給某個微信公眾號增添一個新的菜單，用戶點擊之后，需要在微信app內嵌的瀏覽器里，使用地圖搜索功能。我當時在網上找了很多例子，都是基于前端框架比如jQuery，Bootstrap，Vue來開發的。我覺得對于實現我那個簡單的地圖搜索需求來說，這些前端框架太重了，因此自己花了一點時間，把網上找到的一個例子的地圖搜索功能，從其前端實現框架中剝離出來，之后這個例子無需任何前端框架即可運行。

這個地圖搜索的功能使用起來很簡單，在微信公眾號里通過菜單打開我剝離之后，純HTML/JavaScript實現的百度地圖的搜索界面后，在input字段里輸入地址，然后點Search按鈕，即可自動定位到目的地址。

地圖的放大和縮小，地圖類型的切換都是百度地圖庫本身提供的，開發人員無需任何額外的編程工作。

完整代碼在我的Github上。

下面是部分代碼說明。

這個微信公眾號地圖集成的思路還是和如何將SAP UI5應用嵌入到微信公眾號菜單中提到的一樣，即先在本地開發一個能提供地圖搜索的網頁應用，測試通過后將其部署到云平臺，將部署到云平臺后生成的url綁定到微信公眾號菜單即可。

我的這個地圖搜索網頁應用只需要實現唯一的一個index.html，源代碼剛好100行：

可以復制粘貼的代碼地址如下。

網頁加載時，onload hook觸發函數findDefaultLocation, 將默認地址，成都，定位并顯示在地圖上。

新建一個文件夾map，將index.html放至其內，用url /map映射到map文件夾：

這樣我們在瀏覽器地址欄里添加/map的片段，就能通過nodejs express庫，訪問到map文件夾下的index.html網頁了。該nodejs應用部署到云平臺后的訪問效果如下：

瀏覽器輸入https://wechatjerry.herokuapp.com/map/

默認自動定位到成都：

最后調用如何將SAP UI5應用嵌入到微信公眾號菜單中提到的微信公眾號菜單創建API，將下列JSON負載傳入API，即可將云平臺上的地圖搜索網頁應用同新建的微信公眾號菜單綁定在一起。

本系列最后兩篇文章，也是最有用的兩個場景，即：

(1) 如何將微信用戶發送給微信公眾號的內容自動轉存到SAP C4C系統
(2) 如何在SAP C4C系統內直接回復消息到用戶的微信app上

敬請期待。