MapBoxポップアップReferenceError：機能が定義されていません

ファイルから読み込まれたgeojsonデータから3つのフィールドプロパティを表示しようとしています。データはマップに追加されてロードされます。マーカー/ポイントはHTMLページに表示されます。私はマーカー/ポイントをクリックして何も起こらない。 .setLngLat(features.geometry.coordinates)を取得しましたReferenceError: features is not defined現在のスコープで利用できるようにするために逃したことや忘れたことがわかりません。MapBoxポップアップReferenceError：機能が定義されていません

これを解決するためのヒントやヒントをいただければ幸いです。

{% 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 
     ] 
     } 
    } 
    ] 
}

出典

2017-07-04 swaTuesiSe

最初に提供されたgeojsonは有効なものではありません。あなたのgeojsonをここで確認することができます：http://geojsonlint.com/

第2に、「定義されていない」エラーが誤植かもしれません。あなたはこのようなあなたの変数を定義した：

var feature = f[0];

しかし、使用してはこのようなものです：

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

あなたはfeaturesは、このようにfeatureという名前の定義された変数と同じではないことに気づきます結果は未定義です。

私はあなたの間違いを訂正しました。ここをクリックしてください： https://jsfiddle.net/andi_lo/xzrzzzsc

出典

2017-07-04 14:16:04

アルフ、どのように恥ずかしい。私は何度も何度も何度も何度も何度も何度も何度も何度も何度も目をつぶっていました。そしてはい、私はgeojson "ライン1：古いスタイルのcrsのメンバーは推奨されていません"が無効であることがわかります。 Djangoのシリアライザを追加できないかどうかを確認します。 – swaTuesiSe

MapBoxポップアップReferenceError：機能が定義されていません

答えて

関連する問題