Mapbox popup ReferenceError: features is not defined

Question

我正在尝试显示从文件加载的 geojson 数据的 3 个字段属性。数据被加载并添加到地图中。 markers/points 显示在 HTML 页面上。但是然后我点击 marker/point 没有任何反应。在 .setLngLat(features.geometry.coordinates) 左右，我得到一个 ReferenceError: features is not defined 我不确定我错过了什么或需要做什么才能让它在当前范围内可用。

如果有任何提示或提示可以解决此问题，我将不胜感激。

{% load static %}
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'/>
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.css' rel='stylesheet'/>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.myaccesstoken';

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [10.600, 55.900],
    zoom: 6.0,
    hash: true
});

map.on('load', function () {

    // Add a layer showing the places.
    map.addSource('markers', {
        type: 'geojson',
        data: '{% static 'json/architecture_map.geojson'%}'
    });

    map.addLayer({
        "id": "places",
        "source": "markers",
        "type": "circle",
        "paint": {
            "circle-radius": 5,
            "circle-color": "#fb05ff"
        }
    });

    map.on('click', function (e) {
        var f = map.queryRenderedFeatures(e.point, {layers: ['places']});
        if (f.length) {
            var feature = f[0];

            new mapboxgl.Popup()
                .setLngLat(features.geometry.coordinates)
                .setHTML(ProjectPopup(feature))
                .addTo(map);
            }
    });

    function ProjectPopup(feature){
        var html = '';
        html += "<div>";
        html += "<h2>" + feature.properties.project + "</h2>";
        html += "<p>" + feature.properties.image + "</p>";
        html += "<a>" + feature.properties.slug + "</a>";
        html += "</div>";
        return html;
    }

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

    // Change it back to a pointer when it leaves.
    map.on('mouseleave', 'places', function () {
        map.getCanvas().style.cursor = '';
    });

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

geojson 文件示例。

{
  "type": "FeatureCollection",
  "crs": {
    "type": "name",
    "properties": {
      "name": "EPSG:4326"
    }
  },
  "features": [
    {
      "type": "Feature",
      "properties": {
        "image": "project01.JPG",
        "project": "Project Title",
        "slug": "project-title"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          9.932241438432886,
          57.04649628721196
        ]
      }
    }
  ]
}

Answer 1

首先，您提供的 geojson 无效。您可以在此处检查您的 geojson：http://geojsonlint.com/

其次，您的 "not defined" 错误可能只是一个拼写错误。您这样定义变量：

var feature = f[0];

但是使用是这样的：

new mapboxgl.Popup()
    .setLngLat(features.geometry.coordinates)
    .setHTML(ProjectPopup(feature))
    .addTo(map);
}

您注意到 features 与您定义的名为 feature 的变量不同，因此导致未定义。

我纠正了你的错误。看这里： https://jsfiddle.net/andi_lo/xzrzzzsc

Mapbox popup ReferenceError: features is not defined

Mapbox popup ReferenceError: features is not defined

javascript

mapbox-gl-js