uniapp develops a small program to realize attendance check-in, with source code

Renderings:

Three-step attendance check-in:

  • Draw the check-in area on the map:

The uniapp development applet draws graphics on the map and converts the latitude and longitude into a fixed-format string_uniapp draws maps_阿晨12138's Blog-CSDN Blog

  • Get the user location and jump to the current user location:

Using the map to select the location and locate the user's current location in the uniapp development applet

  • Determine whether the user's latitude and longitude is within the latitude and longitude range of the drawing graph: 

With the help of third-party libraries: turf/helpers

turf/helpersis a module in the Turf.js library that provides some helper functions and tools to simplify geospatial analysis and manipulation. Turf.js is a popular JavaScript geospatial analysis library that provides many powerful and easy-to-use functions for working with geographic data. 

First terminal npm installation: turf/helpers, then import and use

<script>
    import {
        point,
        polygon
    } from '@turf/helpers';



    const pointCoordinates = [114.1275xxxx, 22.6070xxx];
    const polygonCoordinates = [
    [114.1251xxx, 22.607911xx1625156],
    [114.1242869xxx5, 22.607174xx4267],
    [114.12552648903466, 22.6057xxx6267],
    [114.1273xx44345, 22.60700xxx4],
    [114.1251063xx85, 22.6079115xx5156]
    ];
    const pt = point(pointCoordinates);
    const poly = polygon([polygonCoordinates]);
    const isInside = booleanPointInPolygon(pt, poly);
    if (isInside) {
        this.result = '这个点在这个范围内';
      } else {
        this.result = '这个点不在在这个范围内';
      }
</script>

extension:

A music prompt will be played when punching in successfully 

const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = true;
innerAudioContext.src = 'https://img.tukuppt.com/newpreview_music/09/04/05/5c8b001d3f57236050.mp3';
innerAudioContext.onPlay(() => {
		console.log('开始播放');
});

Longitude and latitude query:

[Longitude and latitude query] Online map longitude and latitude query | Longitude and latitude place name coordinate conversion

Guess you like

Origin blog.csdn.net/weixin_52479803/article/details/132087522