Conseils pour implémenter la recherche et l'affichage de cartes Baidu dans Vue

Avec l'avènement de l'ère Internet, les applications cartographiques sont devenues un outil indispensable dans la vie quotidienne. Baidu Map est une application cartographique populaire, et la mise en œuvre de la recherche et de l'affichage de Baidu Map dans Vue est une compétence très pratique pour de nombreux développeurs front-end. Cet article présentera comment implémenter les techniques de recherche et d'affichage de cartes Baidu dans Vue.

1. Enregistrer l'API Baidu Map

Tout d'abord, nous devons créer un compte sur Baidu Map Open Platform et créer une application, puis obtenir l'AK (Access Key).

Introduisez l'API JavaScript Baidu Map dans l'index.html du projet et remplacez AK par votre propre AK :

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=your_ak"></script>

2. Implémentez la recherche de carte Baidu

La mise en œuvre de la recherche de carte Baidu nécessite l'aide de l'API fournie par Baidu Map . Nous devons d’abord créer un formulaire sur la page qui contient un champ de recherche et un bouton de recherche.

<template>
  <div>
    <form @submit.prevent="onSearch">
      <input type="text" v-model="searchText" placeholder="请输入搜索关键字">
      <button type="submit">搜索</button>
    </form>
  </div>
</template>

Définissez ensuite les méthodes searchText et onSearch dans le composant Vue :

<script>
  export default {
    data() {
      return {
        searchText: '',
      };
    },
    methods: {
      onSearch() {
        const local = new BMap.LocalSearch(this.$refs.map, {
          renderOptions: { map: this.$refs.map },
        });
        local.search(this.searchText);
      },
    },
  };
</script>

Dans la méthode onSearch, nous utilisons l'instance BMap.LocalSearch pour restituer les résultats de la recherche sur la carte.

3. Implémentez l'affichage de la carte Baidu

Créez un conteneur div dans le composant Vue pour afficher la carte :

<template>
  <div>
    <div ref="map" style="height: 400px;"></div>
  </div>
</template>

Dans la fonction hook créée du composant Vue, créez une instance de carte et définissez le point central et le niveau de zoom.

<script>
  export default {
    data() {
      return {
        map: null,
      };
    },
    created() {
      const map = new BMap.Map(this.$refs.map);
      const point = new BMap.Point(116.404, 39.915);
      map.centerAndZoom(point, 15);
      this.map = map;
    },
  };
</script>

Dans le code ci-dessus, nous créons une instance de carte et l'attribuons à la variable map dans le composant Vue. En définissant le point central et le niveau de zoom, nous pouvons contrôler la position initiale et la taille d'affichage de la carte.

4. Code complet

Enfin, nous combinons les codes de recherche et d'affichage pour obtenir un composant de carte Baidu complet :

<template>
  <div>
    <form @submit.prevent="onSearch">
      <input type="text" v-model="searchText" placeholder="请输入搜索关键字">
      <button type="submit">搜索</button>
    </form>
    <div ref="map" style="height: 400px;"></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        searchText: '',
        map: null,
      };
    },
    created() {
      const map = new BMap.Map(this.$refs.map);
      const point = new BMap.Point(116.404, 39.915);
      map.centerAndZoom(point, 15);
      this.map = map;
    },
    methods: {
      onSearch() {
        const local = new BMap.LocalSearch(this.$refs.map, {
          renderOptions: { map: this.$refs.map },
        });
        local.search(this.searchText);
      },
    },
  };
</script>

Grâce aux étapes ci-dessus, nous pouvons facilement implémenter la recherche et l'affichage de carte Baidu dans Vue Shown. Bien sûr, il ne s’agit que d’un exemple simple, et les projets réels peuvent impliquer davantage de fonctions et une logique métier complexe. Cependant, cet exemple peut vous fournir une idée et une référence d’entrée de gamme.

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!