Блог

Главная - Вопросы по программированию - Фрагмент Stackoverflow выдает ошибку, но снаружи он работает

Фрагмент Stackoverflow выдает ошибку, но снаружи он работает

#javascript #jsfiddle #mapbox-gl

#javascript #jsfiddle #mapbox-gl

Вопрос:

Я создал фрагмент stackoverflow внутри ответа, но получаю сообщение об ошибке, если я использую map.queryRenderedFeatures() . Вне фрагмента в index.html all работает нормально. Может ли это быть проблемой CORS? Я не получил сообщения об ошибке, кроме неопределенного возврата. Странно то, что иногда он работает в полностраничном режиме

Вот мой фрагмент:

 mapboxgl.accessToken = 'pk.eyJ1IjoicHJheWVyIiwiYSI6ImI3OGRjZjcyY2JiZTUzODMwZWUxZDdiNjRiMWE4NjI5In0.zETX-x6-XPpAv3zt4MiFwg';

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/prayer/ciub6rm2j004v2iodiej359ox',
    center: [14.5, 47],
    zoom: 6
});



map.on('click', function (e) {
    var features = map.queryRenderedFeatures({
    layers:['roads-bm6ga5'],
    filter: ["==", "id", 1]
});

    document.getElementById('features').innerHTML = '<b>Road with ID</b> '   features[0].properties.id   ' has the coordinates:'     
                                                    '<br>'  JSON.stringify(features[0].geometry.coordinates, null, 2);
});

map.on('load', function (e) {
    alert("Click in the map to show coordinates of road with ID 1")
}); 
 body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }

#features {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 300px;
        overflow: auto;
        background: rgba(255, 255, 255, 0.8);
    }
    #map canvas {
        cursor: crosshair;
    } 
 <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.26.0/mapbox-gl.css" rel="stylesheet"/>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.26.0/mapbox-gl.js"></script>

<div id='map'></div>
<pre id='features'></pre>

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

1. features представляет собой пустой массив. Так features[0].properties.id что выдаст ошибку. Вы должны проверить, есть ли features.length>0

2. Хм , спасибо вам ! Но функции[0] в этом случае не должны быть пустыми.. Я посмотрю, почему это происходит

3. За пределами скрипки она никогда не была пустой.. В чем причина этого ? Похоже, что запрос не работает должным образом внутри скрипки

4. @Rajesh Ты знаешь причину?

5. Не уверен, но когда я создавал JSFiddle , было несколько дополнительных запросов. В основном 23.vector.pbf . Это может быть причиной. Вы должны проверить, доступны ли все векторы.

Метки: