<template>
  <div id="map"></div>
</template>

<script>
import Konva from "konva";

export default {
  name: "MyMap",
  props:{

  },
  data(){
    return {
      stage:'',

    }
  },
  mounted() {
    this.initKonvaStage();
  },
  methods: {
    initKonvaStage(){
      this.stage = new Konva.Stage({
        container: "map",
        width: this.$refs.map.clientWidth,
        height: this.$refs.map.clientHeight,
      });
      this.stage.container().style.cursor = "crosshair";
    },
  }
}
</script>

<style>
#map {
  background: #ddd;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16/9;
}
</style>
