手机端定位打卡

最新推荐文章于 2024-10-26 18:13:12 发布

malanjun11

最新推荐文章于 2024-10-26 18:13:12 发布

阅读量263

点赞数

分类专栏： uniapp 文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/malanjun11/article/details/128557371

版权

本文探讨了手机端如何利用GPS技术实现精准定位打卡功能，主要涉及前端开发中的JavaScript和Vue.js框架的应用，阐述了如何集成定位API，实现实时获取用户位置信息并进行打卡操作的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <view>
    <map
      style="width: 100vw; height: 100vh;"
      :latitude="latitude"
      :longitude="longitude"
      :scale="scale"
      :markers="markers"
	  :circles="circles"
    ></map>
	<view class="bottom">
		<view class="btop">
			<view class="lf">{
  {address}}</view>
			<view class="rf">
				<u-icon name="reload" label='刷新' @click="getLocationInfo()" labelPos='bottom' labelColor='blue' color='blue'></u-icon>
			
			</view>
		</view>
		
		<u-button type="primary" @click='dkbtn' text="完成"></u-button>
	</view>
	
  </view>
</template>
import {
		addygkq
	} from "@/utils/kqapi.js"
<script>
import { addygkq } from '../../utils/kqapi';
export default {
  data() {
    return {
      latitude: 39.909, // 默认定在首都
      longitude: 116.39742,
      scale: 16, // 默认16
      markers: [],
	  circles:[],
      markerHeight: 30,
	  address_info :"",
	  address_info_recomd:"",
	  address :""
    };
  },
  methods: {
	  // 获取当前时间
	  getNowTime() {
	      let dateTime;
	      let yy = new Date().getFullYear();
	      let MM