Petua untuk melaksanakan carian dan paparan peta Baidu dalam Vue

Dengan kemunculan era Internet, aplikasi peta telah menjadi alat yang sangat diperlukan dalam kehidupan seharian. Peta Baidu ialah aplikasi peta yang popular, dan melaksanakan carian dan paparan Peta Baidu dalam Vue merupakan kemahiran yang sangat praktikal untuk kebanyakan pembangun bahagian hadapan. Artikel ini akan memperkenalkan cara melaksanakan teknik carian dan paparan peta Baidu dalam Vue.

1. Daftar API Peta Baidu

Pertama, kita perlu mendaftar akaun di Platform Terbuka Peta Baidu dan buat aplikasi, kemudian dapatkan AK (Kunci Akses).

Perkenalkan API JavaScript Peta Baidu ke dalam index.html projek dan gantikan AK dengan AK anda sendiri:

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

2. Laksanakan Carian Peta Baidu

Pelaksanaan Carian Peta Baidu memerlukan bantuan API yang disediakan oleh Baidu Peta. Mula-mula kita perlu Buat borang dalam halaman yang mengandungi kotak carian dan butang carian.

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

Kemudian tentukan kaedah searchText dan onSearch dalam komponen 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>

Dalam kaedah onSearch, kami menggunakan contoh BMap.LocalSearch untuk memaparkan hasil carian pada peta.

3. Laksanakan paparan peta Baidu

Buat bekas div dalam komponen Vue untuk memaparkan peta:

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

Dalam fungsi cangkuk yang dicipta bagi komponen Vue, buat contoh peta dan tetapkan titik tengah dan tahap zum.

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

Dalam kod di atas, kami mencipta contoh peta dan menetapkannya kepada pembolehubah peta dalam komponen Vue. Dengan menetapkan titik tengah dan aras zum, kami boleh mengawal kedudukan awal peta dan saiz paparan.

4. Kod lengkap

Akhir sekali, kami menggabungkan kod carian dan paparan untuk mendapatkan komponen peta Baidu yang lengkap:

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

Melalui langkah di atas, kami boleh melaksanakan carian dan paparan peta Baidu dengan mudah dalam Vue yang ditunjukkan. Sudah tentu, ini hanyalah contoh mudah, dan projek sebenar mungkin melibatkan lebih banyak fungsi dan logik perniagaan yang kompleks. Walau bagaimanapun, contoh ini boleh memberi anda idea dan rujukan peringkat permulaan.

Atas ialah kandungan terperinci Petua untuk melaksanakan carian dan paparan peta Baidu dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!