uniapp에서 지도 위치 지정 및 주변 쿼리를 구현하는 방법

uniapp에서 지도 위치 지정 및 주변 쿼리 구현 방법

모바일 인터넷의 발전으로 지도 위치 지정 및 주변 쿼리는 많은 애플리케이션의 공통 요구 사항 중 하나가 되었습니다. 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입니다. 스타일 속성은 지도의 표시 크기를 설정하는 데 사용됩니다.

3. 주변 쿼리

유니앱에서 지도의 주변 쿼리는 해당 API를 호출하여 얻을 수 있습니다. 여기서는 주변 POI(관심 지점)를 예로 들어 쿼리합니다. 먼저 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'

다음으로 다음을 수행할 수 있습니다. pass 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)
        // 在这里处理查询结果
      }
    })
  }
})

위 샘플 코드에서는 키워드 "food"와 반경으로 관심 지점을 쿼리하기 위해 url, data, key 등의 매개 변수를 설정하여 지도 서비스 API에 요청을 보냅니다. 1000미터. 성공하면 쿼리 결과가 반환되며 성공 콜백 함수에서 이러한 결과를 처리할 수 있습니다.

위 단계를 통해 유니앱에서 지도 위치 지정 및 주변 쿼리를 구현하는 것은 비교적 간단합니다. 위도와 경도 좌표를 획득하여 현재 기기 위치를 지도에 표시하고 API를 통해 POI 주변을 쿼리할 수 있습니다. 더 많은 지도 기능을 구현하기 위해 실제 필요에 따라 코드를 자유롭게 재생하고 수정할 수도 있습니다.

위 내용은 uniapp에서 지도 위치 지정 및 주변 쿼리를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!