Android快速实现地图功能（不只快！并且小！）

时间 2019-11-17

标签 android 快速实现地图功能不只并且栏目 Android 繁體版

原文原文链接

本文为 Marno 原创，转载必须保留出处！

公众号【 aMarno 】，关注后回复 RN 加入交流群

React Native 优秀开源项目大全：www.marno.cn

1、前言

本文旨在提供一个解决思路，不只适用于添加地图这一种场景。还有更多的场景能够用到，好比展现在线 PDF 文档等。javascript

最近都在忙着讨论项目需求，忙着学习 React Native ，时间一久都快忘记我是一个搞 Andorid 开发的了。今天忽然想到了本身在上个项目期间的一个经历。以为可能会对一些人有帮助，因而就写出来和你们分享一下！css

上个项目是一个 O2O 类型的项目，在更新了几个版本以后，老板打算进行推广，进行地铁广告，电梯广告，地推等等。让我把 Apk 大小优化一下，说如今的10M太大了。不利于用户下载。html

2、穷途末路

其实我在写代码的时候已经很克制了。除了一些必备的三方库之外，基本也没有引入什么其余多余的东西。并且我已经作了如下优化工做：java

优化图片大小android

1.使用 tinyPNG 压缩图片大小
2.有些图片换成 webP 格式，如背景图
3.icon 图标仅保留一套，使用时将 ImageView 大小限制死。仅保留极个别不一样分辨率的图标。
4.部分icon 使用 svg 代替，少许web
优化布局api

1.优化层级，减小布局嵌套
2.一个界面一个界面的消除过渡绘制
3.多使用 include 标签，重用布局
4.没必要要的布局使用 ViewStub 延迟加载（用的不多）
5.将可复用资源抽取到对应的 res 文件中，如字符串，样式等微信
优化代码ide

1.实体类去除没用到属性，并将属性设为 public ，去除 get / set 方法
2.减小内部嵌套的实体类，尤为像 GsonFormat 这样的工具生成的实体类
3.能服用的尽可能复用。
4.还剔除了一部分我本身经常使用的打包好的工具类中一些没调到的方法。
5.不过，仅是减小几行代码，对 Apk 体积的优化成效甚微。svg
优化三方库的使用

1.Glide 仍是 Picaso 纠结了好一阵子。Picaso 要小不少
2.推送，统计，三方登陆，微信支付，地图，这个无法删。可是优化了一下 so 适配CPU的数量。

通过了这些工做后（可能有遗漏，时间过久记不太清了），老板还让我优化 Apk 大小，我就实在是想不到其余办法了。并且我把网上能搜到的关于 Apk 优化的文章基本都看了，只要是能用的都会去试一下。但除了图片之外的优化都收效甚微。

3、灵光一闪

我把 Apk 传到 nimbledroid.com 上进行了分析，发现其中最占体积的就是【百度地图】了，足足占了 6M 多。可是咱们做为 O2O 产品怎么可能没有地图呢？这是产品经理也不会赞成的啊。因而我苦思冥想，采起了曲线救国的方式，干掉了百度地图，最终将那个版本的推广 Apk 包减少至仅有 3.34M。（因为已经离职，下图就不显示App名称了，除非有广告费，哈哈哈~）

思路很简单，就是用 JS 的地图替换了原生的地图。由于我分析了一下地图在这个 App 的功能占比，其实算是一个比较弱的功能，用户要想看到地图页面，必须经历如下的流程。

如上图所示，这个页面的层级比较深，并且根据前面几个版本的页面统计数据来看，确实不多有用户点到这个界面来。可是又不能没有这个功能，因此最终采起了这样折中的办法。性能怎么样呢？再来个图给你们看下吧。

我以为性能仍是能够接受的，虽然不如原生加载的快，可是我很满意了，由于我把安装包缩小了（用到的导航功能是跳转外部地图）终于能够交差了，并且产品经理和老板都没有看出和以前地图的差异来，只是以为这个小伙子还挺屌的，真的给搞到只剩下3M了（嘿嘿~）。

4、代码实现

相比集成原生地图，集成 JS 地图简直就是不能再更简单了！！ 不用下载烦人的 jar 包，不用考虑 so 文件的兼容。并且我以为 JS 地图只有性能上不如原生，在功能上貌似还要更丰富一点。固然这里只是用于简单的地图展现和添加一个 Marker，更多功能能够自行探索。

可是最开始集成的时候我仍是遇到了坑，刚开始使用的是百度的 JS 地图，可是发如今经过 Native 代码调用 JS 代码设置 Marker 的时候，百度总设置失败。网上查了好久，总以为步骤方法都没有错，可是就是不行，正当我打算放弃这个念头的时候，想起来不是还有高德地图的么，因而试了一下果真就好了。

先大概说一下步骤：

到开发者平台申请 JS 地图的秘钥

在 assets 目录下建立一个离线的 html 页面

在 WebView 中加载该离线页面

经过 Native 调用 JS 方法，在地图上添加 Marker 图标

第一步就不用我说了吧，直接从第二步开始吧。【2】在 assets 目录下建立一个离线地图 html 网页【amap.html】，代码以下↓↓↓，注意看注释！！这里可能须要咱们会一点 HTML 和 JS 的知识。速成就行了，只要明白一个 html 页面是如何搭建起来的就行。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>基本地图展现</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>

    <style type="text/css"> html,body{ width:100%; height:100%; } #container{height:600px;} </style>
    <!--<script src="http://cache.amap.com/lbs/static/es5.min.js"></script>-->
    <script src="http://webapi.amap.com/maps?v=1.3&key=这里填写你申请的 key"></script>
    <!--<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>-->
</head>
<body>
<div id="container"></div>

<script> var map = new AMap.Map('container', { resizeEnable: true, zoom:14, center: [104.065794,30.657483] }); //提供JS方法，让webview调用，添加marker function addMarker(lng,lat) { map.setZoomAndCenter(14, [lng, lat]); marker = new AMap.Marker({ //指定 Marker 的样式 icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png", position: [lng, lat] }); marker.setMap(map); } </script>
</body>
</html>复制代码

【3】而后建立一个带 WebView 控件的 Activity 页面，在代码中将该 WebView 的 setJavaScriptEnabled() 方法设置为 true，而后经过 webview 加载 asstes 中编写好的离线地图 amap.html 文件。

mWebView.loadUrl("file:///android_asset/amap.html");复制代码

【4】最后在 JS 地图上设置 Marker 就行。这里涉及到了 Native 调用 JS 代码，不熟悉的能够搜索一下。

mWebView.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageFinished(WebView view, String url) {
                //调用JS方法，将商家坐标设置到地图上
                mWebView.loadUrl("javascript:addMarker(" + shopLng + "," + shopLat + ")");
            }
        });复制代码

5、结语

这个 App 是一年多之前写的了，由于最近在学习 React Native，就忽然回想起了那次经过 JS 解决问题的经历。因此写出来和你们分享一下。其实还有不少业务能够经过这种思路去解决，可是经过 WebView 调用 JS 代码毕竟仍是存在性能上的局限性，因此才会出现像 RN 这样的技术。恩...看来仍是要早点把 RN 学好才行！哈哈~

看完点个关注呗！我有个 RN 群就缺你这样的人才。早点来吧~
公众号回复 RN ，就送你入群“邀请码”。你想啥呢？我这是正经邀请码哈！

文章看完了，欢迎关注个人公众号【aMarno】。近期主要分享 React Native 技术！（偶尔也会闲扯淡）