uniapp implémente l'enregistrement de localisation

Avec la popularité de l'Internet mobile, de nombreuses entreprises disposent de leurs propres applications mobiles. L'une des fonctions très pratiques est l'enregistrement de localisation. Grâce à l'enregistrement sur place, les entreprises peuvent gérer les employés, comme les présences, l'attribution des tâches, etc. Cet article explique comment utiliser uniapp pour développer une application mobile pour l'enregistrement de localisation.

1. Préparation

Avant de commencer le développement, vous devez préparer les éléments suivants :

1. Environnement de développement uniapp
2. Outils de développement de mini-programmes
3. Compte développeur Amap

Si vous n'avez pas d'expérience pertinente, vous pouvez apprendre première Connaissance de base des programmes Uniapp et Mini. Ensuite, venons-en au fait.

2. Intégrez Amap

1. Enregistrez un compte développeur Amap

Enregistrez un compte développeur sur la plateforme ouverte Amap et créez une application pour obtenir la clé. La clé est l'authentification de l'identité pour les appels API et peut être utilisée dans les applications.

2. Intégrez le SDK Amap

Introduisez le SDK Amap dans le projet uniapp, la méthode est la suivante :

1) Ouvrez le projet uniapp dans HBuilderX
2) Cliquez avec le bouton droit sur le dossier "uni_modules" et sélectionnez "Installer les dépendances npm " ”
3) Entrez « @jv-uni/amap » dans la zone de recherche, sélectionnez « plug-in de positionnement uni-app amap » et cliquez sur « Installer »

3. Obtenir l'autorisation et le positionnement

Obtenir l'autorisation et le positionnement dans le projet uniapp, les étapes spécifiques sont les suivantes :

1) Utilisez le code suivant pour introduire le plug-in AMAP dans la page

import amap from '@jv-uni/amap';

2) Ajoutez la méthode AMap.plugin au page qui doit être positionnée AMap.plugin方法

mounted() { 
  this.getLocation(); 
},
methods: { 
  getLocation() { 
    AMap.plugin('AMap.Geolocation', () => { 
      let geolocation = new AMap.Geolocation({ 
        enableHighAccuracy: true, 
        timeout: 10000, 
        buttonOffset: new AMap.Pixel(10, 10), 
        zoomToAccuracy: true, 
        buttonPosition: 'RB' 
      }); 
      geolocation.getCurrentPosition((status, result) => { 
        if (status === 'complete') { 
          this.longitude = result.position.lng; 
          this.latitude = result.position.lat; 
          this.address = result.formattedAddress; 
        } else { 
          uni.showToast({ 
            icon: 'none', 
            title: '获取地址失败' 
          }); 
        } 
      }); 
    }); 
  } 
}

通过AMap.plugin方法，我们引入了高德地图定位插件，同时获取了当前设备的经纬度和地址信息。

三、实现签到功能

通过上面的步骤，我们已经可以获取到当前位置信息，接下来就可以根据获取到的位置信息实现签到功能。

1. 保存签到位置信息

在获取到位置信息后，我们需要将这些信息保存到数据库中。可以通过调用uniapp中的数据存储API实现存储功能，具体步骤如下：

uni.setStorageSync('longitude', this.longitude); 
uni.setStorageSync('latitude', this.latitude); 
uni.setStorageSync('address', this.address); 

2. 显示签到状态

待签到位置信息存储成功后，显示签到状态。我们可以在当前页面上设置一个签到按钮，在用户点击该按钮后，显示签到结果。

<button type="default" @click="signIn()">签到</button> 
<view v-if="signInSuccess">签到成功</view> 
<view v-else>未签到</view> 

通过v-if

getNowFormatDate() { 
  let date = new Date(); 
  let seperator1 = "-"; 
  let year = date.getFullYear(); 
  let month = date.getMonth() + 1; 
  let strDate = date.getDate(); 
  if (month >= 1 && month <= 9) { 
    month = "0" + month; 
  } 
  if (strDate >= 0 && strDate <= 9) { 
    strDate = "0" + strDate; 
  } 
  let currentdate = year + seperator1 + month + seperator1 + strDate; 
  return currentdate; 
}

via la méthode AMap.plugin, nous avons introduit le plug-in de positionnement Amap et obtenu les informations de longitude, de latitude et d'adresse de l'appareil actuel.

3. 3. Implémentez la fonction de connexion

Grâce aux étapes ci-dessus, nous pouvons déjà obtenir les informations de localisation actuelles, puis nous pouvons implémenter la fonction de connexion en fonction des informations de localisation obtenues.

Enregistrer les informations de localisation d'enregistrement

Après avoir obtenu les informations de localisation, nous devons enregistrer les informations dans la base de données. La fonction de stockage peut être implémentée en appelant l'API de stockage de données dans uniapp. Les étapes spécifiques sont les suivantes :

signs: { 
  "2021-11-01": [ 
    { 
      longitude: 116.397428, 
      latitude: 39.90923, 
      address: "北京市东城区正义路5号" 
    }, 
    ... 
  ], 
  ... 
} 

Afficher le statut d'enregistrement

Une fois les informations de lieu d'enregistrement stockées avec succès, l'enregistrement est effectué. l'état s'affiche. Nous pouvons définir un bouton d'enregistrement sur la page actuelle, et après que l'utilisateur ait cliqué sur le bouton, les résultats de l'enregistrement seront affichés.

isSigned(signs, signDate, longitude, latitude) { 
  return ( 
    signs.hasOwnProperty(signDate) && 
    Array.isArray(signs[signDate]) && 
    signs[signDate].some(sign => { 
      let distance = AMap.GeometryUtil.distance( 
        [longitude, latitude], 
        [sign.longitude, sign.latitude]
      ); 
      return distance <= 500; 
    }) 
  ); 
}

Utilisez la commande v-if pour réaliser l'effet d'affichage après une connexion réussie.

Règles de connexion

La mise en œuvre de la fonction de connexion doit également prendre en compte les règles de connexion. Les règles d'enregistrement de l'entreprise incluent généralement l'heure d'enregistrement, l'adresse d'enregistrement, etc. Les règles d'enregistrement peuvent être facilement mises en œuvre en suivant les étapes suivantes :

1) Enregistrez l'heure actuelle

Nous pouvons ajouter une méthode pour obtenir l'heure actuelle dans le bouton d'enregistrement.

signIn() { 
  let signDate = this.getNowFormatDate(); 
  let signs = uni.getStorageSync('signs') || {}; 
  if (this.isSigned(signs, signDate, this.longitude, this.latitude)) { 
    this.signInSuccess = true; 
    uni.showToast({ 
      icon: 'none', 
      title: '您已签到' 
    }); 
  } else { 
    this.signInSuccess = false; 
    uni.showToast({ 
      icon: 'none', 
      title: '您未签到' 
    }); 
  } 
  signs[signDate] = signs[signDate] || []; 
  signs[signDate].push({ 
    longitude: this.longitude, 
    latitude: this.latitude, 
    address: this.address 
  }); 
  uni.setStorageSync('signs', signs); 
}

2) Définir les règles d'enregistrement

Les règles d'enregistrement doivent inclure l'heure d'enregistrement, l'adresse d'enregistrement, etc. Nous pouvons définir un objet JSON dans le projet uniapp pour stocker les règles d'enregistrement. 🎜rrreee🎜Parmi eux, "2021-11-01" représente les règles d'enregistrement pour un certain jour, et sa valeur est un tableau. Le tableau stocke la longitude, la latitude, l'adresse et d'autres informations du lieu d'enregistrement sous la forme d'objets JSON. 🎜🎜3) Mettre en œuvre la vérification des règles d'enregistrement 🎜🎜 La vérification des règles d'enregistrement nécessite de comparer l'heure actuelle avec les règles de connexion et de vérifier si l'emplacement actuel est conforme aux règles de connexion. Nous pouvons ajouter la fonction de vérification des règles dans la méthode d'enregistrement. 🎜rrreee🎜Cette fonction doit transmettre les règles d'enregistrement, la date d'enregistrement, l'emplacement actuel et d'autres paramètres. La valeur de retour est de type booléen, indiquant si l'emplacement actuel est dans le champ d'application des règles d'enregistrement. 🎜🎜4) Améliorer la méthode de connexion🎜🎜La méthode de connexion doit terminer la vérification des règles d'enregistrement, afficher l'état de connexion et enregistrer l'enregistrement de connexion et d'autres fonctions. 🎜rrreee🎜Grâce aux étapes ci-dessus, nous pouvons déjà mettre en œuvre une fonction simple d'enregistrement de localisation. Les entreprises peuvent encore améliorer et étendre cette fonction en fonction de leurs propres besoins. 🎜🎜Résumé🎜🎜Cet article explique comment utiliser uniapp pour développer une application mobile d'enregistrement de localisation. En intégrant le SDK Amap et en mettant en œuvre l'autorisation et le positionnement, nous pouvons obtenir les informations de localisation de l'appareil actuel. En enregistrant les informations du lieu d'enregistrement, en mettant en œuvre la vérification des règles d'enregistrement et en améliorant la méthode d'enregistrement, nous pouvons déjà mettre en œuvre une application d'enregistrement de base basée sur la localisation. Au cours du processus pratique, les lecteurs peuvent encore améliorer et étendre cette fonction en fonction de leurs propres besoins pour parvenir à une meilleure gestion d'entreprise. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!