尝试传单教程时我得到了一张损坏的地图

Question

我已遵循传单“入门”教程

但我的地图看起来已损坏，并且多边形不在地图上，如示例所示：

示例：

我的地图 html：

我的html

<html>

<head>
  <title></title>
  <link rel="stylesheet" href="elad_map.css" />
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
</head>

<body>
  <div id="map"></div>

  <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
  <script type="text/javascript" src="elad_map.js"></script>
</body>

</html>

document.onload = loadMap();

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


  L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
    maxZoom: 18,
    id: 'your.mapbox.project.id',
    accessToken: 'your.mapbox.public.access.token'
  }).addTo(map);


  var circle = L.circle([51.508, -0.11], 500, {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5
  }).addTo(map);

  var polygon = L.polygon([
    [51.509, -0.08],
    [51.503, -0.06],
    [51.51, -0.047]
  ]).addTo(map);

}

Answer 1

有一些因素会导致这种情况，它们都与 CSS 有关。请通过检查开发者工具中的网络选项卡来确保 Leaflet 的 CSS 已加载：

如果加载正确，那么您还有其他 CSS 规则 (elad_map.css)，这些规则会干扰 Leaflet 的 CSS 规则。

Answer 2

对于反应

这是您需要粘贴以导入传单 css 的内容 -> 导入“leaflet/dist/leaflet.css”；

尝试传单教程时我得到了一张损坏的地图

问题描述投票：0回答：2

2个回答

最新问题

尝试传单教程时我得到了一张损坏的地图

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2