Vue 传单调整图标大小

Question

我有以下问题，我想在放大地图时使我的传单标记更大，并且 缩小时较小，因此它们不会重叠。我尝试了各种方法，例如 Zoomend，但它们根本没有改变图标大小有人可以帮忙吗？

这是我的代码片段：

<!--Map container-->
 <div>
    <div
      style="
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
      "
    >
      <div>
        <!--Map Container - ohne default zoom ctrl und attribution ctrl-->
        <l-map
          ref="map"
          :zoom="zoom"
          :min-zoom="0"
          :max-zoom="14"
          :crs="crs"
          :center="center"
          :options="{ zoomControl: false, attributionControl: false }"
          class="h-5/6 w-full mx-auto mt-10"
          style="height: 95vh; width: 95vw; margin-top: 10px; z-index: 10"
          @click="setLocation"
        >
          <!--Custom Map mit custom attribution-->
          <l-image-overlay
            :url="imageOverlayUrl"
            :bounds="bounds"
            :attribution="attribution"
          />

          <!--Markers - Creates one Marker with Popup for every Location - Shows the icon for the location if it exists-->
          <!--v-if: Filters the hall locations out, @click: shows the detail of selected shop-->
          <l-marker
            v-for="icon in locations"
            :lat-lng="icon"
            ref="iconMarkers"
            :key="icon"
            @click="
              () => {
                if (!standort) {
                  activeLocation = icon;
                }
              }
            "
          >
            <l-icon
              v-if="icon.icon_path"
              :iconUrl="icon.icon_path"
              :iconSize="markerSize"
            />

            <l-popup :content="icon.name"></l-popup>
          </l-marker>

          <!--Control Items - emit function changeFloor as change and parameter floor as floor to child component-->
          <Control
            @change="changeFloor"
            @save="saveLocation"
            @cancel="cancelLocation"
            @reset="deleteLocation"
            :floor="floor"
            :standort="standort"
          />

          <!--Standort-->
          <l-marker
            v-if="sMarker && sMarker.floor === floor"
            @dragend="setLocation"
            :lat-lng="sMarker.coordinates"
            :options="{ draggable: markerDrag }"
          >
            <l-icon :iconUrl="standortIcon" :iconSize="[70, 70]" />
          </l-marker>

          <!--faint Standort on the other floor-->
          <l-marker
            v-else-if="sMarker"
            :lat-lng="sMarker.coordinates"
            :options="{ opacity: 0.2 }"
          >
            <l-icon :iconUrl="standortIcon" :iconSize="[70, 70]" />
          </l-marker>

          <!--layers a pane over every shop to make them interactive-->
          <l-polygon
            v-if="!standort"
            v-for="shop in locations"
            :lat-lngs="evalS(shop.latlngs)"
            @click="
              () => {
                if (shop.name != '') {
                  activeLocation = shop;
                }
              }
            "
            @mouseover="shop.name != '' && panToShop(shop)"
            :stroke="false"
            :fillColor="'#9E9E9E'"
            :key="shop"
          >
          </l-polygon>

          <!--draws the shortest Path from the Users current location-->
          <l-polyline :lat-lngs="polyline"></l-polyline>
        </l-map>
      </div>
    </div>
  </div>
  <br />

正如已经提到的，我尝试了 Zoomend，但不知何故，这根本没有影响我的图标：

<l-marker
  v-for="icon in locations"
  :lat-lng="icon"
  ref="iconMarkers"
  :key="icon"
  @click="
    () => {
      activeLocation = icon;
    }
  "
>
  <l-icon
    v-if="icon.icon_path"
    :iconUrl="icon.icon_path"
    :iconSize="markerSize"
  />
  <l-popup v-if="!standort" :content="icon.name"></l-popup>
</l-marker>

const handleZoomEnd = () => {
  const currentZoom = map.value.leafletObject.getZoom();
  const minSize = 10;
  const maxSize = 100;
  const sizeFactor = (currentZoom - 10) / 10;
  const clampedFactor = Math.max(0, Math.min(sizeFactor, 1));
  const currentSize = minSize + clampedFactor * (maxSize - minSize);
  mapOptions.markerSize = [currentSize, currentSize];
};

Answer 1

您始终可以使用 LIcon 组件。您可以向其添加相同的图标，然后在

iconSize

属性中更改图标大小。