代码之家 › 专栏 › 技术社区 › Elton Santos

如何将带有geojson的数字标记放在传单上

markers geojson leaflet json javascript

Elton Santos · 技术社区 · 6 年前

忘记一切,直到这里,我花了一个黎明的时间试图,看看我是否能继续前进,我会解释。我有一张地图,我需要列举1到15个标记。标记是正确的,问题是只标记了1到15次。这是我的json:

https://github.com/eltonsantos/analise_integrada/blob/master/path.js

简单的json,没什么

我的代码是:

var rotas = L.geoJSON(paradas, {
    onEachFeature: onEachFeature,
    pointToLayer: function(feature, latlng){
        console.log("Qtd: " + paradas.features.length)
        for(var i = 1; i <= paradas.features.length; i++){
            return L.marker(latlng, {
                icon: new L.AwesomeNumberMarkers({
                    number: i,
                    markerColor: 'purple'
                })
            })
        }
    }
}).addTo(map);

这段代码没有显示任何错误信息,它只显示我的所有分数都用1编号。我只是想根据json中的数量将它们从1编号到15

1 回复 | 直到 6 年前

ghybs 6 年前

这个 pointToLayer 函数选项被调用 每个标记一次 (按 "Point" 输入功能(精确)。你有一个 仅有一个的 latlng 每个函数调用的值。

因此,你会明白,试图循环到你的目标是毫无意义的 paradas.features.length .

此外,你的循环 return 在它的第一次迭代中,这就是为什么你只看到带有“1”枚举的图标。

既然你想要 L.geoJSON 每次调用 点图层 功能,只需将计数器固定在外部范围内:

var map = L.map('map');

// Hold the counter in an outer scope.
var i = 0;

var rotas = L.geoJSON(paradas, {
  //onEachFeature: onEachFeature,
  pointToLayer: function(feature, latlng) {
    console.log("Qtd: " + paradas.features.length)
    // Increment the counter.
    i += 1;
    // No need to loop.
    //for (var i = 1; i <= paradas.features.length; i++) {
      // Directly return the Marker for the given `latlng`
      return L.marker(latlng, {
        icon: new L.AwesomeNumberMarkers({
          number: i,
          markerColor: 'purple',
        }),
      });
    //}
  }
}).addTo(map);

map.fitBounds(rotas.getBounds());

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

<!-- Leaflet assets -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>

<!-- Leaflet.AwesomeNumberMarkers assets -->
<link rel="stylesheet" href="https://rawgit.com/Zahidul-Islam/Leaflet.awesome-numbered-marker/f7b5b594e9fc451cd006ee345220a86390eb1cf1/src/leaflet_awesome_number_markers.css" />
<script src="https://rawgit.com/Zahidul-Islam/Leaflet.awesome-numbered-marker/f7b5b594e9fc451cd006ee345220a86390eb1cf1/src/leaflet_awesome_number_markers.js"></script>

<!-- your GeoJSON data that defines the `paradas` global variable -->
<script src="https://rawgit.com/eltonsantos/analise_integrada/8b771bed3bd0bbfe1da3d02ce09b37630a637a0c/path.js"></script>

<div id="map" style="height: 180px"></div>