Cara melaksanakan penentududukan peta dan pertanyaan sekitar dalam uniapp

Cara melaksanakan penentududukan peta dan pertanyaan sekitar dalam uniapp

Dengan pembangunan Internet mudah alih, penentududukan peta dan pertanyaan sekitar telah menjadi banyak Salah satu keperluan umum aplikasi. Dalam uniapp, agak mudah untuk melaksanakan penentududukan peta dan pertanyaan sekeliling. Artikel ini akan memperkenalkan cara menggunakan komponen peta asli dan API yang berkaitan untuk melaksanakan kedudukan peta dan fungsi pertanyaan di sekeliling dalam uniapp.

1. Kedudukan peta

Kedudukan peta merujuk kepada mendapatkan koordinat latitud dan longitud lokasi peranti semasa. Dalam uniapp, kita boleh menggunakan fungsi uni.getLocation untuk melaksanakan penentududukan peta. Mula-mula, perkenalkan fungsi uni.getLocation dalam halaman yang perlu menggunakan kedudukan peta:

import uni from 'uni-location'

Kemudian panggil fungsi uni.getLocation pada masa yang sesuai untuk mendapatkan koordinat longitud dan latitud peranti semasa:

// 获取当前设备的经纬度坐标
uni.getLocation({
  success: function(res) {
    var latitude = res.latitude
    var longitude = res.longitude
    console.log('纬度：' + latitude + '，经度：' + longitude)
  }
})

#🎜🎜 #Dalam kod di atas, fungsi uni.getLocation akan mengembalikan objek yang mengandungi maklumat lokasi peranti semasa Koordinat longitud dan latitud lokasi peranti semasa boleh diperolehi melalui res.latitude dan res. longitud.

2. Paparan peta

Selepas kita mempunyai koordinat latitud dan longitud, kita boleh menggunakan komponen peta asli yang disediakan oleh uniapp untuk memaparkan peta. Mula-mula, perkenalkan komponen peta ke dalam halaman yang perlu menggunakan peta:

<uni-map id="map" :latitude="latitude" :longitude="longitude" :scale="14" :show-location="true" style="width: 100%; height: 400rpx;"></uni-map>

Dalam kod di atas, kami menggunakan komponen uni-map dan menetapkan sifat yang berkaitan. Atribut id ialah "peta", dan latitud dan longitud ialah koordinat longitud dan latitud yang diperolehi. Atribut skala digunakan untuk menetapkan tahap zum peta, lalai ialah 14 dan atribut lokasi-tunjuk digunakan untuk menetapkan sama ada untuk memaparkan tanda lokasi semasa, lalainya adalah benar. Atribut gaya digunakan untuk menetapkan saiz paparan peta.

3 Pertanyaan sekeliling

Pertanyaan sekeliling peta dalam uniapp boleh dicapai dengan memanggil API yang berkaitan. Di sini, kami mengambil pertanyaan tentang POI (tempat menarik) sebagai contoh. Pertama, anda perlu mengkonfigurasi apiKey perkhidmatan peta dalam fail manifest.json bagi uniapp. ApiKey ini boleh digunakan dan diperoleh pada platform pembangun.

Cari bahagian awam yang sepadan dalam fail manifest.json dan tambahkan kod berikut:

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

Kemudian, perkenalkan uni.getLocation dan uni dalam halaman yang memerlukan pertanyaan sekitar . fungsi permintaan:

import uni from 'uni-location'
import uniRequest from 'uni-request'

Seterusnya, kita boleh mendapatkan koordinat latitud dan longitud lokasi peranti semasa melalui fungsi uni.getLocation, dan kemudian gunakan fungsi uni.request untuk menghantar permintaan ke peta API yang berkaitan untuk menanyakan POI sekeliling . Berikut ialah kod sampel:

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)
        // 在这里处理查询结果
      }
    })
  }
})

Dalam kod sampel di atas, kami menghantar permintaan kepada API perkhidmatan peta dengan menetapkan parameter seperti url, data dan kunci, dan kata kunci pertanyaan ialah "makanan" dan jejari ialah 1000 m tempat menarik. Selepas kejayaan, hasil pertanyaan akan dikembalikan dan kami boleh memproses keputusan ini dalam fungsi panggil balik kejayaan.

Melalui langkah di atas, agak mudah untuk melaksanakan penentududukan peta dan pertanyaan sekitar dalam uniapp. Dengan mendapatkan koordinat latitud dan longitud, kami boleh memaparkan lokasi peranti semasa pada peta dan pertanyaan mengelilingi POI melalui API. Anda juga boleh bermain dan mengubah suai kod secara bebas mengikut keperluan sebenar untuk melaksanakan lebih banyak fungsi peta.

Atas ialah kandungan terperinci Cara melaksanakan penentududukan peta dan pertanyaan sekitar dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!