UniApp은 지도 위치 지정 및 내비게이션의 통합 및 사용 기술을 실현합니다.

UniApp은 Vue.js를 기반으로 개발된 크로스 플랫폼 프레임워크로, H5, 미니 프로그램, 앱, 빠른 애플리케이션 등을 포함한 여러 터미널을 한 번에 개발하는 목표를 달성할 수 있습니다. 실제 개발 과정에서 지도 위치 지정 및 내비게이션 기능이 필요한 경우가 종종 있습니다. 그러면 UniApp에서 지도 위치 지정 및 내비게이션을 어떻게 통합하고 사용할 수 있을까요? 이 기사에서는 코드 예제를 사용하여 UniApp의 지도 위치 지정 및 탐색 통합 및 사용 기술을 자세히 소개합니다.

먼저 UniApp의 매니페스트.json 파일에 Baidu Map SDK의 AppKey와 관련 권한을 구성해야 합니다. 매니페스트.json 파일을 열고 "mp-weixin" 아래에서 "권한" 필드를 찾아 다음 권한을 추가하세요.

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

"mp-weixin" 아래에 "appid" 필드를 추가하고 Baidu 지도 개방형 플랫폼은 아래와 같습니다.

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

다음으로 지도 위치 지정 및 탐색 기능을 구현하려면 uni-app 플러그인을 설치해야 합니다. 프로젝트의 루트 디렉터리에서 터미널을 열고 다음 명령을 실행하여 플러그인을 설치합니다.

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

설치가 완료된 후 다음 페이지의 Pages.json 파일에서 플러그인 사용을 구성해야 합니다. 프로젝트. "페이지" 필드에서 페이지를 찾아 다음 코드를 추가하세요.

{
  "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 중국어 웹사이트의 기타 관련 기사를 참조하세요!