UniApp menyedari kemahiran penyepaduan dan penggunaan kedudukan peta dan navigasi

UniApp ialah rangka kerja merentas platform yang dibangunkan berdasarkan Vue.js Ia boleh mencapai matlamat untuk membangunkan berbilang terminal sekaligus, termasuk H5, program mini, apl, aplikasi pantas, dsb. Dalam proses pembangunan sebenar, kita sering menghadapi keperluan untuk kedudukan peta dan fungsi navigasi Jadi bagaimana untuk mengintegrasikan dan menggunakan kedudukan peta dan navigasi dalam UniApp? Artikel ini akan menggunakan contoh kod untuk memperkenalkan secara terperinci penyepaduan dan kemahiran penggunaan kedudukan peta dan navigasi dalam UniApp.

Pertama, kita perlu mengkonfigurasi kebenaran yang berkaitan dan AppKey Baidu Map SDK dalam fail manifest.json UniApp. Buka fail manifest.json, cari medan "permission" di bawah "mp-weixin", dan tambahkan kebenaran berikut:

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

Tambah medan "appid" di bawah "mp-weixin" dan isikan AppKey yang dipohon pada Platform Terbuka Peta Baidu , seperti yang ditunjukkan di bawah:

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

Seterusnya, kita perlu memasang pemalam uni-apl untuk melaksanakan fungsi penentududukan dan navigasi peta. Buka terminal dalam direktori akar projek dan jalankan arahan berikut untuk memasang pemalam:

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

Selepas pemasangan selesai, kita perlu mengkonfigurasi penggunaan pemalam dalam fail pages.json projek. Cari halaman di bawah medan "halaman" dan tambahkan kod berikut:

{
  "path": "pages/map/map",
  "style": {
    "navigationBarTitleText": "地图"
  }
}

Ini melengkapkan konfigurasi pemalam.

Seterusnya, kita boleh membangunkan kedudukan peta dan navigasi dalam halaman yang ditentukan. Dalam fail vue halaman yang sepadan, tambahkan kod berikut:

<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>

Dalam kod di atas, kami mula-mula memperkenalkan kaedah API berkaitan peta, termasuk openLocation, getLocation, navigationTo dan showNavigationBarLoading. Kaedah untuk mendapatkan lokasi, memulakan navigasi dan memaparkan butang navigasi ditakrifkan dalam kaedah vue, dan kaedah API yang sepadan dipanggil dalam peristiwa klik yang sepadan.

Dalam templat, kami memaparkan titik yang ditanda pada peta dengan menggelung melalui penanda, dan mencetuskan kedudukan dan fungsi navigasi dalam acara klik.

Pada ketika ini, kami telah menyelesaikan penyepaduan dan penggunaan kedudukan peta dan navigasi dalam UniApp. Dengan hanya mengkonfigurasi dan memanggil kaedah API, kami boleh melaksanakan fungsi penentududukan peta dan navigasi. Saya harap artikel ini berguna kepada semua orang, terima kasih kerana membaca!

Atas ialah kandungan terperinci UniApp menyedari kemahiran penyepaduan dan penggunaan kedudukan peta dan navigasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!