Question

在CSS中使用Version 49.0.2623.110 m时，Chrome 100% Height中的渲染地图会显得模糊。

我正在使用LeafletJS库版本0.7.7。

我只支持缩放级别6,7 & 8，所以在缩放级别6，它看起来像这样：

如果我缩放到最大功能，即8，它看起来很模糊：

这是我的 index.html （实施来源）：

<!doctype html>
<html lang="en">
    <head>
        <title>Europe Zoom Level 6 & 7</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" type="text/css" href="leaflet.css">
        <style type="text/css">
            html { height: 100% }
            body { height: 100%; margin: 0; padding: 0;}
            #map { height: 100% }
        </style>
        <script type="text/javascript" src="leaflet.js"></script>
    </head>
    <body>
        <div id="map"></div>
        <script type="text/javascript">

            (function () {

                // Objects
                var isOnline = false;
                var map = L.map('map').setView([51.505, -0.09], 6);;

                // Generate tile layer url
                var tileLayerUrl = isOnline
                    ? 'http://{s}.tile.osm.org/{z}/{x}/{y}.png'
                    : 'MapQuest/{z}/{x}/{y}.jpg';

                // Set tile layer & add to map
                L.tileLayer(tileLayerUrl, {
                    minZoom : 6,
                    maxZoom : 8,
                    attribution: '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                })
                .addTo(map);

                // Test marker
                L.marker([51.5, -0.09]).addTo(map)
                    .bindPopup("<b>Hello world!</b><br />I am a <u>html</u> popup.");

            })();

        </script>
    </body>
</html>

这是否有解决方法？

另外，在Internet Explorer（11）中，它看起来非常清晰：

在Leaflet JS库中使用css中的100％高度渲染时，地图是blury

0 个答案: