유니앱에서 오토내비 사용법

모바일 애플리케이션과 측위 기술의 발전으로 지도는 우리의 일상 생활과 업무에 없어서는 안 될 도구가 되었습니다. 중국의 주류 지도 서비스 제공업체 중 하나인 AMAP는 기능과 데이터 리소스 측면에서 개발자들에게 선호를 받고 있습니다. 그렇다면 uniApp에서는 Amap을 어떻게 활용해야 할까요?

1. Amap API Key 신청

Amap을 사용하기 전에 Amap 오픈 플랫폼에서 API Key를 신청해야 합니다. 단계는 다음과 같습니다.

1. AMAP Open Platform 공식 웹사이트(https://lbs.amap.com/)를 엽니다.

2. 개발자 계정에 등록하고 로그인하세요.

3. 관리 콘솔을 통해 애플리케이션을 생성합니다.

4. 애플리케이션 관리 페이지에서 "기본 구성" 페이지를 찾아 API Key를 신청하세요.

5. 애플리케이션이 성공하면 후속 개발을 위해 "애플리케이션 관리" 페이지에서 생성된 Key 값을 확인할 수 있습니다.

2. Amap SDK 사용

uniApp에서 Amap을 사용하려면 Amap SDK를 사용해야 합니다. uni-app 플랫폼에서는 uni-app에서 Amap SDK를 쉽게 사용할 수 있는 uni-amap이라는 플러그인을 제공합니다.

1.uni-amap 플러그인을 설치하세요.

HBuilderX에서 uni-app 프로젝트를 열고 메뉴 표시줄에서 "Plug-in Market"을 선택하고 검색 상자에 "uni-amap"을 입력하여 검색한 후 플러그인을 선택하고 설치합니다.

2.Amap SDK를 소개합니다.

다음과 같이 App.vue 파일에 AMAP SDK를 도입합니다.

<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가 있으므로 필요에 따라 호출할 수 있습니다.

위 내용은 유니앱에서 오토내비 사용법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!