Всплывающее окно Mapbox отображает «неизвестно» вместо свойств - PullRequest
Новая
       25

Всплывающее окно Mapbox отображает «неизвестно» вместо свойств

0 голосов
/ 15 марта 2019

После нажатия на улицу (которая должна отображать всплывающее окно со свойствами), во всплывающем окне отображается «неизвестно».Что нужно сделать, чтобы всплывающее окно показывало свойства?Если кто-нибудь знает, что изменить или что может быть причиной того, что всплывающие окна не работают, я был бы очень благодарен! 

<div class="container" style="background-color:#F6F3F3">
  <div id='map' style='width: 100%; height: 900px;'></div>
  <script>
    mapboxgl.accessToken =

      var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/bisqpski/cjssto8kw77g11gk4rwur575q'
      });


    map.on('load', function() {
      // Add a layer showing the state polygons.
      map.addLayer({
        'id': 'kazimierz-tileset',
        'type': 'fill',
        'source': {
          "type": "Feature",
          "properties": {
            "Street": "Świętego Wawrzyńca",
            "Probability": "13%"
          },
          "geometry": {
            "coordinates": [
              [19.944511, 50.049316],
              [19.94617, 50.049681],
              [19.946307, 50.049719],
              [19.947699, 50.050025],
              [19.948851, 50.050282],
              [19.949689, 50.050456],
              [19.951076, 50.05076],
              [19.951401, 50.050831]
            ],
            "type": "LineString"
          }
        }
      });

      // When a click event occurs on a feature in the states layer, open a popup 
      at the
      // location of the click, with description HTML from its properties.
      map.on('click', 'kazimierz-tileset', function(e) {
        new mapboxgl.Popup()
          .setLngLat(e.lngLat)
          .setHTML(e.features[0].properties.name)
          .addTo(map);
      });

      // Change the cursor to a pointer when the mouse is over the states layer.
      map.on('mouseenter', 'kazimierz-tileset', function() {
        map.getCanvas().style.cursor = 'pointer';
      });

      // Change it back to a pointer when it leaves.
      map.on('mouseleave', 'kazimierz-tileset', function() {
        map.getCanvas().style.cursor = '';
      });
    });
  </script>
</div>

1 Ответ

0 голосов
/ 15 марта 2019

У вас нет name в качестве свойства для ваших функций.Только улица и вероятность.Итак, вы называете свойство, которое не существует.Используйте улицу или задайте имя свойства, как хотите. 

  "properties": {
    "Street": "Świętego Wawrzyńca",
    "Probability": "13%"
    "Name": "Your Name Here"
  },

Или просто используйте свойство улицы. 

.setHTML(e.features[0].properties.Street)

Фрагмент: 

<div class="container" style="background-color:#F6F3F3">
  <div id='map' style='width: 100%; height: 900px;'></div>
  <script>
    mapboxgl.accessToken =

      var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/bisqpski/cjssto8kw77g11gk4rwur575q'
      });


    map.on('load', function() {
      // Add a layer showing the state polygons.
      map.addLayer({
        'id': 'kazimierz-tileset',
        'type': 'fill',
        'source': {
          "type": "Feature",
          "properties": {
            "Street": "Świętego Wawrzyńca",
            "Probability": "13%"
          },
          "geometry": {
            "coordinates": [
              [19.944511, 50.049316],
              [19.94617, 50.049681],
              [19.946307, 50.049719],
              [19.947699, 50.050025],
              [19.948851, 50.050282],
              [19.949689, 50.050456],
              [19.951076, 50.05076],
              [19.951401, 50.050831]
            ],
            "type": "LineString"
          }
        }
      });

      // When a click event occurs on a feature in the states layer, open a popup 
      at the
      // location of the click, with description HTML from its properties.
      map.on('click', 'kazimierz-tileset', function(e) {
        new mapboxgl.Popup()
          .setLngLat(e.lngLat)
          .setHTML(e.features[0].properties.Street)
          .addTo(map);
      });

      // Change the cursor to a pointer when the mouse is over the states layer.
      map.on('mouseenter', 'kazimierz-tileset', function() {
        map.getCanvas().style.cursor = 'pointer';
      });

      // Change it back to a pointer when it leaves.
      map.on('mouseleave', 'kazimierz-tileset', function() {
        map.getCanvas().style.cursor = '';
      });
    });
  </script>
</div>

Наконец, в вашем примере вы добавляете слой.Но у вас уже есть этот слой с тем же именем в стиле, который вы создали.Вам не нужно добавлять его снова, иначе вы получите Error: Layer with id "kazimierz-tileset" already exists on this map, так как он будет естественным образом вытягиваться из стиля.Обязательно переименуйте слой или удалите addLayer.

...