博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
android 嵌套h5百度地图实现打卡功能
阅读量:261 次
发布时间:2019-03-01

本文共 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/

你可能感兴趣的文章