ホームページ > 記事 > ウェブフロントエンド > 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 サイトの他の関連記事を参照してください。