android 嵌套h5百度地图实现打卡功能
2024-04-24 06:50:37
简介
项目过程中因需要做一个类似打卡的应用，先将之前写过的demo跟大家一起分享一下，主要是介绍如何使用android的webview嵌套H5实现简单的定位功能，H5页面设计html 以及javascript,jQuery的一些知识。
效果图：
demo用到百度地图，由于h5定位很不准，因此需要引入Android百度地图开发包，辅助H5定位将会更加准确。
百度地图定位引入
Android Studio配置
第一步，打开/创建一个Android工程
第二步，下载百度地图定位开发包，下载地址:http://lbsyun.baidu.com/index.php?title=android-locsdk/geosdk-android-download
可以根据自己的需要下载相应的开发包。
下载下来的文件目录如下图：
第三步，将下载的文件加入到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标签中增加如下代码：
<meta-dataandroid:name="com.baidu.lbsapi.API_KEY"android:value="AK" >
</meta-data>如下图：
第六步，添加权限
使用定位SDK，需在AndroidManifest.xml文件中Application标签中声明service组件，每个App拥有自己单独的定位service，代码如下：
<service android:name="com.baidu.location.f" android:enabled="true" android:process=":remote"> </service>除添加service组件外，使用定位SDK还需添加如下权限：
<!-- 这个权限用于进行网络定位-->
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"></uses-permission>
<!-- 这个权限用于访问GPS定位-->
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"></uses-permission>
<!-- 用于访问wifi网络信息，wifi信息会用于进行网络定位-->
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"></uses-permission>
<!-- 获取运营商信息，用于支持提供运营商信息相关的接口-->
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"></uses-permission>
<!-- 这个权限用于获取wifi的获取权限，wifi信息会用来进行网络定位-->
<uses-permission android:name="android.permission.CHANGE_WIFI_STATE"></uses-permission>
<!-- 写入扩展存储，向扩展卡写入数据，用于写入离线定位数据-->
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"></uses-permission>
<!-- 访问网络，网络定位需要上网-->
<uses-permission android:name="android.permission.INTERNET"></uses-permission>至此我们基本已经完成了百度地图的引入，但是还需要去申请API_KEY。
第七步，API_KEY申请，
如何申请API_KEY申请，大家可以去百度官网进行申请，地址：http://lbsyun.baidu.com/index.php?title=jspopularGL/guide/getkey
功能实现
地图定位的逻辑主要写在h5页面，如下文件
// location.html
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><style type="text/css">body, html,#content {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}#header {width: 100%;height: 0%;overflow: hidden;margin:0;font-family:"微软雅黑";}#allmap {width: 100%;height: 45%;overflow: hidden;margin:0;font-family:"微软雅黑";}#footer {width: 100%;height: 48%;overflow: hidden;margin:0;font-family:"微软雅黑";position:relative}#circle {width: 100px; height:100px; background-color:red; border-radius:50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; text-align: center;line-height: 100px; color:#fff; position:absolute; bottom:20px; left:37%;} .left-content { float:left; width: 35px; height:35px; border-radius:50%; border-radius -moz-border-radius: 50%; -webkit-border-radius: 50%;text-align: center; line-height:35px; color:#8e8e92; border: 1px solid#d5d5de; display: inline-block; margin-left: 8px; } .footer-content{ height:50px;position:relative } .footer-title{ position:absolute; bottom:10px; } .right-content{float:right; display: inline-block; margin-left: 8px; } .time-content{font-size: 8px } .right-content-sec{ font-size: 10px; color:#8e8e92; }</style><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script><script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=T3KRCZHtgs8hXLjEp2jDUqldGdMpudj3"></script><title>浏览器定位</title>
</head><body>
<div id="content"><div id="header"></div><div id="allmap"></div><div id="footer"><div class="footer-content"><div class="footer-title"><div class="left-content">今</div><div class="right-content"><div id="currentTime">2020-03-06 星期五</div><div class="right-content-sec">根据考勤制度，严禁员工代打卡，一经发现严肃处理</div></div></div></div><div id="container"><!--<div class="footer-content">--><!--<div class="footer-title">--><!--<div class="left-content time-content">--><!--08:31--><!--</div>--><!--<div class="right-content">--><!--<div>已签到</div>--><!--<div class="right-content-sec">深圳天安云谷1栋A座</div>--><!--</div>--><!--</div>--><!--</div>--><!--<div class="footer-content">--><!--<div class="footer-title">--><!--<div class="left-content time-content">--><!--16:31--><!--</div>--><!--<div class="right-content">--><!--<div>已签到</div>--><!--<div class="right-content-sec">深圳天安云谷1栋A座</div>--><!--</div>--><!--</div>--><!--</div>--></div><div id="circle" onclick="save()">上班签到</div></div>
</div>
</body></html>
<script type="text/javascript">var startJson = ''var endJson = ''var address = '天安云谷1栋A座'// 百度地图API功能var map = new BMap.Map("allmap");var point = new BMap.Point(116.331398, 39.897445);map.centerAndZoom(point, 16);var geolocation = new BMap.Geolocation();// 开启辅助定位geolocation.enableSDKLocation();var gc = new BMap.Geocoder();geolocation.getCurrentPosition(function(r) {if (this.getStatus() == BMAP_STATUS_SUCCESS) {var mk = new BMap.Marker(r.point);mk.setAnimation(BMAP_ANIMATION_BOUNCE);map.addOverlay(mk);map.panTo(r.point);var circle = new BMap.Circle(r.point, 300, {strokeColor: "blue",strokeWeight: 2,strokeOpacity: 0.5}); //创建圆map.addOverlay(circle);gc.getLocation(r.point,function(rs) {var addComp = rs.addressComponents;address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);});} else {alert('failed' + this.getStatus());}},{enableHighAccuracy: true})//关于状态码//BMAP_STATUS_SUCCESS 检索成功。对应数值“0”。//BMAP_STATUS_CITY_LIST 城市列表。对应数值“1”。//BMAP_STATUS_UNKNOWN_LOCATION 位置结果未知。对应数值“2”。//BMAP_STATUS_UNKNOWN_ROUTE 导航结果未知。对应数值“3”。//BMAP_STATUS_INVALID_KEY 非法密钥。对应数值“4”。//BMAP_STATUS_INVALID_REQUEST 非法请求。对应数值“5”。//BMAP_STATUS_PERMISSION_DENIED 没有权限。对应数值“6”。(自 1.1 新增)//BMAP_STATUS_SERVICE_UNAVAILABLE 服务不可用。对应数值“7”。(自 1.1 新增)//BMAP_STATUS_TIMEOUT 超时。对应数值“8”。(自 1.1 新增)//初始化数据var inp = document.getElementById("currentTime");inp.innerHTML = getDateWeek();var start = window.android.getStartJson();var end = window.android.getEndJson();init(start, end);function init(start, end) {var inp = document.getElementById("circle");if (start != '') {startJson = start;var timeStr = JSON.parse(start).time;var addr = JSON.parse(start).address;addMode(timeStr, "已签到", addr);inp.innerHTML = "下班签到";inp.style.background = "red";}if (end != '') {endJson = end;var timeStr = JSON.parse(end).time;var addr = JSON.parse(end).address;addMode(timeStr, "已签退", addr);inp.innerHTML = "已完成";inp.style.background = "black";}}function save() {var addr = address;var time = new Date;var hour = time.getHours(); //获取系统时var minute = time.getMinutes(); //获取系统分var timeStr = hour + ":" + minutevar inp = document.getElementById("circle");if (startJson == '') {var jsonObj = {"time": timeStr,"address": address};var str = JSON.stringify(jsonObj) ;console.log(str);window.android.jsCallAndroidSaveStartTime(str);inp.innerHTML = "下班签到";inp.style.background = "red";startJson = jsonObj;addMode(timeStr, "已签到", addr);return;}if (endJson == '') {var jsonObj = {"time": timeStr,"address": address};var str = JSON.stringify(jsonObj);console.log(str);window.android.jsCallAndroidSaveEndTime(str);inp.innerHTML = "已完成";inp.style.background = "black";endJson = jsonObj;addMode(timeStr, "已签退", addr);return;}window.android.jsCallAndroidReset();startJson = '';endJson = '';inp.innerHTML = "上班签到";inp.style.background = "red";clearMode();}//获取年月日 周时间function getDateWeek() {todayDate = new Date();date = todayDate.getDate();//月month = todayDate.getMonth() + 1;//年year = todayDate.getYear();var dateweek = "";if (navigator.appName == "Netscape") {dateweek = dateweek + (1900 + year) + "-" + month + "-" + date + " ";}if (navigator.appVersion.indexOf("MSIE") != -1) {dateweek = dateweek + year + "-" + month + "-" + date + " ";}switch (todayDate.getDay()) {case 0:dateweek += "星期日";break;case 1:dateweek += "星期一";break;case 2:dateweek += "星期二";break;case 3:dateweek += "星期三";break;case 4:dateweek += "星期四";break;case 5:dateweek += "星期五";break;case 6:dateweek += "星期六";break;}return dateweek;}//使用jquery 添加一个布局到divfunction addMode(timeStr, flag, addr) {var model = '<div class="footer-content">' + '<div class="footer-title">' + ' <div class="left-content time-content">' + timeStr + ' </div>' + ' <div class="right-content">' + ' <div>' + flag + '</div>' + '<div class="right-content-sec" >' + addr + '</div>' + ' </div>' + ' </div>' + '</div>'//选中元素并将构建的布局添加到容器$('#container').append(model)}//清空容器内容function clearMode() {$('#container').empty()}
</script>//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;@Overrideprotected 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必须设置支持JavascriptwebSettings.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);}@JavascriptInterfacepublic String getEndJson() {String endJson=(String) SPUtils.get(MainActivity.this,Contants.END,"");Log.i(TAG,endJson);return endJson;}@JavascriptInterfacepublic String getStartJson() {String startJson=(String) SPUtils.get(MainActivity.this,Contants.START,"");Log.i(TAG,startJson);return startJson;}public void closeActivity(View view){finish();}@JavascriptInterfacepublic void jsCallAndroidSaveStartTime(String start){Log.i(TAG,"start="+start);SPUtils.put(this,Contants.START,start);ToastUtils.getInstance(this).showShortToast("已签到");}@JavascriptInterfacepublic void jsCallAndroidSaveEndTime(String end){Log.i(TAG,"end="+end);SPUtils.put(this,Contants.END,end);ToastUtils.getInstance(this).showShortToast("已签退");}@JavascriptInterfacepublic void jsCallAndroidReset(){SPUtils.put(this,Contants.END,"");SPUtils.put(this,Contants.START,"");ToastUtils.getInstance(this).showShortToast("全部清除");}@JavascriptInterfacepublic void jsCallAndroid(){ToastUtils.getInstance(this).showShortToast("tiao");}@Overridepublic void onClick(View v) {switch (v.getId()){case R.id.tv_reresh:webView.loadUrl("file:///android_asset/web/location.html");break;}}@Overrideprotected void onDestroy() {super.onDestroy();mLocationClient.disableAssistantLocation();}
}
android 嵌套h5百度地图实现打卡功能相关推荐
- Android开发之百度地图定位打卡
Android开发之百度地图定位打卡 一.效果图 二.下载百度地图SDK 三.代码实现 1.布局文件(activity_main) 2.布局文件(activity_map) 3.在res文件夹下新建m ...
- html5实现定位签到,H5+百度地图实现移动端考勤定位打卡
H5+百度地图实现考勤定位打卡 html页面引入百度地图 (记得更改密钥) 确保线上服务为https协议 案例代码 const {BMap,BMAP_STATUS_SUCCESS,BMAP_ANCHO ...
- Android studio显示百度地图及闪退问题的解决
Android studio引入百度地图包括解决真机闪退问题 引入百度地图方法 申请百度地图key 百度地图SDK下载即配置 完整代码及部分解释 MainActivity.java AndroidMa ...
- Android Studio调用百度地图（二）：实现地图显示后台定位和步行导航
先看一下运行效果: 实现功能:后台定位+步行导航(可通过长按屏幕自定义终点,起点为定位点) 后台定位即当程序在后台时依旧执行定位功能,步行导航支持30米-50千米范围内的导航 一 导入SDK并配置相关 ...
- 百度地图行政区优化卡顿问题
百度地图行政区优化卡顿 只筛选一个区域 沿海城市会出现多个区域,比如上海有4个区域,一个是主区域,外加三个岛屿,把三个岛屿排除掉 // 获取行政区的时候有可能会出现多个行政区,只获取最大的行政区域le ...
- Android开发之百度地图定位
Android开发之百度地图定位 一.效果图 二.下载百度地图SDK 1.打开[百度地图](https://lbsyun.baidu.com/index.php?title=%E9%A6%96%E9% ...
- android中使用百度地图绘制弹出框的覆盖物
这几天在项目中引入了百度地图,实现的功能就是类似美团的地图查看周边团购那样的功能,实现的弹出框布局要比美团复杂一些. 下面直接上代码: 通过这个方法在指定的坐标创建一个覆盖物 mBaiduMap.se ...
- BaiduMap---百度地图官方Demo之调用百度地图（介绍如何调启百度地图实现自身业务功能）
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...
- 查找窗口隐藏了怎么办_百度地图这些不为人知的隐藏功能
百度地图这些不为人知的"隐藏功能",我们都知道任何一款软件都有一些我们不仔细去找就发现不了的功能,通常来说这些功能还是非常实用的,这里就来跟大家说一下百度地图里这几个总是被错过的& ...
最新文章
- AI与基因科学的对话：从“人工智能”到“动物智能”
- 特征值与特征向量的几何含义(转)
- 地平线机器人_地平线机器人CEO余凯：基于深度学习的自动驾驶之路
- IP设置应用v1.0
- htmltoExcel
- 【设计模式】【创造型模式】单例模式
- FlashXP加密方式的一种破解方法
- vue入门实例-输入行列，自定义表格
- Unity判断目标在哪个方向
- Excel2021单元格怎么做下拉菜单
- 使用visio来进行画类图
- 如何究竟如何正确注册Apple ID
- Java static与final详细讲解
- 重磅！苹果公司市值首次突破9000亿美元大关
- 红米note5linux刷机包_红米Note5线刷刷机教程_红米Note5官方固件rom原版刷机包
- 阿里大规模涨薪？阿里员工：真香！网友：酸了！知情人：背后另有隐情！
- gRPC 从学习到生产
- loading.io一个loading图标网站，跟大家分享
- 机器人领域主要国际会议与期刊列表
- java自定义注解详解