未捕获的TypeError：This._map为空(Vue.js3，LEAFLE) [英] Uncaught TypeError: this._map is null (Vue.js 3, Leaflet)

问题描述

我从Vue.js项目(版本3)的传单中收到奇怪的错误。

如果我关闭弹出窗口并放大/缩小，Firefox上会出现此错误：

未捕获的TypeError：This._map为空

和Chrome：

无法读取Null的属性‘_latLngToNewLayerPoint’

MAP组件如下：

<template>
  <div id="map"></div>
</template>

<script>
import "leaflet/dist/leaflet.css";
import L from 'leaflet';

export default {
  name: 'Map',
  data() {
    return {
      map: null
    }
  },
  mounted() {
    this.map = L.map("map").setView([51.959, -8.623], 12);
    L.tileLayer("https://{s}.tile.osm.org/{z}/{x}/{y}.png", {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(this.map);

    L.circleMarker([51.959, -8.623]).addTo(this.map)
      .bindPopup('I am a marker')
      .openPopup();
  }
}
</script>

<style scoped>
  #map {
    height: 300px;
    width: 100%;
  }
</style>

如何重现错误：

1. Open Stackblitz：https://stackblitz.com/edit/vue-gjeznj
2. 关闭弹出窗口
3. 放大/缩小

会不会只是个错误？或者我是否遗漏了代码中的任何错误？

推荐答案

阅读了arieljuod的链接后，在不调整宣传单的js.file的情况下，似乎唯一的选择是禁用缩放动画。

this.map = L.map("map", {zoomAnimation: false})

如果需要动画，这里建议对传单的js文件做一个小调整：https://salesforce.stackexchange.com/a/181000

这篇关于未捕获的TypeError：This._map为空(Vue.js3，LEAFLE)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！