Блог

Главная - Вопросы по программированию - MapBox gl js, Ошибка безопасности консоли браузера

MapBox gl js, Ошибка безопасности консоли браузера

#javascript #mapbox-gl-js

Вопрос:

Я использую Mapbox gl js на веб-сайте, чтобы показать карту safari. Я создал свою учетную запись mapbox и свой токен API, и у меня возникла ошибка браузера:

Ошибка безопасности: Операция небезопасна. cecb579d-d0ad-424a-9e7d-bf4c7353d904:1

Если я попытаюсь открыть исходный отладочный большой двоичный объект, я получу пустую страницу 🙁

Thx заранее

вот код:

     <html lang="it">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.js'></script>
        <link href='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.css' rel='stylesheet' />   
        <script src="https://unpkg.com/@turf/turf@6/turf.min.js"></script>
    </head>
<body>

<div id="map"></div>
<div class="overlay">
<button id="replay">Replay</button>
</div>
<!-- here i used the defoult API key -->
    <script>
    mapboxgl.accessToken = 'pk.eyJ1IjoiYWxleDk1IiwiYSI6ImNrcTRlajRrajE3cnIydnFyMGMwN3cyeG4ifQ.jU5odECEGnFPWjflz37KhA';
        var map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/streets-v11',
            center: [36, -1],
            zoom: 7.3
        });
        // 1 Nairobi, Kenya
        var marker1 = new mapboxgl.Marker({           
            color: "#737C56",
            draggable: false
        })
        .setLngLat([36.70, -1.30])
        .setPopup(new mapboxgl.Popup({
            className: 'pop-up',
            closeButton: false,
            closeOnClick: true
        })
        .setText('Nairobi, Kenya'))
        .addTo(map);

        // 2 The Great Rift Valley View Point, B 3, Kenya
        var marker2 = new mapboxgl.Marker({           
            color: "#737C56",
            draggable: false
        })
        .setLngLat([36.58, -1.08])
        .setPopup(new mapboxgl.Popup({
            className: 'pop-up',
            closeButton: false,
            closeOnClick: true
        })
        .setText('The Great Rift Valley View Point, B 3, Kenya')) 
        .addTo(map);
        [...]
 </script>
 </body>
 <html> ```

Комментарии:

1. Вы пробовали добавлять в свой проект только карту без добавления этих маркеров?

2. пока нет, я собираюсь попробовать. Это очень много

Ответ №1:

Я удалил некоторые скрипты из вашего кода, и, похоже, он работает нормально. пожалуйста, перейдите по этой ссылке

 <html lang="it">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.js'></script>
        <link href='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.css' rel='stylesheet' />
    </head>
<body>

<div id="map"></div>
<div class="overlay">
<button id="replay">Replay</button>
</div>
<!-- here i used the defoult API key -->
    <script>
    mapboxgl.accessToken = 'pk.eyJ1IjoiYWxleDk1IiwiYSI6ImNrcTRlajRrajE3cnIydnFyMGMwN3cyeG4ifQ.jU5odECEGnFPWjflz37KhA';
        var map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/streets-v11',
            center: [36, -1],
            zoom: 7.3
        });
        // 1 Nairobi, Kenya
        var marker1 = new mapboxgl.Marker({           
            color: "#737C56",
            draggable: false
        })
        .setLngLat([36.70, -1.30])
        .setPopup(new mapboxgl.Popup({
            className: 'pop-up',
            closeButton: false,
            closeOnClick: true
        })
        .setText('Nairobi, Kenya'))
        .addTo(map);

        // 2 The Great Rift Valley View Point, B 3, Kenya
        var marker2 = new mapboxgl.Marker({           
            color: "#737C56",
            draggable: false
        })
        .setLngLat([36.58, -1.08])
        .setPopup(new mapboxgl.Popup({
            className: 'pop-up',
            closeButton: false,
            closeOnClick: true
        })
        .setText('The Great Rift Valley View Point, B 3, Kenya')) 
        .addTo(map);
 </script>
 </body>
 <html>

Комментарии:

1. Спасибо за ваш ответ, Макс. Я вижу, что вы удалили js turf, но на самом деле я все еще вижу предупреждение об ошибке браузера: Операция небезопасна. Это связано с ключом API по умолчанию или в моем коде чего-то еще не хватает? Прошу вас заранее за вашу драгоценную помощь. Эмануэле

Метки: ,