由于模板，mapbox 未初始化答案

【问题标题】：mapbox not initializing due to template由于模板，mapbox 未初始化
【发布时间】：2018-11-17 19:02:30
【问题描述】：

我正在尝试初始化 MapBox，但控制台抛出错误 “未捕获的错误：找不到容器‘地图’。”

我正在使用模板，我认为这是 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>

【问题讨论】：

标签： javascript jquery html templates mapbox

【解决方案1】：

看起来该脚本在创建 <div id='map' class='container'></div> 之前正在运行。您需要确保 Javascript 在元素加载后运行。为此，您可以执行以下操作之一：

将脚本移动到 HTML 文档的底部，就在 </html> 标记之前：

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

将脚本放置在文档加载后调用的函数中：

纯 Javascript：

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

--或--

JQuery：

$(document).ready(function(){
    // all of your map code here
});

【讨论】：

我设法解决了我忘了初始化页面谢谢！

【解决方案2】：

对于 Angular：

ngAfterViewInit() {
    // all of your map code here
}

https://angular.io/api/forms/NgForm#ngAfterViewInit

【讨论】：