Vue-Leaflet: невозможно получить доступ к методу getLatLng Marker - TypeError: this.marker.getLanLng не является функцией - PullRequest
Новая
       9

Vue-Leaflet: невозможно получить доступ к методу getLatLng Marker - TypeError: this.marker.getLanLng не является функцией

0 голосов
/ 29 мая 2019

Я пытаюсь получить положение маркера на карте, когда пользователь перестает его перетаскивать. Я использую getLanLng() метод, но всегда выдает ошибку:

Ошибка типа: this.marker.getLanLng не является функцией

Код ошибки: 

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in v-on handler: 
"TypeError: this.marker.getLanLng is not a function"

found in

---> <LMarker>
       <LMap>
         <MapComponent>
           <VOnsCol>
             <VOnsPage>
               <UserLocation> at src/pages/Preferences/UserLocation.vue
                 <VOnsNavigator>
                   <AppNavigator> at src/AppNavigator.vue
                     <Root>
vue.runtime.esm.js?2b0e:1888 
TypeError: this.marker.getLanLng is not a function

    at VueComponent.onDragEnd (MapComponent.vue?a926:145)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at NewClass.invoker (vue.runtime.esm.js?2b0e:2179)
    at NewClass.handler (leaflet-src.js?e11e:2661)
    at NewClass.fire (leaflet-src.js?e11e:593)
    at NewClass._onDragEnd (leaflet-src.js?e11e:7370)
    at NewClass.fire (leaflet-src.js?e11e:593)
    at NewClass.finishDrag (leaflet-src.js?e11e:5991)
    at NewClass._onUp (leaflet-src.js?e11e:5966)
    at handler (leaflet-src.js?e11e:2661)

MapComponent.vue (ребенок): 

<template>
  <v-map
    ref="map"
    :zoom="zoom"
    :center="center"
  >
    <v-tile-layer
      :url="maps.url"
      :atribution="maps.atribution"
    />
    <v-marker
      ref="marker"
      class="map__marker"
      alt="user position"
      :lat-lng="center"
      :draggable="true"
      @dragend="onDragEnd"
    >
    </v-marker>
  </v-map>
</template>
<script>
import { LMap, LTileLayer, LMarker } from 'vue2-leaflet'

export default {
  name: 'mapComponent',
  components: {
    'v-map': LMap,
    'v-tile-layer': LTileLayer,
    'v-marker': LMarker
  },
  data() {
    return {
      maps: {
        url: 'http://{s}.tile.stamen.com/terrain/{z}/{x}/{y}.jpg',
        atribution: '&copy; <a href="http://stamen.com">Stamen Design</a>'
      },
      center: [40.5005, -3.66739],
      zoom: 17,
      bounds: null,
      marker: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.marker = this.$refs.marker
      console.log('marker: ' + this.marker)
    })
  },
  methods: {
    onDragEnd(event) {
      if (this.marker) {
        console.log(event.distance)
        console.log(this.marker)
        console.log(this.marker.getLanLng())
      } else {
        console.log('Error: NO MARKER')
      }
    }
  }
}
</script>

UserLocation.vue (родитель): 

<template>
  <v-ons-page id="userLocation">
    <div class="map">
      <map-component />
    </div>
  </v-ons-page>
</template>

<script>
import mapComponent from '@components/User/mapComponent'
export default {
  name: 'userLocation',
  components: {
    mapComponent
  }
}
</script>

<style scoped>
.map {
  width: 100%;
  height: 100%;
}
</style>

event.distance и this.marker работает нормально. Ошибки с методами.

Я использовал this.$refs.marker и this.$refs.marker.mapObject, и сообщение об ошибке возвращает то же самое

...