基于高德地图的app开发打包报错

   在公司做了一个关于寻找停车场的app,需要借助高德地图。项目未完成,老板让打个包,看看效果, 一打包瞬间蛋疼了 。报错如下:

[2015-03-02 10:46:25 - MapDemo] Proguard returned with error code 1. See console
[2015-03-02 10:46:25 - MapDemo] Note: there were 172 duplicate class definitions.
[2015-03-02 10:46:25 - MapDemo] Warning: com.amap.api.navi.j: can't find referenced class com.amap.api.navi.model.AMapNaviCamera
[2015-03-02 10:46:25 - MapDemo]       You should check if you need to specify additional program jars.
[2015-03-02 10:46:25 - MapDemo] Warning: there were 1 unresolved references to classes or interfaces.
[2015-03-02 10:46:25 - MapDemo]          You may need to specify additional library jars (using '-libraryjars').
[2015-03-02 10:46:25 - MapDemo] java.io.IOException: Please correct the above warnings first.
[2015-03-02 10:46:25 - MapDemo] 	at proguard.Initializer.execute(Initializer.java:321)
[2015-03-02 10:46:25 - MapDemo] 	at proguard.ProGuard.initialize(ProGuard.java:211)
[2015-03-02 10:46:25 - MapDemo] 	at proguard.ProGuard.execute(ProGuard.java:86)
[2015-03-02 10:46:25 - MapDemo] 	at proguard.ProGuard.main(ProGuard.java:492)

原因分析:

    为了代码的安全 , 我们都会做代码混淆处理 ,而高德自己本身已经做了代码混淆 ,所以高德提供的类会找不到引用,既然高德已经做了代码混淆,我们就不需要再次混淆。

解决方案:

在progurd-protected.txt文件中添加以下代码:


-libraryjars libs/AMap_3DMap_V2.3.1.jar
-libraryjars libs/Android_Navi_V1.1.0.jar
-libraryjars libs/Android_Location_V1.3.0.jar
-libraryjars libs/AMap_Services_v2.3.1.jar


-dontwarn com.amap.api.** 
-dontwarn com.a.a.** 
-dontwarn com.autonavi.** 


-keep class com.amap.api.** {*;} 
-keep class com.autonavi.** {*;}
-keep class com.a.a.** {*;}

再次打包,,,,瞬间解决。


总结:在引入第三方jar包的时候要注意,该包是否已混淆过代码。再比如:百度地图的sdk,支付宝的sdk等,他们都自己已经混淆过代码,不需要我们在此处理了,同样需要在produrd-protected.txt文件中添加不再次混淆的声明。



希望对有同样问题兄弟们能够获得帮助。




### 正确前置引入高德地图API的方法 为了确保 `react-amap` 能够正常工作并避免报错,需要按照特定的方式提前加载高德地图 API。这不仅涉及脚本的正确加载顺序,还涉及到如何处理与页面其他元素的关系。 #### 加载高德地图API 应当通过 `<script>` 标签来动态加载高德地图 JavaScript API 文件,并将其放置于 HTML 文档头部或底部,具体取决于项目结构和个人偏好。重要的是要保证此脚本在 React 组件尝试初始化之前已经完成加载[^1]: ```html <script src="https://webapi.amap.com/maps?v=2.0&key=您的密钥"></script> ``` 对于 Webpack 或者 Create React App 这样的现代构建工具来说,推荐的做法是在入口文件(通常是 public/index.html)中加入上述代码片段,从而使得整个应用程序都可以访问到 AMap 对象。 #### 配置 react-app-rewired 和 customize-cra 插件 如果正在使用 create-react-app 构建项目,则可以通过配置 `react-app-rewired` 及其插件 `customize-cra` 来实现更灵活地控制资源加载过程。这样做的好处是可以保持项目的无 eject 特性的同时自定义 webpack 配置[^2]: 安装依赖包: ```bash npm install --save-dev react-app-rewired customize-cra ``` 修改 package.json 中 scripts 字段下的 start, build 和 test 命令前缀为 react-app-rewired: ```json "scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test" } ``` 创建 config-overrides.js 文件用于重写默认设置,在其中添加如下内容以注入外部 js 文件链接: ```javascript const { override, addWebpackExternals } = require('customize-cra'); module.exports = override( addWebpackExternals({ 'AMap': 'window.AMap', }) ); ``` 这样做可以防止 Webpack 打包过程中重复打包 AMap 库,减少最终产物体积。 #### 外部HTML元素的位置安排 考虑到高德地图可能会影响某些 CSS 属性的表现形式,特别是当涉及到固定定位 (`position:fixed`) 的时候,应该遵循最佳实践将此类元素置于地图容器之外显示,以免受到 transform 属性的影响而导致布局异常[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值