Mapbox GL JS - 将弹出标记与地理定位相结合答案

【问题标题】：Mapbox GL JS - combining pop-up markers with geolocateMapbox GL JS - 将弹出标记与地理定位相结合
【发布时间】：2020-06-22 10:32:45
【问题描述】：

我正在尝试编写一个脚本，允许在以用户位置为中心时弹出标记 - 最终在手机上显示为网页。

我已成功启用弹出标记。我还成功地使用 Mapbox API mapboxgl.GeolocateControl 和 HTML API geolocate.GetCurrentPosition 启用了地理定位。但是当我添加 geolocate 变量以便我同时拥有地理位置和弹出窗口时，弹出窗口停止工作。当我取出地理定位时，他们又开始工作了。反转工作流也有同样的问题。

我怀疑这与不同对象或变量的层次结构有关，但我似乎无法修复它，并且在普通论坛上的任何地方都没有看到这个问题。

有人有任何想法或解决方法吗？还是我遗漏了什么非常明显的东西？

我宁愿使用 Mapbox 脚本，因为位置标记是内置的。代码是：

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
    <title> My Map </title>
    <!DOCTYPE html>
    <html lang="en" dir="ltr">
    <head>
      <meta charset="utf-8">
        <title> My Map </title>

        <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>
             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>
          <script>

            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
            });

            // Initialize the geolocate control.
            var geolocate = new mapboxgl.GeolocateControl({
              positionOptions: {
              enableHighAccuracy: true
            },
              trackUserLocation: true
            });

            // Add the control to the map.
            map.addControl(geolocate);
            map.on('load', function() {
            geolocate.trigger();
            });

            var geojson = {
              type: 'FeatureCollection',
                features: [{
      type: 'Feature',
      properties: {
        time: '2020-06-19T09:47:13Z',
        title: 'Point 1',
        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: 'Point 2',
        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>

【问题讨论】：

我只是尝试使用您问题中提到的代码 sn-p 重现问题。地理定位按预期触发，并在地图上正确指出了我的位置，并且弹出窗口也有效。这是它的链接：stackblitz.com/edit/mapbox-popup-geoloaction 我所做的唯一更改是更改了标记样式并附加了背景颜色而不是标记图标。

标签： javascript geolocation javascript-objects mapbox mapbox-gl-js

【解决方案1】：

我还找到了另一种让它工作的方法：

<!DOCTYPE html>
<html>
<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%; }
          </style>
      </head>
      <body>
        <style>
          .mapboxgl-popup {
            max-width: 400px;
            font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
          }
        </style>
          <div id='map'></div>
          <script>

mapboxgl.accessToken = 'pk.eyJ1IjoiY3dpbG1vdHQiLCJhIjoiY2s2bWRjb2tiMG1xMjNqcDZkbGNjcjVraiJ9.2nNOYL23A1cfZSE4hdC9ew';
  var map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/cwilmott/ckbrpw01d29o31imqd2945ipn',
      center: [-122.259, 37.87], // starting position
      zoom: 15 // starting zoom
  });
// Initialize the geolocate control.
    var geolocate = new mapboxgl.GeolocateControl({
       positionOptions: {
           enableHighAccuracy: true
                     },
        trackUserLocation: true
                            });
// Add the control to the map.
  map.addControl(geolocate);

  map.on('load', function() {
    geolocate.trigger();
    map.addSource('places', {
          'type': 'geojson',
          'data': {
              'type': 'FeatureCollection',
              'features': [
                {
                                         'type': 'Feature',
                                         'properties': {
                                                'description': '<p>Example of a point.</p>',
                                                },
                                          'geometry': {
                                                'type': 'Point',
                                                'coordinates': [-2.219255, 53.457215]
                                                }
                                          },
                {
                                          'type': 'Feature',
                                          'properties': {
                                                'description': '<p>Example of a second point.</p>',
                                                },
                                          'geometry': {
                                                'type': 'Point',
                                                'coordinates': [-2.219371, 53.457349]
                                                }
                                          }

              ]
          }
      });
          // Add a layer showing the places.
      map.addLayer({
          'id': 'places',
          'type': 'symbol',
          'source': 'places',
          'layout': {
              'icon-image': 'marker-stroked-15',
              'icon-allow-overlap': true
          }
      });

      // When a click event occurs on a feature in the places layer, open a popup at the
      // location of the feature, with description HTML from its properties.
      map.on('click', 'places', function(e) {
          var coordinates = e.features[0].geometry.coordinates.slice();
          var description = e.features[0].properties.description;

          new mapboxgl.Popup()
              .setLngLat(coordinates)
              .setHTML(description)
              .addTo(map);
      });

  });
                </script>
              </body>
            </html>

【讨论】：