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