版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u013373006/article/details/81369460
<!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" />
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script src="../js/vue.js"></script>
<!--<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=3I3etjcXAws3WyIW3dbtCdz50uAtAwWY"></script>
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>-->
<style>
.daka{
width: 120px;height:120px;line-height: 18px;border-radius:120px;
border-width: 5px;
border-color:#ffffff;
margin-left: auto; margin-right: auto;
background-color: #0faeff;
}
.daka p{
font-size: 24px;
color: #ffffff;
}
/*.mui-btn-primary:active {
background-color: #0062cc;
}*/
.zj{
margin-left: auto;
margin-right: auto;
border-radius:20px ;
background-color:#0faeff ;
border-color:#0faeff ;
}
.address{
text-align: center;
line-height: 48px;
height: 48px;
}
.address span{
line-height: 24px;
}
#map{
height:300px;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 id="title" class="mui-title">考勤</h1>
</header>
<div class="mui-content" id="app">
<div class="mui-card-header" style="background-color: #0faeff;color: #ffffff;">
<span style="margin-left: auto; margin-right: auto;">2018-01-01 8:01:02</span>
<button onclick="getUserLocation()">当前位置</button>
</div>
<div id='map'>
</div>
<div class="address">
<input id="address" type="text" />
</div>
<div class="mui-card-header" >
<span >考勤范围 : <span>{{wz_data.name}}</span></span>
</div>
<div v-for="item of time_list">
<div class="mui-card-header" >
<span>{{item.name}}： {{item.stime}}-{{item.etime}}</span>
<span>打卡： --:--:--</span>
</div>
</div>
<div class="mui-card-footer" style="border-width: 0px;">
<a class="mui-btn mui-btn-primary zj">最近打卡时间 <span>8:30</span> <span class="mui-icon mui-icon-arrowright"></span></a>
</div>
<div class="mui-card-footer" style="border-width: 0px;" >
<button class="mui-btn mui-btn-primary daka" @click="daka()"><p>18:00</p><p>打卡</p></button>
</div>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item" >
<button class="mui-tab-label" @click="tap_url()"><span class="mui-icon mui-icon-contact"></span> 我的考勤</button>
</a>
</nav>
</div>
<script type="text/javascript" >
// 扩展API加载完毕后调用onPlusReady回调函数
document.addEventListener('plusready', onPlusReady, false);
var map=null;
var marker=null;
function onPlusReady(){
// 使用百度地图地位模块获取位置信息
//map.centerAndZoom( new plus.maps.Point(point.coords.longitude,point.coords.latitude), 16 );
plus.geolocation.getCurrentPosition(function(p){
//addr_code();
geo_code(p)
// exchange(p);
}, function(e){
switch(e.code) {
case 10:
mui.alert('请开启应用的定位权限', '温馨提示','确定',function(){},'div');
break;
case 9:
//mui.alert('请开启手机定位服务');
mui.alert('请开启手机定位服务', '温馨提示','确定',function(){},'div');
break;
case 2:
if(e.message.indexOf("[geolocation:13]") > -1) {
//如果网络开启，定位失败，提示检查定位权限
mui.alert('请开启应用的定位权限', '温馨提示','确定',function(){},'div');
}
if(e.message.indexOf("[geolocation:14]") > -1) {
//如果应用的权限开了，提示网络异常
mui.alert('请检查网络是否正常', '温馨提示','确定',function(){},'div');
}
break;
case e.PERMISSION_DENIED:
mui.alert('请求定位被拒绝', '温馨提示','确定',function(){},'div');
break;
case e.POSITION_UNAVAILABLE:
mui.alert("位置信息不可用", '温馨提示','确定',function(){},'div');
break;
case e.TIMEOUT:
mui.alert("获取位置信息超时", '温馨提示','确定',function(){},'div');
break;
case e.UNKNOWN_ERROR:
mui.alert("未知错误", '温馨提示','确定',function(){},'div');
break;
}
},{enableHighAccuracy:true,coordsType:'bd09ll',timeout:6000,maximumAge:5000,provider:'baidu'});
}
//位置转化坐标
function addr_code(){
plus.maps.Map.geocode( '绿地蓝海大厦A座', {city:'呼和浩特市',oordsType:'bd09ll',enableHighAccuracy:true}, function(event){
map = new plus.maps.Map("map");
var coord=event.coord;
map.centerAndZoom( new plus.maps.Point(coord.longitude,coord.latitude), 16 )
marker=new plus.maps.Marker(new plus.maps.Point(coord.longitude,coord.latitude));
marker.setIcon("../images/dw.png");
marker.setLabel("我的位置");
var bubble = new plus.maps.Bubble(event.address);
marker.setBubble(bubble);
map.addOverlay(marker);
//alert(JSON.stringify(data))
}, function(e){} );
}
//坐标转化成位置信息
function geo_code(point){
plus.maps.Map.reverseGeocode({longitude:point.coords.longitude,latitude:point.coords.latitude},{coordType:point.coordsType}, function(event){
//alert(JSON.stringify(event))
map = new plus.maps.Map("map");
var coord=event.coord;
map.centerAndZoom( new plus.maps.Point(coord.longitude,coord.latitude), 16 )
marker=new plus.maps.Marker(new plus.maps.Point(coord.longitude,coord.latitude));
marker.setIcon("../images/dw.png");
marker.setLabel("我的位置");
var bubble = new plus.maps.Bubble(event.address);
marker.setBubble(bubble);
map.addOverlay(marker);
}, function(e){
} );
}
function getUserLocation(){
map.getUserLocation( function ( state, point ){
if( 0 == state ){
alert( JSON.stringify(point) );
}else{
alert( "Failed!" );
}
} );
}
</script>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
time_list:'',
wz_data:'',
city:'正在定位中...'
},
created:function(){
this.time_item();
this.getposition();
},
methods:{
tap_url:function(){
mui.openWindow({
url:'work-dcard-my.html',
id:'work-dcard-my.html'
})
},
daka:function(){
callajax('api/dcard/save','post',{},function(data){
mui.alert(data.msg);
});
},
time_item:function(){
var that=this;
app.callajax('api/dcard/index','post',{},function(data){
if(data.code==300){
mui.toast('数据错误');
}else{
that.time_list=data.kqgz;
that.wz_data=data.kqwz;
}
});
},
getposition:function(){
// if (navigator.geolocation)
// {
// navigator.geolocation.getCurrentPosition(this.showP());
// }
// else{x.innerHTML="浏览器不支持定位.";}
},
showP:function(){
// var lat=position.coords.latitude;
// var lng=position.coords.longitude;
////调用地图命名空间中的转换接口 type的可选值为 1:GPS经纬度，2:搜狗经纬度，3:百度经纬度，4:mapbar经纬度，5:google经纬度，6:搜狗墨卡托
// qq.maps.convertor.translate(new qq.maps.LatLng(lat,lng), 1, function(res){
// //取出经纬度并且赋值
// latlng = res[0];
//
// var map = new qq.maps.Map(document.getElementById("m"),{
// center: latlng,
// zoom: 13
// });
// //设置marker标记
// var marker = new qq.maps.Marker({
// map : map,
// position : latlng
// });
// });
}
}
});
</script>
</body>
</html>