Comment implémenter le positionnement sur la carte et les requêtes environnantes dans Uniapp

Comment implémenter le positionnement cartographique et les requêtes environnantes dans uniapp

Avec le développement de l'Internet mobile, le positionnement cartographique et les requêtes environnantes sont devenus l'un des besoins communs de nombreuses applications. Dans Uniapp, il est relativement simple d'implémenter le positionnement sur la carte et les requêtes environnantes. Cet article explique comment utiliser les composants cartographiques natifs et les API associées pour implémenter le positionnement de la carte et les fonctions de requête environnantes dans Uniapp.

1. Positionnement sur la carte

Le positionnement sur la carte fait référence à l'obtention des coordonnées de latitude et de longitude de l'emplacement actuel de l'appareil. Dans uniapp, nous pouvons utiliser la fonction uni.getLocation pour implémenter le positionnement sur la carte. Tout d'abord, introduisez la fonction uni.getLocation dans la page qui doit utiliser le positionnement sur la carte :

import uni from 'uni-location'

Appelez ensuite la fonction uni.getLocation au moment approprié pour obtenir les coordonnées de longitude et de latitude de l'appareil actuel :

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

Dans ce qui précède code, la fonction uni.getLocation renverra un objet contenant les informations de localisation actuelle de l'appareil. Les coordonnées de latitude et de longitude de l'emplacement actuel de l'appareil peuvent être obtenues via res.latitude et res.longitude.

2. Affichage de la carte

Une fois que nous avons les coordonnées de latitude et de longitude, nous pouvons utiliser le composant cartographique natif fourni par uniapp pour afficher la carte. Tout d'abord, introduisez le composant map dans la page qui doit utiliser la carte :

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

Dans le code ci-dessus, nous utilisons le composant uni-map et définissons les propriétés pertinentes. L'attribut id est "map", et la latitude et la longitude sont respectivement les coordonnées de longitude et de latitude obtenues. L'attribut scale est utilisé pour définir le niveau de zoom de la carte, la valeur par défaut est 14, et l'attribut show-location est utilisé pour définir s'il faut afficher la marque de localisation actuelle, la valeur par défaut est true. L'attribut style est utilisé pour définir la taille d'affichage de la carte.

3. Requête environnante

La requête environnante de la carte dans uniapp peut être réalisée en appelant l'API correspondante. Ici, nous prenons comme exemple l’interrogation autour des POI (points d’intérêt). Tout d'abord, vous devez configurer l'apiKey du service de carte dans le fichier manifest.json d'uniapp. Cette apiKey peut être demandée et obtenue sur la plateforme de développement.

Trouvez la partie publique correspondante dans le fichier manifest.json et ajoutez le code suivant :

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

Ensuite, introduisez les fonctions uni.getLocation et uni.request dans la page où les requêtes environnantes sont requises :

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

Ensuite, nous pouvons pass La fonction uni.getLocation obtient les coordonnées de latitude et de longitude de l'emplacement actuel de l'appareil, puis utilise la fonction uni.request pour envoyer une requête à l'API liée à la carte afin d'interroger les POI environnants. Voici un exemple de code :

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

Dans l'exemple de code ci-dessus, nous envoyons une requête à l'API du service de carte en définissant des paramètres tels que l'URL, les données et la clé pour interroger les points d'intérêt avec le mot-clé « nourriture » ​​et un rayon. de 1000 mètres. Après le succès, les résultats de la requête seront renvoyés et nous pourrons traiter ces résultats dans la fonction de rappel de réussite.

Grâce aux étapes ci-dessus, il est relativement simple d'implémenter le positionnement de la carte et les requêtes environnantes dans uniapp. En obtenant les coordonnées de latitude et de longitude, nous pouvons afficher l'emplacement actuel de l'appareil sur la carte et interroger les POI environnants via l'API. Vous pouvez également jouer et modifier librement le code en fonction des besoins réels pour implémenter davantage de fonctions cartographiques.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!