javascript - 我的传单 map 中的 pointTolayer 出现问题

Question

我尝试在我的传单 map 中应用 pointTolayer 但它仍然抛出经典图标。代码中有错误。

$.getJSON("https://gist.githubusercontent.com/vassilaros/3791204ca226d5b236b4cd3106ef23cf/raw/PicnicSites.geojson",function(data){

    var baseline_person = L.icon({
          iconUrl: 'baseline_person.png',
          iconSize: [18,18]
    });

    // add GeoJSON layer to the map once the file is loaded
    L.geoJson(data, {
         pointTolayer: function(feture, latlng){
                    return L.marker(latlng,{icon: baseline_person});
         }
   }).addTo(map);
});

Answer 1

您的L.geoJson应分别为L.geoJSON和pointTolayer应为pointToLayer。

然后将 iconSize 和 iconAnchor 定义为 L.icon params

const customMarker = new L.icon({
  iconUrl: "marker.png",
  iconSize: [32, 32],
  iconAnchor: [10, 41],
});

axios
  .get(
    "https://gist.githubusercontent.com/vassilaros/3791204ca226d5b236b4cd3106ef23cf/raw/PicnicSites.geojson"
  )
  .then(response => {
    L.geoJSON(response.data, {
      pointToLayer: (feature, latlng) => {
        return L.marker(latlng, { icon: customMarker });
      }
    }).addTo(map);
  });

Demo