Javascript 如何在mapbox中为我的点创建标记？_Javascript_Popup_Maps_Mapbox_Mapbox Gl Js

Javascript 如何在mapbox中为我的点创建标记？

javascript maps mapbox

Javascript 如何在mapbox中为我的点创建标记？,javascript,popup,maps,mapbox,mapbox-gl-js,Javascript,Popup,Maps,Mapbox,Mapbox Gl Js,我有一个地图上有不同点的数据集，作为GeoJSON存储在GitHub上。我想为该数据集的每个点指定弹出窗口，单击该点时将显示其一些数据属性。我从Mapbox教程中复制了一些代码，但我不知道如何将GeoJSON文件中的点与标记连接起来这是我的密码： <!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <title></title> <me

我有一个地图上有不同点的数据集，作为GeoJSON存储在GitHub上。我想为该数据集的每个点指定弹出窗口，单击该点时将显示其一些数据属性。我从Mapbox教程中复制了一些代码，但我不知道如何将GeoJSON文件中的点与标记连接起来

这是我的密码：

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css' rel='stylesheet' />
    <style>
      body {
        margin: 0;
        padding: 0;
      }

      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
      .marker {
  background-image: url(https://placekitten.com/g/);
  background-size: cover;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
}

.mapboxgl-popup {
  max-width: 200px;
}

.mapboxgl-popup-content {
  text-align: center;
  font-family: 'Open Sans', sans-serif;
}
    </style>
</head>
<body>

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

<script>

mapboxgl.accessToken = 'pk.eyJ1IjoiamFua29tYWciLCJhIjoiY2ozNmNhMXQyMDQ4czMybzl6YTN2cDM0ciJ9.naD_i9iNOl_CEZ3WkY8Nvg';

var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/light-v10',
  center: [-96, 37.8],
  zoom: 3
});

map.addSource('worldcities_points', {
  type: 'geojson',
  data: 'https://github.com/jankomag/worldcitiespopchange/blob/master/readycities_geojson.geojson'
});

// add markers to map
geojson.features.forEach(function(marker) {

  // create a HTML element for each feature
  var el = document.createElement('div');
    el.className = 'marker';
    el.style.backgroundImage = 'url(https://placekitten.com/g/' + marker.properties.iconSize.join('/') + '/)';
    el.style.width = marker.properties.iconSize[0] + 'px';
    el.style.height = marker.properties.iconSize[1] + 'px';

    el.addEventListener('click', function() {
        window.alert(marker.properties.message);
    });
  // make a marker for each feature and add to the map
  new mapboxgl.Marker(el)
    .setLngLat(marker.geometry.coordinates)
    .setPopup(new mapboxgl.Popup({ offset: 25 }) // add popups
      .setHTML('<h3>' + marker.properties.title + '</h3><p>' + marker.properties.description + '</p>'))
    .addTo(map);
});

</script>

</body>
</html>


身体{
保证金：0；
填充：0；
}
#地图{
位置：绝对位置；
排名：0；
底部：0；
宽度：100%；
}
.马克{
背景图片：url(https://placekitten.com/g/);
背景尺寸：封面；
宽度：50px；
高度：50px；
边界半径：50%；
光标：指针；
}
.mapboxgl弹出窗口{
最大宽度：200px；
}
.mapboxgl弹出内容{
文本对齐：居中；
字体系列：“开放式Sans”，无衬线；
}
mapboxgl.accessToken='pk.eyj1ijoiamfua29tywcilcjhijoy2oznmnhmxqymdq4czmybzl6ytn2cdm0cij9.naD(u i9iNOl)CEZ3WkY8Nvg'；
var map=new mapboxgl.map({
容器：“映射”，
风格：'mapbox://styles/mapbox/light-v10',
中心：[-9637.8]，
缩放：3
});
map.addSource（'worldcities_points'）{
键入：“geojson”，
数据：'https://github.com/jankomag/worldcitiespopchange/blob/master/readycities_geojson.geojson'
});
//向地图添加标记
geojson.features.forEach（函数（标记）{
//为每个功能创建一个HTML元素
var el=document.createElement（'div'）；
el.className='marker'；
el.style.backgroundImage='url(https://placekitten.com/g/'+marker.properties.iconSize.join（'/'）+'/'）；
el.style.width=marker.properties.iconSize[0]+'px'；
el.style.height=marker.properties.iconSize[1]+'px'；
el.addEventListener（'click'，函数（）{
window.alert（marker.properties.message）；
});
//为每个要素制作一个标记并添加到地图中
新mapboxgl.标记（el）
.setLngLat（标记、几何、坐标）
.setPopup（新的mapboxgl.Popup（{offset:25}）//添加弹出窗口
.setHTML（“”+marker.properties.title+''+marker.properties.description+''））
.addTo（地图）；
});

首先，我建议您不要共享访问令牌。其他人可以使用它，您将收到账单。由于您已经共享了它，禁用它可能是一个好主意

我对您的代码有一些评论：

您正在添加一个源。为了在地图上显示它，您必须为它创建一个图层并将其添加到地图中

map.addSource（'worldcities_points'）{ 键入：“geojson”，数据：“” });

-->要将其添加为图层，请执行以下操作：

//添加一个显示位置的图层。
map.addLayer({
'id'：'worldcity_points'，
“类型”：“符号”，
‘来源’：‘世界城市积分’，
“布局”：{
'图标图像'：'{icon}-15'，
“图标允许重叠”：true
}
});欢迎使用Stack Overflow-通常，在联机研究或完成教程后，您会希望尝试编写一些代码。一旦你完成了这篇文章，你可以在这里编写代码/错误以获得支持。另外，StackOverflow是专门为程序员设计的网站。如果你想学习编程，那么可以帮助你。但是如果你想在这里找到帮助，就不要再说“我不是开发人员”。@SteveBennett好的，我很抱歉。我现在已经添加了一些代码，但我不确定我能做些什么来让它工作谢谢你的建议！我设法以一种稍微不同的方式完成了它