Angular-Leaflet-Directive - Issue where the map is technically rendering, but none of its tiles appear .

问题

. . . because the tiles are absolutely positioned within parent containers whose heights are equal to zero.

Here is the directive: https://github.com/tombatossals/angular-leaflet-directive

I'm uncertain as to the appropriate channel by which to seek assistance since I'm dealing with a relatively small library. I'm pretty sure I'm not doing anything wrong, since the gray "canvas" with zoom controls for the map is rendering and the map's tiles are being loaded (but without actually being displayed). I can force the tiles to appear by assigning a height to their parent element, but obviously that's not how Leaflet is supposed to work.

I realize this may not be the best place to ask for help on this sort of thing, so I'm wondering whether, if nothing else, someone might know how I might best go about seeking assistance.

回答1:

This selector in my CSS was the problem:

img {
  max-height: 100%;
  max-width: 100%;
}

The solution was simply to allow images to render as they normally would within the leaflet map 's container:

.leaflet-container img {
  max-height: none;
  max-width: none;
}

回答2:

Hard to tell, without seeing any of your project's code. But it sounds like you need to apply a height to you #map container element. Check out one of the leaflet tutorials for possible css examples.

Something like the following would work:

#map{ height: 600px; width: 100% }

or

#map{
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

来源：https://stackoverflow.com/questions/27610078/angular-leaflet-directive-issue-where-the-map-is-technically-rendering-but-no