Question

当用户停止拖动时，我尝试在地图上获取标记位置。我使用<h:panelGrid>  <r:collapsiblePanel id="searchPanel" header="Suche" toggleListener="#{meldungListBacking.toggleSearchPanel}" switchType="ajax" immediate="true" expanded="#{meldungListBacking.searchPanelOpened}"> <r:tabPanel selectedTab="criteria" switchType="ajax"> <r:tab id="criteria" header="#{res.meldungList_search_tab_criteria_label}" styleClass="textlenght">... </r:tab> <r:tab id="othercriteria" header="#{res.meldungList_search_tab_criteria_label}" styleClass="textlenght">... </r:tab> <r:tab id="evenothercriteria" header="#{res.meldungList_search_tab_criteria_label}" styleClass="textlenght">... </r:tab> </r:tabPanel> <h:panelGrid columns="2"> <h:commandButton id="searchButton" value="Suchen" action="#{uebergreifendeLeistungswertListController.search}"> </h:commandButton> <h:commandButton id="resetButton" value="#{res.global_button_Ruecksetzen}" action="#{uebergreifendeLeistungswertListController.reset}" /> </h:panelGrid> </h:panelGrid>方法，但曾经返回错误：

TypeError：this.marker.getLanLng不是函数

错误代码：

getLanLng()

MapComponent.vue（child）：

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)

UserLocation.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>

<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，并且返回的错误消息是相同的

Vue-Leaflet：无法访问getLatLng Marker方法-TypeError：this.marker.getLanLng不是函数

0 个答案: