Home / Questions / 380267
Accepted
qwerty
Asked: 2020-08-07 16:17:20 +0800 CST 2020-08-07 16:17:20 +0800 CST

How to get current coordinates in Vue2Leafet

  • 772

I have a map using Vue2Leaflet, which I try to get the coordinates of the map every time the dragend event fires (when the map location is changed)

<template>
<div id="map" ref="map" style="height: 100vh">
   <client-only>
      <l-map @dragend="getCoords" :zoom=4 :center="[coords.lat, coords.lon]" :options="{zoomControl: false}">
          <l-tile-layer :url="themes.default"></l-tile-layer>
   </client-only>
</div>

I tried to access the object this.$refs.mapbut it doesn't show the coordinates, how can I get them?

vue.js

1 Answers

  1. Best Answer

    you could use the eventupdate:center

    Example:

    <template>
  <div style="height: 100vh">
    <l-map :zoom="zoom" :center="center" @update:center="centerUpdate">
      <l-tile-layer :url="themes.default"></l-tile-layer>
    </l-map>
  </div>
</template>

<script>
import { latLng } from "leaflet";
import { LMap, LTileLayer} from "vue2-leaflet";

export default {
  name: "Example",
  components: {
    LMap,
    LTileLayer
  },
  data() {
    return {
      zoom: 13,
      center: latLng(47.41322, -1.219482)
    };
  },
  methods: {
    centerUpdate(center) {
      // AQUI Notifica cuando el centro es actualizado
      console.log(center);
    }
  }
};
</script>
    • 0