Comment mettre en œuvre la navigation de voyage et la planification d'itinéraire dans Uniapp

Comment mettre en œuvre la navigation de voyage et la planification d'itinéraires dans uniapp

Avec l'amélioration du niveau de vie des gens, la navigation de voyage et la planification d'itinéraires sont devenues un élément indispensable de la société moderne. La mise en œuvre de la navigation de voyage et de la planification d'itinéraires dans uniapp n'est pas compliquée. Cet article présentera les étapes spécifiques pour implémenter ces fonctions via uniapp et les plug-ins associés, et fournira des exemples de code.

1. Introduire les composants cartographiques et les plug-ins de navigation
Tout d'abord, nous devons introduire les composants cartographiques et les plug-ins de navigation dans uniapp. Les plug-ins de navigation courants actuels incluent Baidu Map et Amap. Dans uniapp, nous pouvons utiliser les deux plug-ins uni-app-baidumap et uni-app-amap pour implémenter des fonctions de navigation et de planification d'itinéraire.

1.1 Introduire le plug-in Baidu map
Dans le répertoire racine du projet uniapp, installez le plug-in uni-app-baidumap via npm :

npm install uni-app-baidumap

Après cela, introduisez le plug-in dans le fichier main.js dans le répertoire racine :

import baiduMap from 'uni-app-baidumap';
Vue.use(baiduMap, {
    ak: 'your baidu map ak'
});

Parmi eux, « votre baidu map ak » doit être remplacé par votre propre AK (clé) de l'API Baidu Map. De cette manière, le plug-in de carte Baidu a été introduit avec succès.

1.2 Présentation du plug-in AMAP
Dans le répertoire racine du projet uniapp, installez le plug-in uni-app-amap via npm :

npm install uni-app-amap

Après cela, introduisez le plug-in dans le fichier main.js dans le répertoire racine :

import amap from 'uni-app-amap';
Vue.use(amap);

Ça y est Le plug-in Amap a été introduit avec succès.

2. Réaliser le positionnement et l'affichage de la carte
En partant du principe que le plug-in de carte a été introduit, nous pouvons afficher la carte et réaliser le positionnement via le composant cartographique fourni par uniapp.

2.1 Introduire le composant cartographique sur la page
Dans le fichier .vue de la page, introduire le composant cartographique et définir les propriétés associées :

<template>
  <view class="map">
    <map :longitude="longitude" :latitude="latitude" :scale="scale" style="width: 100%; height: 100%"></map>
  </view>
</template>

Parmi elles, la longitude et la latitude représentent respectivement la longitude et la latitude de la carte, et l'échelle représente le niveau de zoom de la carte.

2.2 Obtenez l'emplacement actuel et affichez la carte
Dans la balise <script> de la page, obtenez l'emplacement actuel en appelant l'API fournie par uniapp et transmettez les informations de localisation au composant cartographique : </script>

export default {
  data() {
    return {
      longitude: '',
      latitude: '',
      scale: 14
    }
  },
  onShow() {
    uni.getLocation({
      type: 'gcj02',
      success: (res) => {
        this.longitude = res.longitude;
        this.latitude = res.latitude;
      }
    })
  }
}

Cela peut être implémenté dans uniapp Affichez la carte et accédez à l'emplacement actuel.

3. Réaliser la navigation de voyage et la planification d'itinéraire
Après avoir affiché la carte et obtenu l'emplacement actuel, nous pouvons mettre en œuvre des fonctions de navigation de voyage et de planification d'itinéraire en appelant l'API fournie par le plug-in de carte.

3.1 Implémenter la fonction de navigation
Dans le fichier .vue, ajoutez un bouton de navigation et déclenchez la fonction de navigation en cliquant sur le bouton :

<template>
  <view class="map">
    <map :longitude="longitude" :latitude="latitude" :scale="scale" style="width: 100%; height: 100%"></map>
    <button @click="navigate">导航</button>
  </view>
</template>

Dans la balise <script> pour mettre en œuvre la fonction de navigation ：</script>

export default {
  methods: {
    navigate() {
      uni.openLocation({
        longitude: '目标地点的经度',
        latitude: '目标地点的纬度',
        scale: 14,
        name: '目标地点名称',
        address: '目标地点地址'
      })
    }
  }
}

Parmi eux, la « longitude de l'emplacement cible » et la « latitude de l'emplacement cible » doivent être remplacées par les informations de localisation de la destination de navigation, ainsi que le « nom de l'emplacement cible » et « "L'adresse de localisation cible" doit être remplacée par les informations pertinentes sur la destination de navigation.

3.2 Implémenter la fonction de planification d'itinéraire
Dans le fichier .vue, ajoutez un bouton de planification d'itinéraire et déclenchez la fonction de planification d'itinéraire en cliquant sur le bouton :

<template>
  <view class="map">
    <map :longitude="longitude" :latitude="latitude" :scale="scale" style="width: 100%; height: 100%"></map>
    <button @click="routePlan">路线规划</button>
  </view>
</template>

Dans la balise <script> Grâce au plug-in de carte, l'API Planning implémente la fonction de planification d'itinéraire : </script>

export default {
  methods: {
    routePlan() {
      uni.navigateTo({
        url: '/pages/routePlan/routePlan'
      })
    }
  }
}

Parmi eux, '/pages/routePlan/routePlan' doit être remplacé par le chemin de votre page de planification d'itinéraire.

4. Résumé
En introduisant des plug-ins de carte, en affichant des cartes et en obtenant des informations de positionnement, nous pouvons implémenter des fonctions de navigation de voyage et de planification d'itinéraire dans uniapp. Les exemples de code ci-dessus utilisent les plug-ins Baidu Map et Amap, mais l'utilisation spécifique de chaque plug-in peut être différente. Veuillez utiliser la documentation du plug-in. La mise en œuvre de ces fonctions offre non seulement aux utilisateurs une meilleure expérience de voyage, mais augmente également la praticité et l'attractivité des applications pour les développeurs. J'espère que cet article sera utile pour votre développement uniapp.

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!