zoukankan      html  css  js  c++  java
  • 地图改造总结,支持百度地图、高德地图切换

    地图改造总结

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

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

    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;案例如下图:

     

     

  • 相关阅读:
    HTTP Error 502.5
    ubuntu 换源 aliyun
    vsdbg 下载方法 使用下载工具下载后手动安装
    Asp.NET Core Nginx Ocelot ForwardedHeaders X-Forwarded-For
    ocelot性能测试
    Hyper V 内部网络(NAT)设置 配置固定IP / DHCP
    Powershell ExecutionPolicy 执行策略
    centos ftp服务器搭建 vsftpd 匿名访问配置方法 ftp 550 Failed to open file 错误处理
    powershell与linux bash对比
    virtualbox 配置记录
  • 原文地址:https://www.cnblogs.com/chenhuichao/p/14417143.html
Copyright © 2011-2022 走看看