Question

我正试图让标记显示在每个州的地图上。我没有显示标记。
这是我的geoJson：

{"type":"Feature","id":"01","properties":{"name":"Alabama","availability":0},"geometry":{"type":"Polygon","coordinates":[[[-87.359296,35.00118],[-85.606675,34.984749],[-85.431413,34.124869],[-85.184951,32.859696],[-85.069935,32.580372],[-84.960397,32.421541],[-85.004212,32.322956],[-84.889196,32.262709],[-85.058981,32.13674],[-85.053504,32.01077],[-85.141136,31.840985],[-85.042551,31.539753],[-85.113751,31.27686],[-85.004212,31.003013],[-85.497137,30.997536],[-87.600282,30.997536],[-87.633143,30.86609],[-87.408589,30.674397],[-87.446927,30.510088],[-87.37025,30.427934],[-87.518128,30.280057],[-87.655051,30.247195],[-87.90699,30.411504],[-87.934375,30.657966],[-88.011052,30.685351],[-88.10416,30.499135],[-88.137022,30.318396],[-88.394438,30.367688],[-88.471115,31.895754],[-88.241084,33.796253],[-88.098683,34.891641],[-88.202745,34.995703],[-87.359296,35.00118]]]}},

我正在使用它来获取标记：

geojson = L.geoJson(statesData, {
    style: style,
    pointToLayer: function (feature, latlng) {
                    return L.marker(latlng, {icon: myIcon});
    },
    onEachFeature: onEachFeature
}).addTo(map);
var myIcon = L.icon({
iconUrl: 'https://www.thekeithcorp.com/wp-content/themes/JointsWP-CSS- master/assets/images/4096-200.png',
iconSize: [32, 37],
iconAnchor: [16, 37],
popupAnchor: [0, -28]
});

我进行了测试，以确保可以使用以下方式添加图标：

var marker = L.marker([37.8, -96]).addTo(map).on('click', function () {
        sidebar.toggle();
    });

，并且有效。但是我无法在地图上显示任何图标，对我做错了任何想法吗？

我想要实现的是单击图标时，它会打开侧栏，列出该状态下的所有可用属性。如您所见，如果您单击使用以下命令添加的图标：

var marker = L.marker([37.8, -96]).addTo(map).on('click', function () {
        sidebar.toggle();
    });

这是地图的链接：https://www.thekeithcorp.com/interactive-map-1/

任何帮助将不胜感激！

Answer 1

Leaflet GeoJSON图层组工厂的

pointToLayer选项仅用于"Point"类型的Geometry，而在GeoJSON数据样本中，您只有"Polygon"类型的Geometry。

如果要将多边形（状态）转换为点，则应重构GeoJSON数据，或使用运行时库来计算多边形的“中心”（例如质心等）。

Answer 2

我通过添加一个新层并将标记放在这个新层上来工作，不得不手动添加无法从json文件中读取的经纬度坐标：

 var shelter1 = L.marker([34.1,-81.4],{icon: myIcon}).on('click', function () {
        sidebar.toggle();
    });
var shelter2 = L.marker([35.4,-79.3],{icon: myIcon}).on('click', function () {
        sidebar1.toggle(sidebar1);
    });
var shelterMarkers = new L.FeatureGroup();

shelterMarkers.addLayer(shelter1);
shelterMarkers.addLayer(shelter2);

Answer 3

您可以使用SheltersMarkers包括所有的传单标记，也可以仅使用运行时库来计算地图的中心以及放置标记的位置。

使用geoJson的传单标记

3 个答案: