Vue/cli4项目中Leaflet地图布局异常，是否因API与CSS版本不兼容？

Hey there! Let's break down your problem and figure out how to fix it.

First, to answer your question: Version mismatch between Leaflet JS and CSS could be a possible cause, but it's much more likely that the way you're importing the CSS is causing the layout issues.

Why your current setup isn't working #

• Scoped styles are limiting CSS reach
  You've put Leaflet's CSS inside a <style lang="scss" scoped> block. Scoped styles only apply to elements directly in your component's template—Leaflet dynamically generates a bunch of DOM elements (like map tiles, controls, markers) outside your component's scope, so those styles can't reach them. That's almost certainly why your map looks broken.
• Version mismatch (less likely, but worth checking)
  If you grabbed CSS from a different Leaflet version than the JS you're using, styles might not line up. But if you confirmed it's Leaflet 1.6.0's CSS, this is probably not the main issue.

Fixes to try (start with the first one—it's the most reliable) #

1. Import Leaflet properly via npm (recommended)

Skip copying CSS manually entirely—let npm handle version matching for you:

• Install Leaflet 1.6.0 in your project:

  npm install leaflet@1.6.0 --save
  

• In your project's entry file (usually main.js), import the CSS globally:

  import 'leaflet/dist/leaflet.css'
  

  This ensures the CSS applies to all dynamically generated Leaflet elements, and it's guaranteed to match your JS version. No more path tweaks needed either—Leaflet will load its default icons correctly.

2. If you must import CSS in the component

If you don't want global CSS, you have two options:

• Remove the scoped attribute from your <style> block (not ideal, since it can cause style conflicts elsewhere)
• Use Vue's deep selector to let styles penetrate scoping:

  <style lang="scss" scoped>
  ::v-deep .leaflet-container {
    /* Wrap all your Leaflet CSS inside this, or target specific Leaflet classes */
  }
  

  (Note: In Vue 3, use :deep() instead of ::v-deep)

3. Check your map container size

Leaflet needs a container with explicit width and height to render correctly. Make sure your #mapid has dimensions set:

#mapid {
  width: 100%;
  height: 400px; /* Adjust to your needs */
}

4. Verify icon paths (if you still go the manual CSS route)

If you stick with copying CSS, double-check that your icon paths are correct. Since you uploaded images to public/images, the path in CSS should be /images/marker-icon.png (leading slash to reference the root of your app).

Start with the npm import method—it's the cleanest way to avoid version mismatches and scoping issues. Most of the time, that alone will fix your map layout problems.

内容的提问来源于stack exchange，提问作者mstdmstd