移动端开发框架mui代码集成百度地图（网页版）实现考勤功能

原创

于 2024-11-16 15:19:00 发布 · 1k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#百度 #javascript #前端

开发工具
HBuilder X 3.8.12.20230817

注意：开发工具尽量用最新的或较新的。太旧的版本在开发调试过程中可能会出现莫名其妙的问题。

产品说明及开发文档
文档 - DCloud问答

说明
项目需要实现考勤功能，于是集成了百度地图以及结合 html5+plus 相关的api 完成此功能。

开发步骤1

查看官方文档 5+App部分，HTML5+ API Reference，找到定位接口相关说明：

注意定位方法还有额外的参数可以进行设置：

通过官方文档，可以看到使用定位功能，调用这个

plus.geolocation.getCurrentPosition(successCB, errorCB, option);

注意需要在 plus 环境中使用：

plus.geolocation.getCurrentPosition(function(p){
		alert('Geolocation\nLatitude:' + p.coords.latitude + '\nLongitude:' + p.coords.longitude + '\nAltitude:' + p.coords.altitude);
	}, function(e){
		alert('Geolocation error: ' + e.message);
	} );

开发步骤2

项目中如何使用

1、项目文件配置

打开项目的配置文件 manifest.json ,找到模块配置项：选择 Geolocation(定位)，

由于项目中计划集成百度地图，所以选择百度地图，并提供相应的 appkey 。当然您页可以使用高的地图或系统定位

看一下系统定位说明：
Geolocation定位 | uni-app官网

使用系统定位的弊端：
调用设备的操作系统提供的定位服务，只支持wgs84坐标系，不同设备对定位功能支持的情况有所差异。

只可以获取经纬度信息，不支持解析地址信息，即无法返回城市街道信息。
由于设备厂商适配的原因，在部分Android设备上定位服务可能不稳定，如需提升定位功能的稳定性建议使用高德定位或腾讯定位

2、页面中使用百度地图
因为是html,所以可以直接在 js 标签中引入即可（传统网页bs端引入方式）

	<head>
		<meta charset="utf-8">
		<title>考勤管理</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=百度地图平台申请的AK"></script>
	</head>

关于百度地图ak申请及使用方式，请参考这篇文章：

百度地图地图API(常用)_百度地图api用到的网址列表-优快云博客
注意：页面中使用bs方式引入的地图ak 跟配置文件中配置百度定位的appkey 不是同一个东西

3、使用定位模块，获取位置信息

注意需要在 plus 环境中使用：

<script>
(function($, doc) { 

    //其他代码
    ......
    ......
     $.plusReady(function() {

         //其他代码
         ......
         ......   
         function getCurrentPosition(){
					plus.geolocation.getCurrentPosition(function(p){
						// console.log("获取用户位置信息：" + JSON.stringify(p));
							// alert('Geolocation\nLatitude:' + p.coords.latitude + '\nLongitude:' + p.coords.longitude + '\nAltitude:' + p.coords.altitude);
					    map.clearOverlays();
						//获取位置成功
						addAddresses = p.addresses;
						addLongitudeLatitude = p.coords.latitude + ',' + p.coords.longitude;
						timestamp = p.timestamp;
						// console.log("gps-timestamp: " + timestamp + " , date-timestamp: " + new Date().getTime());
						document.getElementById("addresses").innerHTML = p.addresses;
						plus.nativeUI.toast("位置已刷新：" + p.addresses);
						var newPoint = new BMap.Point(p.coords.longitude, p.coords.latitude);
						//新建标注
						var mk = new BMap.Marker(newPoint);
						mk.disableDragging(); // 不可拖拽
						map.addOverlay(mk);
						map.centerAndZoom(newPoint, 18);
					}, function(e){
						// alert('Geolocation error: ' + e.message);
						plus.nativeUI.alert("请开启定位权限并设置始终允许！", function(){}, "系统提示", "确定");
					},{enableHighAccuracy: true,provider: 'baidu',coordsType: 'bd09ll', geocode: true} );	
				}   

      })

HTML5+ API Reference 获取定位参数配置

4、项目完整代码

这里有两个页面，一个考勤打卡，一个是考勤历史页面。

考勤打卡页源码：

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>考勤管理</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=LBkkaBHDcIAMRibnSo50spnl"></script>
	<