Vue.js mapbox-gl Error: Invalid type: 'container' must be a String or HTMLElement

Question

我正在使用 mapbox-gl: 1.9.1 和 vue: 2.6.11。

<head>
  ...
  <script src="https://api.mapbox.com/mapbox-gl-js/v1.10.1/mapbox-gl.js"></script>
  <link href="https://api.mapbox.com/mapbox-gl-js/v1.10.1/mapbox-gl.css" rel="stylesheet" />
  <title><%= htmlWebpackPlugin.options.title %></title>
...

<template>
  <div id="mapId" class="map" ref="mapElement"></div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator"
import { Map, MapboxOptions, NavigationControl } from "mapbox-gl"

const mapOptions = {
  accessToken: process.env.VUE_APP_MAPBOX_ACCESSTOKEN,
  style: "mapbox://styles/mapbox/satellite-v9",
  center: { lng: -73.647384, lat: 45.201385 },
  zoom: 16
}

@Component
export default class MapComponent extends Vue {
  public $refs!: {
    mapElement: HTMLElement
  }

  private map: Map = new Map()

  constructor() {
    super()
  }

  private mounted() {
    this.initMap()
  }

  private initMap(): void {
    const options = { container: this.$refs.mapElement, ...mapOptions }
    this.map = new Map(options)
    this.map.addControl(new NavigationControl())
  }
}
</script>

<style lang='stylus' scoped>
.map {
  height: 100%;
  width: 100vw;
}
</style>

我试过 container:this.$refs.mapElement 和 container: "mapId" 地图在网页上显示，但我可以在控制台中删除错误：

vue.runtime.esm.js?2b0e:1888 Error: Invalid type: 'container' must be a String or HTMLElement.
    at new r (mapbox-gl.js?e192:33)

我已经调查了 Vue.js docs and a look into similar question using also ，但仍然无法正常工作。有人对此有意见吗？

Answer 1

你的问题是这一行

private map: Map = new Map()

这将尝试在创建组件时创建一个没有选项的 Map 实例。

只定义私有属性而不初始化它直到initMap()，即

private map!: Map

您可以看到 here Map 构造函数检查 container 是否为 string 或 HTMLElement，如果不是，则抛出此错误

if (typeof options.container === 'string') {
  this._container = window.document.getElementById(options.container);
  if (!this._container) {
    throw new Error(`Container '${options.container}' not found.`);
  }
} else if (options.container instanceof HTMLElement) {
  this._container = options.container;
} else {
   throw new Error(`Invalid type: 'container' must be a String or HTMLElement.`);
}

Vue.js mapbox-gl Error: Invalid type: 'container' must be a String or HTMLElement

Vue.js mapbox-gl Error: Invalid type: 'container' must be a String or HTMLElement

vue.js

mapbox-gl-js

vuejs2