目录技术概述技术详述技术使用中遇到的问题和解决过程总结参考文献、参考博客

技术概述

目的：鉴于组员已经在小程序端（Uni-app）写好了地图组件，我就想要拿来给后台的前端复用。

学习该技术的原因：不要重复做轮子（也不算是学习吧，我是靠自己的经验和知识去尝试的）

难点：如何将小程序端（Uni-app）的地图组件与已经写好的前端进行缝合。

技术详述

其实很多时候都会有不同的客户端内嵌网页以达到类似原生app效果（例如隔壁组outfits的社区模块就是安卓客户端内嵌的网页）。

那么能不能倒过来，前端网页做到类似内嵌这些程序的效果，从而达到我在技术概述提到的目的？

就可行性而言，Uni-app本身就能打包成H5网页，因此：

将打包的网页部署去其它结点，利用iframe引入。

把打包的网页塞入Vue框架中的静态资源，然后去调用他。

针对上述情况的网络拓补图

抽离地图组件的详细步骤：

（1）复制原有的小程序项目。

（2）去掉所有页面，只保留地图组件。

（3）删除与小程序授权相关的代码，否则在网页端会出现问题。

（4）修改样式，使其更贴合网页端用户使用习惯。

（5）打包

流程图

成功，见下图：

技术使用中遇到的问题和解决过程

其实在上面技术详述已经很成功了（假如你只需要一些在H5平台上用到的功能），但万万没想到，在小程序中能正常显示的polygons（多边形，用于显示地点区域）居然没有显示出来。

查了一下官方文档，发现打包出来的H5的地图是不支持polygons属性！这波啊，这波是大意了！

解决过程：使用高德地图对小程序地图进行一次复现了，不过幸好：

一些数据处理算法是通用的（比如计算区域堵塞状态从而给于不同的颜色），可以直接复制

后台接口也是通用的，因为后台提供了polygons属性数组，我只需要进行一些处理就可以兼容了，体现了前后端分离的好处。

总结

虽然Uni-app可以编译多个平台的应用，但是要注意不同平台之间的一些功能是否被支持。

要认真看官方文档，收集充分的资料，不然就是在做无用功！

参考文献、参考博客

Uni-app关于map组件的文档

Amap-Vue（第三方Vue-高德地图插件）官方文档