地图改造总结,支持百度地图、高德地图切换

地图改造总结

应用地图兼容百度地图、高德地图改造背景

满足需求所用高德地图更换为百度地图,进而对该应用地图进行开发拓展,以满足不同的地图需求。

2. 地图改造总结

2.1. lib文件夹下创建mapAdapter文件夹,相关文件介绍如下图:

        

2.2. 提取业务代码中使用的地图公共api,进行封装在基类ladapter.ts文件中,如图:

         

2.3. amaplib.ts中继承基类基类ladapter.ts并根据高德地图api以及相关业务需求进行重写或扩展该基类方法,如图:

      

2.4. bmaplib.ts中继承基类基类ladapter.ts并根据百度地图api以及相关业务需求进行重写或扩展该基类方法,如图:

      

2.5. mapAdapter文件index.js中将所用地图api方法进行封装统一输出,并默认加载高德地图api如图:

        

2.6. bankConfig文件platformSupport.ts中可根据需求修改配置加载对应的地图api,配置修改如下图:

         

2.7. 在业务代码中例如setgps.vue考勤地点设置中使用如下图所示:

        

3. 地图扩展补充说明;

在实际银行本地开发中,如有需求更改考勤应用所使用地图,可在bankConfig文件platformSupport.ts中修改bmapFlag值,值为true加载百度地图,值为false默认加载高德地图;

如有需求更改地图相关api,可在bankConfig文件中新建customBmaplib.ts文件,并在platformSupport.ts文件中引入customBmaplib.ts地图api扩展类并修改对应配置代码,该ts文件内容可继承lib/mapAdapter/impl/bmaplib.ts地图api类,进行扩展重写百度地图api方法,以达到满足地图相关业务需求;(高德地图api扩展修改同上);

4. 改造中遇到的问题;

  1. 动态创建script标签加载百度地图后地图加载不成功,地图出不来;

原因:

 

解决方法:在地图加载地址上加入参数&callback=onBMapCallback;

  2.使用百度地图BMap定位点总是显示在左上角,不居中;

原因:由于百度地图加载地图的dom元素上设置了v-show等显示隐藏属性 导致在地图加载后定位点无法居中显示

解决方法:去除百度地图绑定dom元素上v-showv-if等显示隐藏属性如图:

 

  3.Native返回的坐标值显示在地图上,定位不准;

原因:由于native返回的坐标系为谷歌坐标系GCJ-02,而web端百度地图使用坐标系BD09,导致显示定位有几公里偏移;

解决方法:将native端返回的坐标(谷歌坐标系GCJ-02)转换为百度坐标系BD09;案例如下图:

 

 

原文地址:https://www.cnblogs.com/chenhuichao/p/14417143.html