Salesforce百度地图兴趣点搜索LWC组件

Salesforce是一个知名的企业云平台，用户可以在Salesforce云平台灵活地建立自己的企业系统，而Salesforce Lightning web component (LWC）控件允许开发人员方便地开发自定义组件，和第三方系统集成和改善用户使用体检。百度地图开放平台提供POI兴趣点搜索API，把两者结合起来可以在Salesforce平台上为用户提供地址搜索和验证服务，极大地提高地址输入效率以及数据准确度。

本文演示了如何将百度地图兴趣点搜索以LWC控件的形式提供给Salesforce的用户使用，可以作为在Salesforce平台上调用第三方云服务的参考范例。

1. 以下是需要用到的开发工具和环境：

1. 百度地图开发者帐户http://lbsyun.baidu.com/apiconsole/key#/home
2. Salesforce开发环境Developer Editionhttps://developer.salesforce.com/signup
3. VS.code编辑器https://code.visualstudio.com/download
4. Githttps://git-scm.com/downloads

2. 百度地图应用开发设定     

• 注册/登录百度地图账号 http://lbsyun.baidu.com/apiconsole/key#/home
• 创建百度地图服务端应用，获取应用AK
• 点击打开应用，选取百度地图服务选项
• 请求校检方式设定为：sn校检方式。 获取应用SK。

3. Salesforce Setup配置

• Custom Metadata Types /自定义元数据类型
  • Baidu MapSearch Setting Detail: 保存百度地图应用AK和SK
  • City：保存省市数据
• lwc / Lightning 组件
  • baiduMapPlaceSearch - 前端Lightning web component组件 
    • baiduMapPlaceSearch.html - 用户界面html源文件 
    • baiduMapPlaceSearch.js - JavaScript源文件
    • baiduMapPlaceSearch.js-meta.xml - 配置文件
• Named Credential /命名凭证

  • Baidu_Map_Place_Search_API - 远程系统标注端点API end point 配置

    • https://api.map.baidu.com

• Apex Class / Apex 类

  • BaiduMapPlaceSearchController

    • ​​​​​​​searchPlace - 兴趣点搜索方法

    • getCityOptions - 省市列表方法

    • getMD5Hash - SN生成方法（用于SN验证）

4. 在vs.code里创建Salesforce LWC project

5. 配置及测试

打开Account lightning record page编辑模式，把baiduMapPlaceSearch LWC组件放置在需要的位置上，选择默认国家，默认省市以及勾选显示百度地图链接选项。然后保存改动。

 打开或者创建一条Account记录，在BaiduMapPlaceSearch LWC里选择省市，在名字一栏里输入想要搜索的POI兴趣点内容，比如商场餐馆酒店学校名字，然后按回车键，搜索结果就会显示出来，点击选择其中一个结果，选中的名字地址邮编电话就会被复制到相应的字段里去。

百度地图搜索演示视频，点击观看：

6. 源代码

完整源代码可从Github上获取，欢迎意见及回馈。

GitHub 源代码