uniAppでAutoNaviを使用する方法

モバイル アプリケーションと測位技術の発展により、地図は私たちの日常生活や仕事に欠かせないツールになりました。中国の主流の地図サービス プロバイダーの 1 つである Amap は、その機能とデータ リソースが開発者に好まれています。では、uniApp で Amap をどのように使用すればよいでしょうか?

1. Amap API キーの申請

Amap を使用する前に、Amap オープン プラットフォームで API キーを申請する必要があります。手順は次のとおりです:

1. AMAP オープン プラットフォームの公式 Web サイト (https://lbs.amap.com/) を開きます。

2. 開発者アカウントに登録してログインします。

3. 管理コンソールからアプリケーションを作成します。

4. アプリケーション管理ページの「基本設定」ページにアクセスし、API キーを申請します。

5. アプリケーションが成功すると、後続の開発のために「アプリケーション管理」ページで生成されたキー値を確認できます。

2. Amap SDK を使用する

uniApp で Amap を使用するには、Amap SDK を使用する必要があります。 uni-app プラットフォームでは、uni-ap で Amap SDK を簡単に使用できる uni-amap というプラグインが提供されています。

1. uni-amap プラグインをインストールします。

HBuilderX で uni-app プロジェクトを開き、メニュー バーで「Plug-in Market」を選択し、検索ボックスに「uni-amap」と入力して検索し、プラグインを選択してインストールします。

2. Gaode Map SDK を導入します。

次のように、Gaode Map SDK を App.vue ファイルに導入します:

<template>
  <uni-amap id="myMap" :longitude="longitude" :latitude="latitude" :markers="markers"></uni-amap>
</template>

<script>
import '@dcloudio/uni-amap'
export default {
  data() {
    return {
      longitude: 116.397390,
      latitude: 39.908860,
      markers: [{
        id: 0,
        longitude: 116.397390,
        latitude: 39.908860,
        title: '东方明珠',
        iconPath: '../../static/marker.png',
        width: 32,
        height: 32,
        zIndex: 999
      }]
    }
  }
}
</script>

このコードでは、uni-amap ラベルを定義します。指定された経度、緯度、マーカー パラメーターを使用して、必要な地図情報を地図上に表示できます。

3. Amap アプリケーション シナリオ

1. 位置決めとナビゲーション

Amap SDK を通じて、ユーザーの位置情報を取得し、さまざまなアプリケーション シナリオをターゲットにナビゲートできます。 uni-app では、uni.getLocation() メソッドを通じてユーザーの位置情報を取得できます。コードは次のとおりです:

uni.getLocation({
  type: 'gcj02',
  success: function (res) {
    console.log('location', res)
  }
})

2. 地図POI検索

Amap SDKを通じて、周囲のPOI(名所)のキーワード検索を実現できます。 uni-appでは、uni.amap.getPoiAround()メソッドを通じて周囲のPOI情報を取得できます。コードは次のとおりです:

uni.amap.getPoiAround({
  iconPath: '../../static/marker.png',
  longitude: 116.397390,
  latitude: 39.908860,
  success: function (res) {
    console.log('search result:', res)
  }
})

4. 軌跡の記録

Amap SDK を使用すると、位置決めされた軌跡を視覚化できます。 uni-app では、uni.amap.showPolyline() メソッドを使用して地図上に軌跡を表示できます。コードは次のとおりです:

var points = [
  {'longitude': 116.397390, 'latitude': 39.908860},
  {'longitude': 116.407390, 'latitude': 39.918860},
  {'longitude': 116.417390, 'latitude': 39.928860},
  {'longitude': 116.427390, 'latitude': 39.938860}
]
uni.amap.showPolyline({
  arrowLine: true,
  points: points,
  color: '#FF00FF',
  width: 10,
  zIndex: 99
})

上記は uni-app で Amap を使用する基本的な方法ですが、もちろん、Amap SDK にはさらに多くの関数と API があり、必要に応じて呼び出すことができます。

以上がuniAppでAutoNaviを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。