Contoh untuk menerangkan cara menggunakan API Peta Baidu dalam Vue-Soal Jawab bahagian hadapan-php.cn

Contoh untuk menerangkan cara menggunakan API Peta Baidu dalam Vue

PHPz

Lepaskan： 2023-04-11 14:08:05

asal

1331 orang telah melayarinya

Vue ialah rangka kerja JavaScript popular yang boleh membina aplikasi web satu halaman dengan cepat. API Peta Baidu ialah satu set API peta yang membenarkan pembangun menggunakannya dalam pelbagai aplikasi. Artikel ini akan memperkenalkan cara menggunakan API Peta Baidu dalam Vue dan kumpulan titik data mengikut peraturan tertentu melalui contoh.

Menggunakan API Peta Baidu

Sebelum menggunakan API Peta Baidu, anda perlu mendapatkan kunci pada Platform Pembangun Baidu. Jika anda belum mempunyai kunci, anda boleh pergi ke [Baidu Developer Platform](https://lbsyun.baidu.com/) untuk memohon.

Perkenalkan fail JS peta Baidu ke dalam projek Vue Anda boleh memperkenalkannya dalam fail index.html melalui teg skrip, atau anda boleh menggunakan pek web untuk membungkus fail JS dan mengimportnya.

<html>
  <head>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=your_app_key"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

Salin selepas log masuk

Gunakan fungsi kitaran hayat Vue untuk memulakan objek peta selepas komponen dipasang dan mengikat peta pada data komponen.

<template>
  <div id="map" style="height: 500px"></div>
</template>

<script>
export default {
  data() {
    return {
      map: null
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      this.map = new BMap.Map("map");
      this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
    }
  }
};
</script>

Salin selepas log masuk

Apabila terdapat berbilang titik data dalam halaman, adalah sangat menyusahkan untuk melabel setiap titik data pada peta. Berikut ialah cara menggunakan API Peta Baidu untuk mengumpulkan titik data.

Pengumpulan titik data peta

Dalam kes sejumlah besar titik data, pengumpulan data boleh memaparkan data dengan lebih baik dan meningkatkan kecekapan lukisan peta.

Pertama, buat komponen yang boleh menyebabkan titik data. Dalam komponen ini, format prop yang digunakan untuk latitud dan longitud titik data ditakrifkan.

<template>
  <i 
    class="iconfont icon-marker"
    :style="{
      color: color,
      fontSize: size + &#39;px&#39;,
      left: point.lng + &#39;px&#39;,
      top: point.lat + &#39;px&#39;
    }"
  ></i>
</template>

<script>
export default {
  props: {
    point: {
      type: Object,
      default() {
        return {
          lng: 0,
          lat: 0
        };
      }
    },
    size: {
      type: Number,
      default: 24
    },
    color: {
      type: String,
      default: "#FF0000"
    }
  }
};
</script>

Salin selepas log masuk

Seterusnya, kami akan memaparkan berbilang titik data dalam komponen induk (komponen peta). Untuk membezakan antara kumpulan yang berbeza, label untuk setiap titik data juga ditakrifkan.

<template>
  <div id="map"></div>
  <div v-for="(value, key) in markers" :key="key">
    <h2>{{ key }}</h2>
    <ul>
      <li v-for="point in value" :key="point.id">
        <MapMarker :point="point" :color="point.color" />
      </li>
    </ul>
  </div>
</template>

<script>
import MapMarker from "@/components/MapMarker.vue";

export default {
  data() {
    return {
      markers: {},
      map: null
    };
  },
  mounted() {
    this.initMap();
    this.renderMarkers();
  },
  methods: {
    initMap() {
      this.map = new BMap.Map("map");
      this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
    },
    renderMarkers() {
      const markerList = [
        {
          id: 1,
          lng: 116.381374,
          lat: 39.915146
        },
        {
          id: 2,
          lng: 116.403694,
          lat: 39.927552
        },
        {
          id: 3,
          lng: 116.413807,
          lat: 39.914235
        },
        {
          id: 4,
          lng: 116.399076,
          lat: 39.920051
        },
        ...
      ];

      const bounds = this.map.getBounds();
      const sw = bounds.getSouthWest();
      const ne = bounds.getNorthEast();

      markerList.forEach(marker => {
        const point = new BMap.Point(marker.lng, marker.lat);
        if (bounds.containsPoint(point)) {
          const { id, lng, lat } = marker;
          const group = Math.floor((lat - sw.lat) / (ne.lat - sw.lat) * 10);
          if (!this.markers[group]) this.markers[group] = [];
          this.markers[group].push({
            id,
            point,
            lng,
            lat,
            color: "#FF0000"
          });
        }
      });
    }
  },
  components: {
    MapMarker
  }
};
</script>

Salin selepas log masuk

Kod di atas menunjukkan cara melintasi markerList dalam komponen peta, mendapatkan kumpulan yang sepadan dengan setiap titik, dan kemudian memaparkan penanda dalam kumpulan.

Anda sudah selesai! Kini kami telah melaksanakan Vue untuk melaksanakan kumpulan pengurusan API Peta Baidu. Anda boleh menukar kod kepada aplikasi yang sesuai mengikut keperluan.

Atas ialah kandungan terperinci Contoh untuk menerangkan cara menggunakan API Peta Baidu dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!