Cara membangunkan apl geo-tag menggunakan Vue dan Canvas

Cara membangunkan aplikasi geo-tag menggunakan Vue dan Canvas

Aplikasi geo-tag ialah aplikasi biasa yang boleh digunakan untuk menandakan lokasi tertentu pada peta supaya pengguna boleh melihat dan menavigasi ke lokasi sasaran dengan lebih mudah. Artikel ini akan memperkenalkan cara menggunakan Vue dan Canvas untuk membangunkan aplikasi penandaan geolokasi dan melampirkan contoh kod yang sepadan.

1. Persediaan
   Pertama, kita perlu menyediakan beberapa alat dan sumber asas. Khususnya, kami memerlukan persekitaran pembangunan untuk projek Vue dan memperkenalkan Canvas ke dalam projek itu.

Kita boleh menggunakan Vue CLI untuk mencipta projek Vue baharu. Sila pastikan Vue CLI telah dipasang secara global dan laksanakan arahan berikut pada baris arahan:

vue create geo-marking-app
cd geo-marking-app

Seterusnya, kita perlu memasang kebergantungan berkaitan Kanvas. Jalankan arahan berikut untuk memasang pustaka Canvas dan kebergantungan yang berkaitan:

npm install canvas-prebuilt

Pada masa yang sama, kami juga perlu memasang beberapa alatan dan perpustakaan lain untuk membantu pembangunan kami. Sila laksanakan arahan berikut untuk memasang pakej kebergantungan:

npm install vue2-google-maps

2. Cipta komponen peta
   Seterusnya, kami akan mencipta komponen Vue untuk mengehoskan peta dan penanda lokasi. Cipta fail bernama Map.vue dalam direktori src/components/ dan tambahkan kod berikut dalam fail:

<template>
  <div>
    <GmapMap :center="center" :zoom="zoom" @click="handleMapClick">
      <GmapMarker v-for="(marker, index) in markers" :key="index" :position="marker.position"/>
    </GmapMap>
  </div>
</template>

<script>
import { gmapApi } from "vue2-google-maps";

export default {
  data() {
    return {
      center: { lat: 0, lng: 0 },
      zoom: 10,
      markers: []
    };
  },
  methods: {
    handleMapClick(event) {
      const { latLng } = event;
      const position = {
        lat: latLng.lat(),
        lng: latLng.lng()
      };
      this.markers.push({ position });
    }
  },
  mounted() {
    gmapApi().then(() => {
      this.center = { lat: 39.9075, lng: 116.3972 };
    });
  }
};
</script>

Dalam kod di atas, kami telah menggunakan perpustakaan vue2-google-maps untuk mencipta peta dan penanda. Kami boleh menetapkan pusat peta ke Beijing (39.9075°U, 116.3972°E) dan menambahkan penanda lokasi pada acara klik peta. Semua penanda disimpan dalam tatasusunan.

3. Buat Komponen Lukisan Penanda
   Seterusnya, kami akan mencipta komponen Vue untuk mengendalikan lukisan penanda. Cipta fail bernama MarkerDrawer.vue dalam direktori src/components/, dan tambahkan kod berikut pada fail:

<template>
  <div>
    <canvas ref="canvas" @mousedown="startDrawing" @mousemove="draw" @mouseup="stopDrawing"></canvas>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDrawing: false,
      context: null,
      prevX: null,
      prevY: null
    };
  },
  mounted() {
    const canvas = this.$refs.canvas;
    this.context = canvas.getContext("2d");
  },
  methods: {
    startDrawing(event) {
      this.isDrawing = true;
      const { offsetX, offsetY } = event;
      this.prevX = offsetX;
      this.prevY = offsetY;
    },
    draw(event) {
      if (!this.isDrawing) {
        return;
      }
      const { offsetX, offsetY } = event;
      this.context.beginPath();
      this.context.moveTo(this.prevX, this.prevY);
      this.context.lineTo(offsetX, offsetY);
      this.context.stroke();
      this.prevX = offsetX;
      this.prevY = offsetY;
    },
    stopDrawing() {
      this.isDrawing = false;
    }
  }
};
</script>

Dalam kod di atas, kami menggunakan elemen Kanvas HTML5 untuk melukis tanda. Sebelum melukis, kita perlu mendapatkan konteks Kanvas dan memproses logik berkaitan lukisan dalam peristiwa seperti mousedown, mousemove dan mouseup.

4. Sepadukan komponen
   Akhir sekali, kita perlu menyepadukan komponen Map dan komponen MarkerDrawer dalam App.vue. Buka fail src/App.vue dan buat pengubahsuaian berikut:

<template>
  <div id="app">
    <h1>地理位置标记应用</h1>
    <Map/>
    <MarkerDrawer/>
  </div>
</template>

<script>
import Map from "./components/Map.vue";
import MarkerDrawer from "./components/MarkerDrawer.vue";

export default {
  components: {
    Map,
    MarkerDrawer
  }
};
</script>

5. Jalankan projek
   Kami telah menyelesaikan kerja pembangunan asas. Sekarang, kita boleh melaksanakan arahan berikut dalam baris arahan untuk memulakan projek:

   npm run serve

   Selepas operasi berjaya, kita boleh membuka aplikasi di http://localhost:8080, masukkan lokasi tengah peta, dan lakukan penandaan geolokasi . Klik pada peta untuk menambah penanda dan melukis garisan antara penanda pada Kanvas.

   Ringkasan:
   Artikel ini memperkenalkan cara menggunakan Vue dan Canvas untuk membangunkan aplikasi pengetegan geolokasi. Dengan memperkenalkan Vue dan Canvas, kami boleh membuat peta dan penanda dengan mudah serta melukis hubungan antara penanda. Saya harap artikel ini berguna kepada anda, terima kasih kerana membaca!

   Di atas adalah pengenalan ringkas tentang cara menggunakan Vue dan Canvas untuk membangunkan aplikasi penandaan geolokasi Sila ikuti langkah mengikut urutan dan rujuk contoh kod untuk pembangunan. Saya doakan anda berjaya!

   Atas ialah kandungan terperinci Cara membangunkan apl geo-tag menggunakan Vue dan Canvas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!