GeoLocation не может передавать координаты другой переменной - PullRequest
0 голосов
/ 26 мая 2020

Итак, я хотел бы передать широту и долготу в переменные ширины и высоты в "data ()", а не просто записывать их в html. Я попытался передать переменную через все эти функции, чтобы получить доступ к переменной, но это не сработало в функции showLocation(location).

<template>
  <div class="app">
  <div class="app-Inner">
  </div>
  <button @click="getLocation">VIEW YOUR LOCATION</button>
  <div>{{ width }}</div>
  <div class="location"></div>
  <div class="map"></div>
  </div>
</template>

<script>
import Home from './components/Home.vue';
import MainValues from './components/MainValues.vue';
import Form from './components/Form.vue';
import More from './components/More.vue';
export default {
  name: 'App',
  data() {
    return {
      width: 0,
      height: 0,
    };
  },
  methods: {
    getLocation() {
      const geo = navigator.geolocation;
      if (geo) {
        // eslint-disable-next-line
        geo.getCurrentPosition(showLocation);
      } else {
        const divLocation2 = document.querySelector('.location');
        divLocation2.innerHTML = 'error';
      }
      function showLocation(location) {
        // edit: !!!
        // here instead of sending location cords through innerHTML i 
        // want to assign them into variables "width" and "height" which
        // are defined in "data()" function above. 
        // tried: this.width = location.coords.latitude, and
        // also : this.length = location.coords.longitude
        // !!!
        const divLocation = document.querySelector('.location');
        divLocation.innerHTML = `${location.coords.latitude} ${location.coords.longitude}`;
      }
    },
  },
};
</script>
...