无法使用 mapbox-gl.js 向 mapbox 地图添加标记答案

【问题标题】：Can't add markers to mapbox map with mapbox-gl.js无法使用 mapbox-gl.js 向 mapbox 地图添加标记
【发布时间】：2019-05-23 21:01:13
【问题描述】：

我正在拼命尝试通过使用带有 typescript 的 mapbox-gl-js 向 mapbox 地图添加一些标记，并且我遵循了 mapbox 网站上的几个教程，但它对我不起作用。

    mapboxgl.accessToken = 'mykey';

    this.map = new mapboxgl.Map({
      container: 'map',
      style: this.style,
      zoom: 13,
      center: [12, 12]
    });

    this.map.on('load', (event) => {

      this.map.addSource('testSrc', {
        type: 'geojson',
        data: {
          type: 'FeatureCollection',
          features: [{
            type: 'Feature',
            geometry: {
              type: 'Point',
              coordinates: [ 12, 12]
            },
            properties: {
              title: 'Mapbox',
              description: 'Washington, D.C.'
            }
          },
            {
              type: 'Feature',
              geometry: {
                type: 'Point',
                coordinates: [-122.414, 37.776]
              },
              properties: {
                title: 'Mapbox',
                description: 'San Francisco, California'
              }
            }]
        }
  });

      this.map.addLayer({
        id: 'testSrc',
        source: 'testSrc',
        type: 'circle',
        layout: {
          'text-field': '{message}',
          'text-size': 24,
          'text-transform': 'uppercase',
          'icon-image': 'rocket-15',
          'text-offset': [0, 1.5]
        },
        paint: {
          'text-color': '#f16624',
          'text-halo-color': '#fff',
          'text-halo-width': 2
        }
      });

      this.map.addControl(new mapboxgl.NavigationControl());

    });

我用一些静态数据创建了一个源，并将它设置为 mapboxgl 地图对象的一层。地图显示没有任何问题，但我无法添加一些具有所需 geojson 格式的标记。

我的目标是动态添加标记，但在这里我坚持添加一些静态标记。

你知道这里有什么问题吗？

问候马尔科

【问题讨论】：

标签： javascript typescript mapbox mapbox-gl-js

【解决方案1】：

向 Mapbox GL JS 添加“标记”有两种主要方法，

使用标记，例如https://docs.mapbox.com/mapbox-gl-js/example/custom-marker-icons/，它将为图像添加一个 DOM 元素。
使用符号，例如https://docs.mapbox.com/mapbox-gl-js/example/center-on-symbol/，它将图像添加为 WebGL 画布的一部分。您需要确保您使用的图像已加载，例如。 https://docs.mapbox.com/mapbox-gl-js/example/add-image/

【讨论】：

【解决方案2】：

试试这个 - 这对我有用（如果你不想要它，请删除弹出位）

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
    <title> My Map </title>
    <!--This where you put all your dependencies-->
    <!DOCTYPE html>
    <html lang="en" dir="ltr">
    <head>
      <meta charset="utf-8">
        <title> My Map </title>
        <!--This where you put all your dependencies-->
        <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
        <script src='https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.js'></script>
        <link href='https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.css' rel='stylesheet' />
        <style>
        /*this CSS section is where you style your page*/
        /*this is how you comment in CSS*/
             body { margin: 0; padding: 0; }
             #map { position: absolute; top: 0; bottom: 0; width: 100%; }
           .marker {
             background-image: url('mapbox-icon.png');
             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>
        <!--The below script section is a javascript section in your html file-->
          <script>
          //This is where you put your Javascript for interaction
            mapboxgl.accessToken = 'pk.eyJ1IjoiY3dpbG1vdHQiLCJhIjoiY2s2bWRjb2tiMG1xMjNqcDZkbGNjcjVraiJ9.2nNOYL23A1cfZSE4hdC9ew'; //Put your own mapbox token

            var map = new mapboxgl.Map({
              container: 'map', // container id specified in the HTML
              style: 'mapbox://styles/cwilmott/ckbowmfzd3r761il84bnji13t' //change to your style
            });

            var geojson = {
              type: 'FeatureCollection',
                features: [{
      type: 'Feature',
      properties: {
        time: '2020-06-19T09:47:13Z',
        title: '10:47:13',
        description: '19 Jun 2020 at 10:47:13'
      },
      geometry: {
        type: 'Point',
        coordinates: [
          -2.219255366395865,
          53.457215089777584,
        ]
      }
    },
    {
      type: 'Feature',
      properties: {
        time: '2020-06-19T09:47:19Z',
        title: 'home',
        description: '19 Jun 2020 at 10:47:19'
      },
      geometry: {
        type: 'Point',
        coordinates: [
          -2.219227672420135,
          53.457351307993434
        ]
      }
    }]
            }

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

    // create a HTML element for each feature
    var el = document.createElement('div');
    el.className = 'marker';

    // make a marker for each feature and add to the map
    new mapboxgl.Marker(el)
      .setLngLat(marker.geometry.coordinates)
      .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>

如果要添加外部 GeoJson，请删除 var geojson 部分中的功能并改为：

var geojson = {
      type: 'geojson',
      data: 'path-to-your-file.geojson'
                }

（我认为应该可以）。

【讨论】：