Question

在街道上单击后（应该显示带有属性的弹出窗口），弹出窗口显示“未知”。如何使弹出窗口显示属性？如果有人知道要更改什么或导致弹出窗口无法工作的原因，我将非常感谢！

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

Answer 1

您没有name作为功能的属性。只有街道和概率。因此，您正在调用一个不存在的属性。使用街道或随便定义属性名称。

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

或者只使用street属性。

.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。

Mapbox弹出窗口显示“未知”而不是属性

1 个答案: