UniApp は、地図の測位とナビゲーションの統合と使用スキルを実現します

UniApp は、Vue.js に基づいて開発されたクロスプラットフォーム フレームワークで、H5、ミニ プログラム、アプリ、クイック アプリケーションなどを含む複数の端末を同時に開発するという目標を達成できます。実際の開発プロセスでは、地図の位置決めやナビゲーション機能が必要になることがよくありますが、では、地図の位置決めやナビゲーション機能を UniApp に統合して使用するにはどうすればよいでしょうか?この記事では、コード例を使用して、UniApp での地図の位置決めとナビゲーションの統合と使用スキルを詳しく紹介します。

まず、UniApp のmanifest.json ファイルで関連する権限と Baidu Map SDK の AppKey を設定する必要があります。 manifest.json ファイルを開き、「mp-weixin」の下の「permission」フィールドを見つけて、次の権限を追加します。

{
  "name": "scope.userLocation",
  "desc": "地理位置",
},
{
  "name": "scope.record",
  "desc": "录音功能"
}

「mp-weixin」の下に「appid」フィールドを追加し、開いているフィールドに入力します。百度地図上 プラットフォームによって適用される AppKey は次のとおりです:

{
  "name": "appid",
  "value": "your_appKey"
}

次に、地図の位置およびナビゲーション機能を実装するために、uni-app プラグインをインストールする必要があります。プロジェクトのルート ディレクトリでターミナルを開き、次のコマンドを実行してプラグインをインストールします。

npm install @dcloudio/uni-plugin-baidu-map --save

インストールが完了したら、ページでプラグインの使用を構成する必要があります。プロジェクトのjsonファイル。 「pages」フィールドでページを見つけて、次のコードを追加します。

{
  "path": "pages/map/map",
  "style": {
    "navigationBarTitleText": "地图"
  }
}

これでプラグインの構成は完了です。

次に、指定したページでの地図の位置決めとナビゲーションを開発できます。対応するページの vue ファイルに、次のコードを追加します。

<template>
  <view>
    <button @tap="getLocation">点击获取位置</button>
    <button @tap="startNavigation">点击开始导航</button>
    <button @tap="showNavigation">显示导航按钮</button>
    <view class="map"></view>
  </view>
</template>

<script>
  import { openLocation, getLocation, navigateTo, showNavigationBarLoading } from '@dcloudio/uni-api'

  export default {
    data() {
      return {
        latitude: '',
        longitude: '',
        markers: [],
      }
    },
    methods: {
      getLocation() {
        getLocation({
          success: (res) => {
            this.latitude = res.latitude
            this.longitude = res.longitude
            this.markers = [{
              id: 0,
              latitude: res.latitude,
              longitude: res.longitude,
              title: '当前位置',
            }]
          },
          fail: (err) => {
            console.log(err)
          },
        })
      },
      startNavigation() {
        showNavigationBarLoading()
        openLocation({
          latitude: this.latitude,
          longitude: this.longitude,
        })
      },
      showNavigation() {
        navigateTo({
          url: `plugin://uni-plugin-baidu-map/index?key=${your_appKey}`,
        })
      },
    },
  }
</script>

上記のコードでは、まず、openLocation、getLocation、navigationTo、showNavigationBarLoading などの地図関連の API メソッドを導入しました。位置の取得、ナビゲーションの開始、およびナビゲーション ボタンの表示のためのメソッドは vue のメソッドで定義され、対応する API メソッドが対応するクリック イベントで呼び出されます。

テンプレートでは、マーカーをループすることでマップ上にマークされたポイントをレンダリングし、クリック イベントで位置決めおよびナビゲーション関数をトリガーします。

これまでに、UniApp での地図の位置決めとナビゲーションの統合と使用が完了しました。 API メソッドを設定して呼び出すだけで、地図の位置情報やナビゲーション機能を実装できます。この記事が皆さんのお役に立てれば幸いです、読んでいただきありがとうございます!

以上がUniApp は、地図の測位とナビゲーションの統合と使用スキルを実現しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。