Vue と Canvas を使用して地理タグ付けアプリを開発する方法

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

npm install canvas-prebuilt

npm install vue2-google-maps

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

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

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