Vue, Leaflet, Mapbox - error map container not found

问题

My understanding is that the error is due to the my code attempting to initialize the map before the HTML element is rendered. Supposedly, initializing the map as a var in mounted() should fix it. I tried the suggested fix in this post, but it is not working for me.

I set my refs value in my HTML:

<div class="map-container-column">
    <div class="map banner-map" id="map" ref="myMap"></div>
</div>

And I declared my map variable in mounted as well. I tried using the suggested syntax of L.map(this.$refs['myMap'] { and L.map(this.$refs.myMap { and it doesn't seem to make a difference either way.

mounted() {
var map = L.map(this.$refs.myMap, {
                    zoomControl: false,
                    closePopupOnClick: false
                }).setView(regionCoords, 10);
                this.tileLayer = L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/streets-v9/tiles/256/{z}/{x}/{y}?access_token={accessToken}', {
                    minZoom: 9,
                    maxZoom: 15,
                    accessToken: MapBoxApiKey,
                    style: 'mapbox://styles/mapbox/streets-v9',
                    attribution: '<a href="https://www.mapbox.com/about/maps/" target="_blank">&copy; Mapbox</a> <a href="http://www.openstreetmap.org/about/" target="_blank">&copy; OpenStreetMap</a> <a class="mapbox-improve-map" href="https://www.mapbox.com/feedback/?owner=mapbox&amp;id=streets-v9&amp;access_token=pk.eyJ1IjoiaGlnaGxhbmRob21lc2RpZ2l0YWwiLCJhIjoiY2psNzJrdmwwMzN0ZDNxcWpwNnRteDJ5aiJ9.ENhvxwa1PF2i8f6xCcgLLA" target="_blank">Improve this map</a>',
                });
                this.tileLayer.addTo(map);
                L.control.zoom({
                    position: 'topright'
                }).addTo(map);
}

Am I doing somethings wrong? If not, what else could be causing this error?

来源：https://stackoverflow.com/questions/58017973/vue-leaflet-mapbox-error-map-container-not-found