文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用弹出式窗口读取和显示GeoJson文件(宣传单)中的信息

问如何使用弹出式窗口读取和显示GeoJson文件(宣传单)中的信息
EN

Stack Overflow用户

提问于 2017-07-06 05:12:43

回答 1查看 354关注 0票数 0

我正在尝试为我的公司网站制作一张我公司拥有的步道的交互式地图。

我有标记显示在所有的线索，我希望他们显示一个弹出式的某些信息位于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文件非常大，所以我将把它附加到一个媒体文件下载中(连同超文本标记语言，以防万一你需要它)

Index.html

Trailheads GeoJson file

leaflet

gis

mapbox

javascript

html

回答 1

Stack Overflow用户

发布于 2017-07-06 16:34:01

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

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

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/44936075

复制

相似问题

问如何使用弹出式窗口读取和显示GeoJson文件(宣传单)中的信息
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用弹出式窗口读取和显示GeoJson文件(宣传单)中的信息EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用弹出式窗口读取和显示GeoJson文件(宣传单)中的信息
EN