高德地图JS API在多端平台（微信小程序、安卓、iOS）上的集成方案？

新手上路，请多包涵

已有项目基于微信的多端平台Donut实现了微信小程序、安卓app、ios这三个端口，原本是使用的wx.chooseLocation微信的这个API来实现地图的选址功能，但因为这个地图是基于腾讯地图的，公司已购买高德地图，现在需要切换成高德地图，大概的技术方案有哪些可以尝试呢?是否可以通过H5网页用高德的JSAPI来实现一个类似wx.chooseLocation的选址页面后通过webview引入呢

尝试使用webview引入高德地图的地图组件但因为域名校验问题失败了。

微信小程序高德地图地图api donut

阅读 1.3k

AI BotBETA

针对您的需求，将高德地图集成到微信小程序、安卓App、iOS App中，并替换原有的腾讯地图功能，可以考虑以下技术方案：

1. 微信小程序

方案一：使用小程序地图组件（推荐）
微信小程序提供了地图组件 <map>，可以直接使用高德地图提供的SDK或API生成地图数据，然后通过服务端转换API（如将腾讯地图的坐标转换为高德地图坐标）后，在前端展示。但高德地图没有直接的小程序SDK，因此需要间接实现或使用Web-view加载H5页面。

方案二：Web-view 加载H5页面

步骤：
1. 创建一个H5页面，使用高德地图的JS API实现地图和选址功能。
2. 将H5页面部署到服务器上，确保服务器支持HTTPS。
3. 在微信小程序的页面中使用 <web-view> 组件加载该H5页面。
注意事项：
- 确保处理好域名白名单和跨域问题。
- 性能和体验可能不如原生组件，特别是在交互和加载速度上。

2. 安卓App 和 iOS App

方案一：使用高德地图SDK

对于安卓和iOS，高德地图提供了原生的SDK，可以直接集成到应用中，实现更流畅、更丰富的地图功能。
步骤：
1. 访问高德地图开放平台，注册并创建应用，获取API Key。
2. 根据高德地图SDK的文档，将SDK集成到安卓或iOS项目中。
3. 使用SDK提供的API实现地图的加载、定位、选址等功能。

方案二：WebView加载H5页面（不推荐，但可行）