Vue, Leaflet, Mapbox - контейнер с картой ошибок не найден - PullRequest
Новая
       6

Vue, Leaflet, Mapbox - контейнер с картой ошибок не найден

0 голосов
/ 19 сентября 2019

Насколько я понимаю, ошибка связана с тем, что мой код пытается инициализировать карту до визуализации HTML-элемента.Предположительно, инициализация карты как переменной в mounted() должна исправить это.Я попробовал предлагаемое исправление в этом посте , но оно не работает для меня.

Я установил значение refs в своем HTML: 

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

И я объявилМоя переменная карты также смонтирована.Я попытался использовать предложенный синтаксис L.map(this.$refs['myMap'] { и L.map(this.$refs.myMap {, и это, похоже, не имеет значения в любом случае. 

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);
}

Я что-то не так делаю?Если нет, то что еще может быть причиной этой ошибки?

...