Cara menggunakan AutoNavi dalam uniApp

Dengan pembangunan aplikasi mudah alih dan teknologi penentududukan, peta telah menjadi alat yang amat diperlukan dalam kehidupan dan kerja harian kita. Sebagai salah satu penyedia perkhidmatan peta arus perdana di China, AMAP digemari oleh pembangun untuk fungsi dan sumber datanya. Jadi, bagaimanakah kita harus menggunakan Amap dalam uniApp?

1. Mohon Kunci API Amap

Sebelum menggunakan Amap, kami perlu memohon Kunci API pada platform terbuka Amap. Langkah-langkahnya adalah seperti berikut:

1 Buka laman web rasmi AMAP Open Platform (https://lbs.amap.com/).

2. Daftar dan log masuk ke akaun pembangun anda.

3. Cipta aplikasi melalui konsol pengurusan.

4. Cari halaman "Konfigurasi Asas" dalam halaman pengurusan aplikasi dan memohon Kunci API.

5. Selepas aplikasi berjaya, anda boleh melihat nilai Kunci yang dijana pada halaman "Pengurusan Aplikasi" untuk pembangunan seterusnya.

2. Gunakan Amap SDK

Untuk menggunakan Amap dalam uniApp, kita perlu menggunakan Amap SDK. Platform uni-app menyediakan pemalam yang dipanggil uni-amap, yang boleh menggunakan SDK Amap dalam apl uni dengan mudah.

1. Pasang pemalam uni-amap.

Buka projek uni-app dalam HBuilderX, pilih "Pasaran Plug-in" dalam bar menu, masukkan "uni-amap" dalam kotak carian untuk mencari, pilih pemalam dan pasangnya.

2. Perkenalkan Amap SDK.

Perkenalkan Amap SDK ke dalam fail App.vue, seperti berikut:

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

Dalam kod ini, kami mentakrifkan teg uni-map, melepasi parameter longitud, latitud dan penanda yang diberikan , yang boleh memaparkan maklumat peta yang kami perlukan pada peta.

3. Senario Aplikasi Amap

1. Kedudukan dan Navigasi

Melalui Amap SDK, kami boleh mendapatkan maklumat lokasi pengguna dan menyasarkan senario aplikasi yang berbeza Navigasi. Dalam apl uni, kami boleh mendapatkan maklumat lokasi pengguna melalui kaedah uni.getLocation(). Kodnya adalah seperti berikut:

uni.getLocation({
  type: 'gcj02',
  success: function (res) {
    console.log('location', res)
  }
})

2. Carian POI Peta

Melalui SDK Amap, kami boleh merealisasikan carian kata kunci untuk POI di sekeliling (tempat menarik). Dalam apl uni, kita boleh mendapatkan maklumat POI sekitar melalui kaedah uni.amap.getPoiAround(). Kodnya adalah seperti berikut:

uni.amap.getPoiAround({
  iconPath: '../../static/marker.png',
  longitude: 116.397390,
  latitude: 39.908860,
  success: function (res) {
    console.log('search result:', res)
  }
})

4. Rakaman Trajektori

Menggunakan Amap SDK, kita boleh memvisualisasikan trajektori yang diposisikan. Dalam uni-app, kita boleh menggunakan kaedah uni.amap.showPolyline() untuk memaparkan trajektori pada peta. Kodnya adalah seperti berikut:

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

Di atas adalah kaedah asas menggunakan Amap dalam apl uni Sudah tentu, Amap SDK mempunyai lebih banyak fungsi dan API, yang boleh kita panggil mengikut keperluan kita sendiri.

Atas ialah kandungan terperinci Cara menggunakan AutoNavi dalam uniApp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!