Android中使用WebView加载本地html并支持运行JS代码和支持缩放

亦凉 2022-10-19 12:41 184阅读 0赞

# 场景 #

Openlayers中使用Image的rotation实现车辆定位导航带转角(判断车辆图片旋转角度)：

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/118635362][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_118635362]

在上面实现html中显示车载导航效果如下

![20210710170548281.gif][]

现在要将其封装进APP中，打包成车载导航的APP。

注：

博客：  
[https://blog.csdn.net/badao\_liumang\_qizhi][https_blog.csdn.net_badao_liumang_qizhi]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

# 实现 #

首先新建一个Application,然后再布局文件中添加一个webview组件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

可以直接设计视图拖拽，或者通过代码添加，并且设置一个id

然后在项目目录下新建assets目录，将html以及所需要的整个的资源与js文件等都复制到该目录下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1][]

来到MainActivity中的onCreate方法中，通过id获取组件，并设置其WebChromeClient

//获取webview
            WebView webView = findViewById(R.id.webview);
            //设置为ChromeClinet 才能执行js代码
            WebChromeClient webChromeClient = new WebChromeClient();
            webView.setWebChromeClient(webChromeClient);

## WebViewClient与WebChromeClient ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 2][]

然后设置开启js支持和支持缩放

//设置开启js支持
            webView.getSettings().setJavaScriptEnabled(true);
            // 是否支持缩放
            webView.getSettings().setSupportZoom(true);

最后加载本地html

//加载本地html
            webView.loadUrl("file:///android_asset/offLineTileMap.html");

这里的offLineTileMap.html就是上面放在assets下要加载显示的页面。

完整代码

package com.badao.webviewdemo;
    
    import androidx.appcompat.app.AppCompatActivity;
    
    import android.os.Bundle;
    import android.webkit.WebChromeClient;
    import android.webkit.WebView;
    
    public class MainActivity extends AppCompatActivity {
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            //获取webview
            WebView webView = findViewById(R.id.webview);
            //设置为ChromeClinet 才能执行js代码
            WebChromeClient webChromeClient = new WebChromeClient();
            webView.setWebChromeClient(webChromeClient);
            //设置开启js支持
            webView.getSettings().setJavaScriptEnabled(true);
            // 是否支持缩放
            webView.getSettings().setSupportZoom(true);
            //加载本地html
            webView.loadUrl("file:///android_asset/offLineTileMap.html");
        }
    }

运行app查看效果

![20210710170651825.gif][]

[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_118635362]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/118635362
[20210710170548281.gif]: /images/20221005/ef805a2f34584b6eadddc69eebf42d83.png
[https_blog.csdn.net_badao_liumang_qizhi]: https://blog.csdn.net/badao_liumang_qizhi
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: /images/20221005/c3f4c5226e964248854dbf66b35c9179.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1]: /images/20221005/d8916b2e687d4808bdae36f3da629f6f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 2]: /images/20221005/a344d29c80a1423c8464714f4a2ec07d.png
[20210710170651825.gif]: /images/20221005/4c8b9683ef3e4ab49a6dabc04357f8e5.png