今
2020-03-06 星期五
根据考勤制度，严禁员工代打卡，一经发现严肃处理
上班签到
android 嵌套h5百度地图实现打卡功能
本文共 7333 字，大约阅读时间需要 24 分钟。
简介
项目过程中因需要做一个类似打卡的应用，先将之前写过的demo跟大家一起分享一下，主要是介绍如何使用android的webview嵌套H5实现简单的定位功能，H5页面设计html 以及javascript,jQuery的一些知识。
效果图：
demo用到百度地图，由于h5定位很不准，因此需要引入Android百度地图开发包，辅助H5定位将会更加准确。
百度地图定位引入
Android Studio配置
第一步，打开/创建一个Android工程
第二步，下载百度地图定位开发包，下载地址:
可以根据自己的需要下载相应的开发包。
下载下来的文件目录如下图：
第三步，将下载的文件加入到Android项目libs文件夹下，
第四步，配置build.gradle文件
配置build.gradle文件，注意设置sourceSets。
sourceSets{ main{ jniLibs.srcDir 'libs' jni.srcDirs = [] //disable automatic ndk-build }} 
第五步，添加AK
开发者在使用SDK前，需完成AK申请，并在AndroidManifest.xml文件中，正确填写AK。
在Application标签中增加如下代码：
如下图：
第六步，添加权限
使用定位SDK，需在AndroidManifest.xml文件中Application标签中声明service组件，每个App拥有自己单独的定位service，代码如下：
除添加service组件外，使用定位SDK还需添加如下权限：
至此我们基本已经完成了百度地图的引入，但是还需要去申请API_KEY。
第七步，API_KEY申请，
如何申请API_KEY申请，大家可以去百度官网进行申请，地址：
功能实现
地图定位的逻辑主要写在h5页面，如下文件
// location.html
浏览器定位
//Android 代码
package com.example.abc.locationdemo;import android.graphics.Bitmap;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.util.Log;import android.view.View;import android.view.Window;import android.webkit.GeolocationPermissions;import android.webkit.JavascriptInterface;import android.webkit.JsResult;import android.webkit.WebChromeClient;import android.webkit.WebSettings;import android.webkit.WebView;import android.webkit.WebViewClient;import android.widget.Toast;import com.baidu.location.LocationClient;public class MainActivity extends AppCompatActivity implements View.OnClickListener { private static final String TAG=MainActivity.class.getSimpleName(); private WebView webView; private LocationClient mLocationClient; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); getSupportActionBar().hide(); webView=findViewById(R.id.weview); WebSettings webSettings = webView.getSettings(); mLocationClient=new LocationClient(getApplicationContext()); //如果访问的页面中要与Javascript交互，则webview必须设置支持Javascript webSettings.setJavaScriptEnabled(true); //设置自适应屏幕，两者合用 webSettings.setUseWideViewPort(true); //将图片调整到适合webview的大小 webSettings.setLoadWithOverviewMode(true); // 缩放至屏幕的大小 //缩放操作 webSettings.setSupportZoom(true); //支持缩放，默认为true。是下面那个的前提。 webSettings.setBuiltInZoomControls(true); //设置内置的缩放控件。若为false，则该WebView不可缩放 webSettings.setDisplayZoomControls(false); //隐藏原生的缩放控件 //其他细节操作 webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); //关闭webview中缓存 webSettings.setAllowFileAccess(true); //设置可以访问文件 webSettings.setJavaScriptCanOpenWindowsAutomatically(true); //支持通过JS打开新窗口 webSettings.setLoadsImagesAutomatically(true); //支持自动加载图片 webSettings.setDefaultTextEncodingName("utf-8");//设置编码格式 webView.addJavascriptInterface(this, "android"); webView.setWebViewClient(new WebViewClient() { public void onPageFinished(WebView view, String url) { super.onPageFinished(view, url); } public void onPageStarted(WebView view, String url, Bitmap favicon) { super.onPageStarted(view, url, favicon); } });// webView.setWebChromeClient(new WebChromeClient() {// // 处理javascript中的alert// public boolean onJsAlert(WebView view, String url, String message,// final JsResult result) {// return true;// }// // 处理javascript中的confirm// public boolean onJsConfirm(WebView view, String url,// String message, final JsResult result) {// return true;// }// // 处理定位权限请求// @Override// public void onGeolocationPermissionsShowPrompt(String origin,// GeolocationPermissions.Callback callback) {// callback.invoke(origin, true, false);// super.onGeolocationPermissionsShowPrompt(origin, callback);// }// @Override// // 设置网页加载的进度条// public void onProgressChanged(WebView view, int newProgress) { TestJSLocation.this.getWindow().setFeatureInt( Window.FEATURE_PROGRESS, newProgress * 100);// super.onProgressChanged(view, newProgress);// }// // 设置应用程序的标题title// public void onReceivedTitle(WebView view, String title) {// super.onReceivedTitle(view, title);// }// }); mLocationClient.start(); mLocationClient.enableAssistantLocation(webView); webView.loadUrl("file:///android_asset/web/location.html"); findViewById(R.id.tv_reresh).setOnClickListener(this); } @JavascriptInterface public String getEndJson() { String endJson=(String) SPUtils.get(MainActivity.this,Contants.END,""); Log.i(TAG,endJson); return endJson; } @JavascriptInterface public String getStartJson() { String startJson=(String) SPUtils.get(MainActivity.this,Contants.START,""); Log.i(TAG,startJson); return startJson; } public void closeActivity(View view){ finish(); } @JavascriptInterface public void jsCallAndroidSaveStartTime(String start){ Log.i(TAG,"start="+start); SPUtils.put(this,Contants.START,start); ToastUtils.getInstance(this).showShortToast("已签到"); } @JavascriptInterface public void jsCallAndroidSaveEndTime(String end){ Log.i(TAG,"end="+end); SPUtils.put(this,Contants.END,end); ToastUtils.getInstance(this).showShortToast("已签退"); } @JavascriptInterface public void jsCallAndroidReset(){ SPUtils.put(this,Contants.END,""); SPUtils.put(this,Contants.START,""); ToastUtils.getInstance(this).showShortToast("全部清除"); } @JavascriptInterface public void jsCallAndroid(){ ToastUtils.getInstance(this).showShortToast("tiao"); } @Override public void onClick(View v) { switch (v.getId()){ case R.id.tv_reresh: webView.loadUrl("file:///android_asset/web/location.html"); break; } } @Override protected void onDestroy() { super.onDestroy(); mLocationClient.disableAssistantLocation(); }}
转载地址：http://xzhx.baihongyu.com/
你可能感兴趣的文章