UniApp réalise les compétences d'intégration et d'utilisation du positionnement cartographique et de la navigation

UniApp est un framework multiplateforme développé sur la base de Vue.js. Il peut atteindre l'objectif de développer plusieurs terminaux à la fois, notamment H5, des mini-programmes, des applications, des applications rapides, etc. Dans le processus de développement actuel, nous rencontrons souvent le besoin de fonctions de positionnement et de navigation sur carte. Alors, comment intégrer et utiliser le positionnement et la navigation sur carte dans UniApp ? Cet article utilisera des exemples de code pour présenter en détail les compétences d'intégration et d'utilisation du positionnement cartographique et de la navigation dans UniApp.

Tout d'abord, nous devons configurer les autorisations pertinentes et l'AppKey du SDK Baidu Map dans le fichier manifest.json d'UniApp. Ouvrez le fichier manifest.json, recherchez le champ "permission" sous "mp-weixin" et ajoutez les autorisations suivantes :

{
  "name": "scope.userLocation",
  "desc": "地理位置",
},
{
  "name": "scope.record",
  "desc": "录音功能"
}

Ajoutez le champ "appid" sous "mp-weixin" et remplissez l'AppKey demandé sur le Baidu Map Open Platform, comme indiqué ci-dessous :

{
  "name": "appid",
  "value": "your_appKey"
}

Ensuite, nous devons installer le plug-in uni-app pour implémenter les fonctions de positionnement et de navigation sur la carte. Ouvrez un terminal dans le répertoire racine du projet et exécutez la commande suivante pour installer le plug-in :

npm install @dcloudio/uni-plugin-baidu-map --save

Une fois l'installation terminée, nous devons configurer l'utilisation du plug-in dans le fichier pages.json du projet. Recherchez une page sous le champ "pages" et ajoutez le code suivant :

{
  "path": "pages/map/map",
  "style": {
    "navigationBarTitleText": "地图"
  }
}

Ceci termine la configuration du plug-in.

Ensuite, nous pouvons développer le positionnement de la carte et la navigation dans la page spécifiée. Dans le fichier vue de la page correspondante, ajoutez le code suivant :

<template>
  <view>
    <button @tap="getLocation">点击获取位置</button>
    <button @tap="startNavigation">点击开始导航</button>
    <button @tap="showNavigation">显示导航按钮</button>
    <view class="map"></view>
  </view>
</template>

<script>
  import { openLocation, getLocation, navigateTo, showNavigationBarLoading } from '@dcloudio/uni-api'

  export default {
    data() {
      return {
        latitude: '',
        longitude: '',
        markers: [],
      }
    },
    methods: {
      getLocation() {
        getLocation({
          success: (res) => {
            this.latitude = res.latitude
            this.longitude = res.longitude
            this.markers = [{
              id: 0,
              latitude: res.latitude,
              longitude: res.longitude,
              title: '当前位置',
            }]
          },
          fail: (err) => {
            console.log(err)
          },
        })
      },
      startNavigation() {
        showNavigationBarLoading()
        openLocation({
          latitude: this.latitude,
          longitude: this.longitude,
        })
      },
      showNavigation() {
        navigateTo({
          url: `plugin://uni-plugin-baidu-map/index?key=${your_appKey}`,
        })
      },
    },
  }
</script>

Dans le code ci-dessus, nous avons d'abord introduit les méthodes API liées à la carte, notamment openLocation, getLocation, navigationTo et showNavigationBarLoading. Les méthodes pour obtenir la localisation, démarrer la navigation et afficher les boutons de navigation sont définies dans les méthodes de vue, et les méthodes API correspondantes sont appelées dans les événements de clic correspondants.

Dans le modèle, nous restituons les points marqués sur la carte en parcourant les marqueurs et déclenchons les fonctions de positionnement et de navigation lors de l'événement de clic.

À ce stade, nous avons terminé l'intégration et l'utilisation du positionnement cartographique et de la navigation dans UniApp. En configurant et en appelant simplement des méthodes API, nous pouvons implémenter des fonctions de positionnement et de navigation sur la carte. J'espère que cet article sera utile à tout le monde, merci d'avoir lu !

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!