时间戳

首页 > 解决方案 > 如何在按钮单击时在 vue 中重新定位 vue2-leaflet 地图

typescript - 如何在按钮单击时在 vue 中重新定位 vue2-leaflet 地图

问题描述

我使用从“vue2-leaflet”导入的现成的 vue 组件“l-map”创建了传单地图。现在我想在按钮单击时重新定位地图，但我不知道如何访问用于创建地图的“地图”对象（如许多带有“map.flyTo（）”等功能的示例所示）功能。我尝试在@watch 属性中添加“中心”并将其分配给 l-map 标记的“中心”属性，但地图没有根据其值的变化显示任何变化。使用 'vue2-leaflet 库中的组件创建地图功能时，如何访问地图功能？

<template>
<l-map :zoom="zoom" :center="center">
      <v-btn small @click="recenterMap()">
           <span class="mdi mdi-target" />
      </v-btn>
</l-map>
</template>
<script lang="ts">
import { LMap, LControl } from "vue2-leaflet";
import { Component, Vue } from 'vue-property-decorator';

@Component({
 components: {
  LMap,
  LControl
 }
})
export default class MyMap extends Vue {
  center= { lat: 11.016749, lng: 76.955817 };

  recenterMap(){}
}
</script>

标签： typescriptvuejs2leafletvuetify.jsvue2leaflet

解决方案

要获取原始传单地图，您可以使用：

<l-map ref="map" :zoom="zoom" :center="center">
    // Your code
</l-map>

mounted() {
   this.$nextTick(() => {
      this.map = this.$refs.map.mapObject;
   });
}

文档：https ://vue2-leaflet.netlify.app/faq/#how-can-i-specify-leaflet-options-that-aren-t-part-of-a-component-s-props

推荐阅读