傳單地圖未渲染-Javascript
[英]Leaflet Map Not Rendering - Javascript
問題描述
我試圖學習Javascript中的Leaflet（我傳統上使用R）。 我的目標是創建一個可以試用的簡單地圖。 但是，我無法繪制地圖。 我的代碼如下：
// 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/leaflet@1.0.1/dist/leaflet.css"> <script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script> <meta charset="utf-8"> <title>Hello...</title> </head> <body> <div id="map"></div> </body>
我很想讓它在Stack的編輯器中運行，但是當我創建傳統文件時卻沒有。
任何幫助，將不勝感激。
2 個解決方案
解決方案1
2 2016-11-04 19:58:03
<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/leaflet@1.0.1/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
檢查包含順序：您的地圖實例化代碼依賴Leaflet，但包含在Leaflet之后。
解決方案2
1 2016-11-05 08:13:50
該代碼段對我unpkg.com -但是我必須禁用Privacy Badger，因為它阻止了unpkg.com 。
我還刪除了引用非HTTP服務資源的<link>和<script>項目。
實際的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> <html> <head> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/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/leaflet@1.0.1/dist/leaflet.js"></script> </body>
Vue Leaflet 不渲染地圖
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.