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

Question

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

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

Answer 1

可以去尝试楼上说的高德小程序插件,

大部分小程序插件,非涉及微信原生功能,如直播,视频号,发卡券,学生认证的小程序插件其实都能在多端里用

反正尝试小程序插件的试错成本也不大,试错成功的话,可以省两端的原生开发

如果确定高德小程序插件在多端用不了的话,
这时候需要安卓和ios的原生开发能力了,
直接让原生开发写一个插件,
在插件里显示你的高德地图

Answer 2

高德本身提供小程序插件了：

https://lbs.amap.com/api/wx/summary

但应该是不支持多端的，只能在小程序上用。App 端的话你可能得想其他办法。

Answer 3

针对您的需求，将高德地图集成到微信小程序、安卓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页面（不推荐，但可行）

• 与微信小程序类似，但需要注意原生应用中对WebView的管理和性能优化。

3. 跨平台解决方案

如果项目需要同时维护多个平台，并希望代码复用，可以考虑使用跨平台框架（如Flutter、React Native等），这些框架支持调用原生模块（如高德地图SDK），并能在不同平台上实现较为一致的用户体验。

总结

推荐在微信小程序中使用小程序的<map>组件结合服务端坐标转换，或在App中使用高德地图的原生SDK。对于需要快速实现且跨平台的情况，可以考虑WebView加载H5页面，但需注意性能和体验上的折衷。最终选择哪种方案，还需根据项目的具体需求、开发资源和技术栈来决定。