如何从JSON文件中检索数据，而无需手动进入数据mapbox

Question

我想使用一个包含坐标的JSON文件，用Mapbox在地图上绘制点，并在这些位置添加标记。我跟随了他们的一些教程，并在其他地方搜索(堆栈溢出，Github等)，看看我是否能找到一个解决方案，但似乎没有任何工作。当我在浏览器中打开HTML文件时，我没有得到任何错误，但标记没有出现在JSON坐标的地图上，我不太确定如何读取JSON坐标，然后绘制在地图上。我希望JSON从项目的同一文件夹中使用，而不是URL，所以这对我也不起作用。

<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoiam1hcHNkamFuZ28iLCJhIjoiY2tydzIwazc4MGNnODJvb2VhNHNhZDd5diJ9.iwGIdgMHrcjbNu1xJRAElQ';
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
// style: 'mapbox://styles/mapbox/light-v10',
center: [-0.19346, 51.50405],
zoom: 9
});
map.on('load', () => {
map.addLayer({
id: 'restaurants',
type: 'Point',
source: {
type: 'geojson',
data: './restaurants.json' // replace this with the url of your own geojson
},
paint: {
'circle-radius': [
'interpolate',
['linear'],
['number', ['get', 'coordinates']],
0,
4,
5,
24
],
'circle-color': [
'interpolate',
['linear'],
['number', ['get', 'coordinates']],
0,
1,
2,
3,
4,
5,
],
'circle-opacity': 0.8
}
});
});

Answer 1

我不知道这是否是你唯一的错误，但这一行:

type: 'Point',

应:

type: 'circle',