Maps 如何动态调整地图上标记的大小

我的传单练习：通过修改iconSize选项（即不通过更改图标源），在放大或缩小时调整标记图标的大小

我试过这个：

function resize(e) {

  for (const marker of markers) {

    const newY = marker.options.icon.options.iconSize.y * (mymap.getZoom() / parameterInitZoom);
    const newX = marker.options.icon.options.iconSize.x * (mymap.getZoom() / parameterInitZoom);

    marker.setIcon(marker.options.icon.options.iconsize = [newX, newY]);
  }
}

mymap.on('zoomend', resize)

但我最终得到了：

t.icon.createIcon不是函数

我也看到了muliplyBy的方法，但找不到使其工作的方法。

---

怎么做？

我最后做了什么，而且效果很好：

let factor;
let markers = [];


//New class of icons
const MyIcon = L.Icon.extend({
  options: {
    iconSize: new L.Point(iconInitWidth, iconInitHeight) //Define your iconInitWidth and iconInitHeight before
  },
});

/*------------ Functions - Callbacks ----------------*/
//Small function to keep the factor up to date with the current zoom
function updateFactor() {
  let currentZoom = mymap.getZoom();
  factor = Math.pow(currentZoom / mymap.options.zoom, 5);
};
updateFactor();

//Create a new marker
function makeMarker(e) {
  const newX = Math.round(iconInitWidth * factor);
  const newY = newX * iconInitHeight / iconInitWidth;

  const newMarker = new L.Marker(new L.LatLng(e.latlng.lat, e.latlng.lng), {
    icon: new MyIcon({ iconSize: new L.Point(newX, newY) })
  }).addTo(mymap);

  markers[markers.length] = newMarker;
}

//Update the marker
function resize(e) {
  updateFactor();

  for (const marker of markers) {

    const newX = Math.round(iconInitWidth * factor);
    const newY = newX * iconInitHeight / iconInitWidth;

    marker.setIcon(new MyIcon({ iconSize: new L.Point(newX, newY) }));
  }
}

/*------------ Event listeners ----------------*/
mymap.addEventListener('click', makeMarker);
mymap.on('zoom', resize);

---

我终于做到了，而且效果很好：

let factor;
let markers = [];


//New class of icons
const MyIcon = L.Icon.extend({
  options: {
    iconSize: new L.Point(iconInitWidth, iconInitHeight) //Define your iconInitWidth and iconInitHeight before
  },
});

/*------------ Functions - Callbacks ----------------*/
//Small function to keep the factor up to date with the current zoom
function updateFactor() {
  let currentZoom = mymap.getZoom();
  factor = Math.pow(currentZoom / mymap.options.zoom, 5);
};
updateFactor();

//Create a new marker
function makeMarker(e) {
  const newX = Math.round(iconInitWidth * factor);
  const newY = newX * iconInitHeight / iconInitWidth;

  const newMarker = new L.Marker(new L.LatLng(e.latlng.lat, e.latlng.lng), {
    icon: new MyIcon({ iconSize: new L.Point(newX, newY) })
  }).addTo(mymap);

  markers[markers.length] = newMarker;
}

//Update the marker
function resize(e) {
  updateFactor();

  for (const marker of markers) {

    const newX = Math.round(iconInitWidth * factor);
    const newY = newX * iconInitHeight / iconInitWidth;

    marker.setIcon(new MyIcon({ iconSize: new L.Point(newX, newY) }));
  }
}

/*------------ Event listeners ----------------*/
mymap.addEventListener('click', makeMarker);
mymap.on('zoom', resize);