uniappの地理的位置取得機能の使い方-uni-app-php.cn

uniappの地理的位置取得機能の使い方

WBOY

リリース： 2023-07-04 08:58:39

オリジナル

7516 人が閲覧しました

Uniapp は Vue.js をベースにしたクロスプラットフォーム開発フレームワークで、WeChat ミニプログラム、アプリ、H5 ページを同時に開発できます。 uniappでは、地理的位置取得機能を含む、uni-apiを利用してデバイスのさまざまな機能にアクセスできます。この記事では、uniappの地理的位置取得機能の使い方とコード例を紹介します。

まず、uniapp で地理的位置取得機能を使用するには、manifest.json ファイルで許可を申請する必要があります。次のコードをマニフェスト.json ファイルに追加します。

"permission": {
  "scope.userLocation": {
    "desc": "获取地理位置"
  }
}

ログイン後にコピー

次に、地理的位置を取得する必要があるページで、uni-api の getLocation メソッドを使用して取得できます。現在のデバイスの地理、位置情報。次のコードをメソッドに追加します。

methods: {
  getLocation() {
    uni.getLocation({
      type: 'gcj02',  //返回可用于uni.openLocation的经纬度
      success: function(res) {
        console.log(res)
      },
      fail: function(err) {
        console.log(err)
      }
    })
  }
}

ログイン後にコピー

コードでは、uni.getLocation メソッドを使用して地理的位置情報を取得します。返される緯度と経度のタイプは、type パラメーターを使用して指定できます。ここでは「gcj02」に設定されています。これは、uni.openLocation## で使用できる経度と緯度を意味します。 # メソッドが返されます。

成功コールバック関数では、

res パラメーターを通じて、経度 res.longitude と緯度 res.latitude## を含む地理的位置情報を取得できます。＃待って。 fail コールバック関数では、

err

パラメータを通じてエラー情報を取得できます。次に、ページにボタンを追加します。ボタンがクリックされると、

getLocation

メソッドがトリガーされて地理的位置情報を取得します。次のコードをページに追加します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:html;toolbar:false;'><button @click="getLocation">获取地理位置</button></pre><div class="contentsignin">ログイン後にコピー</div></div>ボタンをクリックすると、出力された地理的位置情報がコンソールに表示されます。

さらに、

uni.openLocation

メソッドを使用してマップを開いて、指定された地理的位置情報を表示することもできます。マップを開く必要があるページで、メソッドに次のコードを追加できます。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:javascript;toolbar:false;'>methods: { openLocation() { uni.openLocation({ latitude: 39.9, longitude: 116.4, name: '北京市', address: '中国北京市海淀区' }) } }</pre><div class="contentsignin">ログイン後にコピー</div></div>コードでは、

uni.openLocation

メソッドを使用してマップを開いて表示します。指定された地理的位置。地理的位置の経度と緯度は latitude パラメータと longitude パラメータで指定でき、場所の名前は name パラメータで指定でき、address場所の詳細な住所を指定するパラメータ。ページにボタンを追加します。ボタンをクリックすると、

openLocation

メソッドがトリガーされ、マップが開き、指定された地理的位置情報が表示されます。次のコードをページに追加します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:html;toolbar:false;'><button @click="openLocation">打开地图</button></pre><div class="contentsignin">ログイン後にコピー</div></div>ボタンをクリックすると、マップが開き、指定された地理的位置が表示されることがわかります。 <p>上記の例により、uniapp の位置情報取得機能を簡単に利用することができます。 </p>uni.getLocation<p> メソッドを通じてデバイスの地理的位置情報を取得し、<code>uni.openLocation メソッドを通じてマップを開いて指定された地理的位置を表示できます。これらの機能は、よりインテリジェントでパーソナライズされたアプリケーションを開発するのに役立ちます。この記事での紹介が、uniapp の地理的位置取得機能を皆さんが利用する際の参考になれば幸いです。ご質問がございましたら、お気軽にメッセージを残してください。できる限りお答えいたします。ありがとう！

以上がuniappの地理的位置取得機能の使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。