Android中使用WebView加載本地html並支持運行JS代碼和支持縮放

場景

Openlayers中使用Image的rotation實現車輛定位導航帶轉角(判斷車輛圖片旋轉角度)：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/118635362

在上面實現html中顯示車載導航效果如下

 

 

現在要將其封裝進APP中，打包成車載導航的APP。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

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

 

 

可以直接設計視圖拖拽，或者通過代碼添加，並且設置一個id

    <WebView
        android:id="@+id/webview"
        android:layout_width="409dp"
        android:layout_height="729dp"
        tools:layout_editor_absoluteX="1dp"
        tools:layout_editor_absoluteY="1dp"
        tools:ignore="MissingConstraints" />
</androidx.constraintlayout.widget.ConstraintLayout>

然后在項目目錄下新建assets目錄，將html以及所需要的整個的資源與js文件等都復制到該目錄下

 

 

來到MainActivity中的onCreate方法中，通過id獲取組件，並設置其WebChromeClient

        //獲取webview
        WebView webView = findViewById(R.id.webview);
        //設置為ChromeClinet 才能執行js代碼
        WebChromeClient webChromeClient = new WebChromeClient();
        webView.setWebChromeClient(webChromeClient);

WebViewClient與WebChromeClient

 

 

然后設置開啟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查看效果