Map.vue 705 B

123456789101112131415161718192021222324252627282930313233343536
  1. <template>
  2. <div class="map-container">
  3. <l-map
  4. ref="map"
  5. :zoom="15"
  6. :center="location"
  7. :options="{scrollWheelZoom: false}"
  8. >
  9. <l-tile-layer
  10. url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
  11. layer-type="base"
  12. name="OpenStreetMap"
  13. />
  14. <l-marker
  15. :lat-lng="location"
  16. />
  17. </l-map>
  18. </div>
  19. </template>
  20. <script setup lang="ts">
  21. import 'leaflet/dist/leaflet.css'
  22. import { LMap, LTileLayer, LMarker } from '@vue-leaflet/vue-leaflet'
  23. const location = [46.075245, 6.570162]
  24. </script>
  25. <style scoped lang="scss">
  26. .map-container {
  27. height: 500px;
  28. width: 100%;
  29. margin-left: auto;
  30. margin-right: auto;
  31. }
  32. </style>