場景

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

??? <WebViewandroid: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

??????? //獲取webviewWebView 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

??????? //加載本地htmlwebView.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 {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);//獲取webviewWebView webView = findViewById(R.id.webview);//設置為ChromeClinet 才能執行js代碼WebChromeClient webChromeClient = new WebChromeClient();webView.setWebChromeClient(webChromeClient);//設置開啟js支持webView.getSettings().setJavaScriptEnabled(true);// 是否支持縮放webView.getSettings().setSupportZoom(true);//加載本地htmlwebView.loadUrl("file:///android_asset/offLineTileMap.html");} }

運行app查看效果

?

總結

以上是生活随笔為你收集整理的Android中使用WebView加载本地html并支持运行JS代码和支持缩放的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。