карта не инициализируется из-за шаблона - PullRequest
Новая
       8

карта не инициализируется из-за шаблона

0 голосов
/ 17 ноября 2018

Я пытаюсь инициализировать MapBox, но консоль выдает ошибку «Uncaught Error: контейнер« map »не найден».

Я работаю с шаблонами, которые, по моему мнению, являются проблемой, из-за которой Mapbox не может запроситьэлемент, который указан в моем HTML по какой-то причине.Я довольно плохо знаком с использованием шаблона, и мой контекст заключается в том, что он фрагментирует HTML-страницу.Надеюсь, что кто-то, кто имеет опыт в этом, может помочь мне в этом.Спасибо! 

        mapboxgl.accessToken = 'MYAPIKEY';
        var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v9',
        interactive: true,
        dragRotate: true,
        doubleClick: true
        });


        // THIS TRACK'S USER LOCATION IN REAL-TIME USING USER'G GroupSchool
        map.addControl(new mapboxgl.GeolocateControl({
        positionOptions: {
        enableHighAccuracy: true
        },
        trackUserLocation: true
        }));
        //IF I CHANGE THIS URL TO PHP THAT CONTAINS THE GEOJSON FORMAT
        var url = http://xxxx.geojson;
      


        map.on('load', function () {
            window.setInterval(function() {
                map.getSource('drone').setData(url);
            }, 2000);

            map.addSource('drone',
            {
              type: 'geojson',
              data: url
            });

            map.addLayer({
                "id": "drone",
                "type": "symbol",
                "source": "drone",
                "layout": {
                    "icon-image": "rocket-15"
                }
            });
        });
          <template id="home.html">
            <ons-page>
                <!-- Toolbar-->
                <ons-toolbar>
                    <div class="left">
                        <ons-toolbar-button onclick="fn.open()">
                            <ons-icon icon="md-menu"></ons-icon>
                        </ons-toolbar-button>
                    </div>
                    <div class="center">
                    </div>
                </ons-toolbar>

                <div id='map' class='container'></div>



            </ons-page>


        </template>

1 Ответ

0 голосов
/ 19 ноября 2018

Похоже, что скрипт работает до того, как <div id='map' class='container'></div> был создан.Вам необходимо убедиться, что Javascript запускает после загрузки элементов.Для этого вы можете выполнить одно из следующих действий:

  1. Переместить скрипт в конец документа HTML, прямо перед тегом </html>: 

    <html>
    <!-- ALL OF YOUR CURRENT HTML CODE -->
    ...
    <!-- PLACE SCRIPT HERE -->
    <script>
        <!-- ALL OF YOU MAP CODE -->
    </script>
</html>

  2. Поместите скрипт в функцию, которая вызывается после документа, загруженного:

    Чистый Javascript: 

    document.addEventListener('DOMContentLoaded', function() {
   // all of your map code here
}, false);

    - ИЛИ -

    JQuery: 

    $(document).ready(function(){
    // all of your map code here
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...