2016-01-28 17 views
2

我按照宣传单“get started”教程试图传单教程中,我得到一个破碎的地图

,但我的地图看起来打破,多边形无法在地图上像例如:

例如: enter image description here

我的地图HTML:

enter image description here

我的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); 
 

 
}

回答

3

有,将导致此的几件事情,他们都与CSS。如果它的正确装入比你有与传单的CSS规则干涉其他CSS规则到位(elad_map.css)

enter image description here

:请确保单页的CSS是由你的开发者工具检查networktab加载。