如何从 GeoJson 文件 (LEAFLET) 中读取和显示信息答案

【问题标题】：How to have a popup read and display information from a GeoJson file (LEAFLET)如何从 GeoJson 文件 (LEAFLET) 中读取和显示信息
【发布时间】：2017-07-05 21:12:42
【问题描述】：

我正在尝试为我的公司网站制作我公司拥有的路线的交互式地图。

我在所有路径上都显示了标记，我希望它们显示位于 GeoJson 文件内的某些信息的弹出窗口。

这是我的 HTML 代码

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Map</title>
  <!-- leaflet -->
  <link rel="stylesheet" href="lib/leaflet/leaflet.css" />
  <script src="lib/leaflet/leaflet.js"></script>
  <!--Mapbox -->
  <script src='https://api.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.js'></script>
  <link href='https://api.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.css' rel='stylesheet' />
  <script src="data/trailheads.js"></script>
  <style type="text/css">
    #map {
      height: 400px;
    }
  </style>



</head>

<body>
  <h1> Map </h1>


  <div id="map"></div>
  <script>
    var map = L.map('map').setView([43.8476, 18.3564], 13);
    var trailheadsLayer = L.geoJson(trailheads)
      .bindPopup()
      .addTo(map);
    map.fitBounds(trailheadsLayer.getBounds());
    L.tileLayer('https://api.mapbox.com/styles/v1/spatrick467/cj3yh6guz21os2so16xhs4son/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1Ijoic3BhdHJpY2s0NjciLCJhIjoiTVNaNG1OWSJ9.gq6641R9QJG5jWyO5tKIJw', {
      foo: 'bar'
    }).addTo(map);
  </script>

</body>

</html>

GeoJson 文件很大，所以我会将其附加到 mediafire 下载中（连同 HTML，以防万一您需要）

Index.html

Trailheads GeoJson file

【问题讨论】：

标签： javascript html leaflet gis mapbox

【解决方案1】：

假设 trailheads.js 是一个有效的 jsonp 文件，您应该为每个功能指定要显示的信息。如果您查看leaflet docs，您可以使用一个选项：'onEachFeature'。

var trailheadsLayer = L.geoJson(trailheads, {
  onEachFeature: function(layer, feature) {
    feature.bindPopup('popup content');
  }
});

您可以更改 geoJSON 属性的“弹出内容”，例如'feature.properties.name'。

【讨论】：

您好，谢谢您，但目前无法正常工作。你能再帮忙吗？太感谢了。我最近的回复有我当前的代码
var trailheadsLayer = L.geoJson(trailheads, { onEachFeature: function(trailheadsLayer, feature) { feature.bindPopup(feature.properties.name); } })
能否通过添加console.log(feature.properties.name); 来记录控制台中的属性名称？在“onEachFeature”函数中？
不，我收到此屏幕截图中的此错误imgur.com/a/tfnC2
编辑：在那张截图中，我不小心检查了 feature.name.properties，当我修复它时（feature.properties.name）我得到了一个类似的错误，无法读取未定义的属性“名称”跨度>