需要帮助添加弹出信息窗口到传单地图上的多边形

Need help adding popup info windows to polygons on Leaflet map

本文关键字：单地图 地图 多边形 添加 帮助 窗口 信息窗 信息      更新时间：2024-04-23

我正在尝试将弹出窗口添加到传单地图中，该地图显示不同矿区周围的缓冲区。当我点击缓冲区多边形时，我想得到矿名信息。这是我的代码，

<html>
<head>
  <title>Buffer Zones around Mine</title>
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
  <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
  <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
  <style>
    #map{ height: 100% }
  </style>
</head>
<body>
  <div id="map"></div>
  <script>
  var map = L.map('map').setView([45, -95], 4); //center map view

  var CartoDB_Positron = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
subdomains: 'abcd',
maxZoom: 19
}).addTo(map); 
// load JSON data
 $.getJSON("BufferPolygons.json",function(data){
    // add GeoJSON layer to the map once the file is loaded
    L.geoJson(data).addTo(map);
  });
//get popup info
var myLayer = L.geoJson(polygon, {
onEachFeature: yourOnEachFeatureFunction
}).addTo(map);
function yourOnEachFeatureFunction(feature, layer){
if (feature.properties.mine_name) {
    layer.bindPopup(feature.properties.mine_name);
    }
}
  </script>
</body>
</html>

我是传单和Javascript的新手，任何帮助都将不胜感激！

编辑：当在多边形和非多边形上滚动时，我的光标会发生变化，所以我相信信息是通过鼠标点击来检索的。由于没有显示任何内容，我假设这是HTML/CSS问题，也许我还没有创建任何窗口来查看这些信息？

显示的多边形是在$.getJSON回调函数中创建的多边形。当您在回调之外定义myLayer时，它似乎在寻找未定义的polygon对象，因此永远不会创建层及其弹出窗口。

有几种方法可以解决这个问题。最简单的方法就是为您在回调中创建的L.geoJson设置onEachFeature选项：

$.getJSON("BufferPolygons.json",function(data){
  L.geoJson(data, {
    onEachFeature: yourOnEachFeatureFunction
  }).addTo(map);
});

但是，这样做可能无法在其他地方引用该图层（例如，如果要将其添加到图层控件中），因为只有BufferPolygons.json完成加载后才能创建该图层。在大多数情况下，更好的选择是使用您想要的任何选项创建myLayer，但不包含任何数据，并使用addData方法在回调函数中填充此空层：

var myLayer = L.geoJson(false, {
  onEachFeature: yourOnEachFeatureFunction
}).addTo(map);
$.getJSON("BufferPolygons.json",function(data){
  myLayer.addData(data);
});
相关文章：