leaflet map shows up grey

问题

I'm starting leaflet.js with the quickstart but my map shows as grey... is there something I'm missing?

script.js:

var leafletMap = L.map('leafletMap').setView([51.505, -0.09], 13);

L.tileLayer('http://{s}.title.cloudmade.com/' + API_KEY + '/997/256/{z}/{x}/{y}.png', {
        attribution: 'Map data &copy; [...]',
        maxZoom: 18
}).addTo(leafletMap);

// marker
var marker = L.marker([51.5, -0.09]).addTo(leafletMap);

style.css:

#leafletMap {
height: 200px;
width: 200px;
}

index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My title</title>

    <link rel='stylesheet' href='css/bootstrap.css'>
    <link rel='stylesheet' href='css/leaflet.css'>
    <!--[if lte IE 8]>
        <link rel="stylesheet" href="leaflet.ie.css" />
    <![endif]-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <div id='leafletMap'></div>

<script src='js/libs/jquery-1.10.2.js'></script>
<script src='js/libs/bootstrap.js'></script>
<script src='js/libs/leaflet-src.js'></script>
<script src='js/config.js'></script>
<script src='js/script.js'></script>
</body>
</html>

Gives me:

回答1:

You need to implement the next section of the Quick Start Guide: you've initialized the map, but haven't added any tile layers to it, hence gray. So read on to the section beginning with Next we’ll add a tile layer to add to our map.

回答2:

Another thing to watch.

If you check the network tab and the map tiles are loading ok, yet the map still remains grey, it can be due to CSS contamination from your surrounding page.

In my case it was:

img {
    max-height: 100%;
}

Fixed by overriding with:

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

回答3:

Did you set a value for API_KEY in your code?

When I first ran the quickstart I was also confused why my map was grey, but I just realised I'd forgotten to retrieve an API access code (in my case, it was for Mapbox's service.)

Your URL line references API_KEY but you don't seem to be declaring it.

回答4:

For my ionic app this was resolved by setting trackResize: false in my map configuration. This was only happening on Android and called by a setTransform function in the Leaflet source code that's only called on Android.

Leaflet.map('map', { trackResize: false })

回答5:

The notes by elMarquis are useful if you've a problem when embedding inside something else. In my case I was using Gravity Forms on Wordpress, and they have image styles that have a wide scope, and are also set to important.

I'm still chasing the ultimate fix, but this should get you started if you have discovered the same issue:

<style>
    #map { position: inherit; top:0; bottom:0; right:0; left:0; width:100%; height:300px;}
    .gform_wrapper ul li.gfield.gfield_html .leaflet-container img { max-width: none!important;}
  </style>

回答6:

In my case I linked to my CSS file too late; at the bottom of my <body> tag.

So my map container; <div id="map"></div>, probably had a height of 0px at the time it loaded.

This means the map and its tiles tried to load into 0px height. I suspect this produces a small tile "buffer"; everything outside the buffer zone was grey.

To fix it, I referenced my CSS file in the <head>; both a good practice, and allowed the styles to apply before the map tried to load.

UPDATE

Don't forget to link the Leaflet CSS file (if you haven't already). Otherwise your tiles may appear "mismatched"/staggered.

<link rel="stylesheet" 
      href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
      integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="

crossorigin=""/>

来源：https://stackoverflow.com/questions/21405189/leaflet-map-shows-up-grey

标签

javascript

openstreetmap

leaflet