uniappで地図の位置決めと周囲のクエリを実装する方法

ユニアプリで地図の位置決めと周囲のクエリを実装する方法

モバイル インターネットの発展に伴い、地図の位置決めと周囲のクエリは多くのアプリケーションの共通のニーズの 1 つになりました。 。 uniapp では、マップの位置決めと周囲のクエリの実装が比較的簡単です。この記事では、ネイティブ マップ コンポーネントと関連 API を使用して、マップの位置決めと周囲のクエリ機能を uniapp に実装する方法を紹介します。

1. マップの位置決め

マップの位置決めとは、デバイスの現在の位置の経度と緯度の座標を取得することを指します。 uniapp では、uni.getLocation 関数を使用して地図の位置決めを実装できます。まず、マップ位置を使用する必要があるページに uni.getLocation 関数を導入します:

import uni from 'uni-location'

次に、適切なタイミングで uni.getLocation 関数を呼び出して、現在のデバイスの経度と緯度の座標を取得します:

// 获取当前设备的经纬度坐标
uni.getLocation({
  success: function(res) {
    var latitude = res.latitude
    var longitude = res.longitude
    console.log('纬度：' + latitude + '，经度：' + longitude)
  }
})

上記のコードでは、uni.getLocation 関数は現在のデバイスの位置情報を含むオブジェクトを返します。現在のデバイスの位置の経度および緯度の座標は、res.latitude および res.longitude を通じて取得できます。

2. 地図表示

緯度と経度の座標を取得したら、uniapp が提供するネイティブ地図コンポーネントを使用して地図を表示できます。まず、マップを使用する必要があるページにマップ コンポーネントを導入します。

<uni-map id="map" :latitude="latitude" :longitude="longitude" :scale="14" :show-location="true" style="width: 100%; height: 400rpx;"></uni-map>

上記のコードでは、uni-map コンポーネントを使用し、関連するプロパティを設定します。 id属性は「map」で、緯度、経度はそれぞれ取得した経度、緯度の座標となります。 scale 属性はマップのズーム レベルの設定に使用され、デフォルトは 14 です。show-location 属性は、現在の位置マークを表示するかどうかの設定に使用され、デフォルトは true です。 style 属性は、地図の表示サイズを設定するために使用されます。

3. 周囲クエリ

uniappにおける地図の周囲クエリは、該当するAPIを呼び出すことで実現できます。ここでは、周囲の POI (Point of Interest) のクエリを例として取り上げます。まず、uniapp の manifest.json ファイルにマップ サービスの apiKey を設定する必要があります。この apiKey は開発者プラットフォームで申請および取得できます。

manifest.json ファイルで対応するパブリック部分を見つけて、次のコードを追加します:

"mp": {
  "config": {
    "permission": {
      "scope.userLocation": {
        "desc": "您的位置信息将用于地图定位"
      }
    }
  },
  "requireCustomRoutes": true,
  "usingComponents": {
    "uni-map": "@dcloudio/uni-ui/lib/uni-map/uni-map"
  }
},
"h5": {
  "publicPath": "/",
  "staticDirectory": "static",
  "webpackChain": {},
  "webpackDevServer": {},
  "enableLinter": false
},
"qrcode": {
  "title": "uni-demo",
  "path": "pages/index/index",
  "width": 430,
  "autoColor": true
},
"appid": "tourist"

次に、周囲のクエリが必要なページに uni.getLocation 関数と uni.request 関数を導入します。 :

import uni from 'uni-location'
import uniRequest from 'uni-request'

次に、uni.getLocation 関数を使用して現在のデバイスの位置の緯度と経度の座標を取得し、uni.request 関数を使用して地図関連 API にリクエストを送信してクエリを実行します。周囲のPOI。以下はサンプル コードです:

uni.getLocation({
  success: function (res) {
    var latitude = res.latitude
    var longitude = res.longitude
    uni.request({
      url: 'https://apis.map.qq.com/ws/place/v1/search',
      data: {
        keyword: '美食',
        location: latitude + ',' + longitude,
        radius: 1000,
        key: '地图服务的apiKey'
      },
      success: function (res) {
        console.log(res.data)
        // 在这里处理查询结果
      }
    })
  }
})

上記のサンプル コードでは、URL、データ、キーなどのパラメーターを設定してマップ サービス API にリクエストを送信します。クエリ キーワードは「food」、半径は 1000 メートルです。成功するとクエリ結果が返され、これらの結果を成功コールバック関数で処理できます。

上記の手順により、マップの位置決めと周囲のクエリを uniapp に実装するのは比較的簡単になります。緯度と経度の座標を取得すると、デバイスの現在の位置を地図上に表示したり、API を通じて周囲の POI をクエリしたりできます。実際のニーズに応じてコードを自由に使用および変更して、より多くのマップ関数を実装することもできます。

以上がuniappで地図の位置決めと周囲のクエリを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。