传单地图不呈现 - Javascript

我正在尝试学习JavaScript传单（我传统上使用R）。我的目标是创建一个可以尝试的简单地图。但是，我无法获取地图进行渲染。我的代码如下：传单地图不呈现 - Javascript

// initialize the map 
 
var map = L.map('map').setView([42.35, -71.08], 13); 
 

 
// load a tile layer 
 
L.tileLayer('http://tiles.mapc.org/basemap/{z}/{x}/{y}.png', { 
 
    attribution: 'Tiles by <a href="http://mapc.org">MAPC</a>, Data by <a href="http://mass.gov/mgis">MassGIS</a>', 
 
    maxZoom: 17, 
 
    minZoom: 9 
 
}).addTo(map);

html { 
 
    height: 100%; 
 
} 
 
body { 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 
#map { 
 
    height: 600px; 
 
    width: 800px; 
 
    display: block; 
 
    margin: auto; 
 
    position: relative; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 

 
<head> 
 
    <link rel="stylesheet" type="text/css" href="css/index.css"> 
 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
 
    <script src="javascript/index.js" type="text/javascript"></script> 
 
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"> 
 
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> 
 
    <meta charset="utf-8"> 
 
    <title>Hello...</title> 
 
</head> 
 

 
<body> 
 

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

 
</body>

我的苹果让它在协议栈的编辑器中运行，但不是我创造的传统文件。

任何帮助，将不胜感激。

来源

2016-11-04 pol_guy

<link rel="stylesheet" type="text/css" href="css/index.css"> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script src="javascript/index.js" type="text/javascript"></script> 
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"> 
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

检查您的包含的顺序：您的地图实例化代码依赖于Leaflet，但包含在Leaflet之后。

来源

2016-11-04 19:58:03 tmcw

我对此表示赞赏。但是，没有任何工作。我已经测试过，看看除了css连接之外，javascript文件的源代码是否还在工作，一切都很好。我必须不断尝试。 –

这段代码适用于我 - 但我必须禁用Privacy Badger，因为它阻止了unpkg.com。

我还删除了引用非HTTP服务资源的<link>和<script>项。

实际的Javascript与您的问题相同。

HTH

// initialize the map 
 
var map = L.map('map').setView([42.35, -71.08], 13); 
 

 
// load a tile layer 
 
L.tileLayer('http://tiles.mapc.org/basemap/{z}/{x}/{y}.png', { 
 
    attribution: 'Tiles by <a href="http://mapc.org">MAPC</a>, Data by <a href="http://mass.gov/mgis">MassGIS</a>', 
 
    maxZoom: 17, 
 
    minZoom: 9 
 
}).addTo(map);

html { 
 
    height: 100%; 
 
} 
 
body { 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 
#map { 
 
    height: 600px; 
 
    width: 800px; 
 
    display: block; 
 
    margin: auto; 
 
    position: relative; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"> 
 
    <meta charset="utf-8"> 
 
    <title>Hello...</title> 
 
</head> 
 

 
<body> 
 

 
    <div id="map"></div> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
 
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> 
 

 
</body>

来源

2016-11-05 08:13:50

传单地图不呈现 - Javascript

回答

相关问题