uniapp は出欠チェックインを実現する小さなプログラムをソースコードで開発します

レンダリング:

3 ステップの出席チェックイン:

  • 地図上にチェックインエリアを描画します。

uniapp 開発アプレットは、地図上にグラフィックを描画し、緯度と経度を固定形式の文字列に変換します_uniapp は地図を描画します_阿晨12138 のブログ-CSDN ブログ

  • ユーザーの位置を取得し、現在のユーザーの位置にジャンプします。

地図を使用して場所を選択し、uniapp 開発アプレットでユーザーの現在位置を特定する

  • ユーザーの緯度と経度が描画グラフの緯度および経度の範囲内にあるかどうかを判断します。 

サードパーティ ライブラリの助けを借りて: turf/helpers

turf/helpersは、地理空間の分析と操作を簡素化するためのいくつかのヘルパー関数とツールを提供する Turf.js ライブラリのモジュールです。Turf.js は、地理データを操作するための強力で使いやすい関数を多数提供する、人気のある JavaScript 地理空間分析ライブラリです。 

最初のターミナル npm インストール: turf/helpers、次にインポートして使用します

<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>

拡大:

パンチインが成功すると音楽プロンプトが再生されます 

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

経度と緯度のクエリ:

【経度緯度照会】オンライン地図経度緯度照会 | 経度緯度地名座標変換

おすすめ

転載: blog.csdn.net/weixin_52479803/article/details/132087522