Question

我试图在Javascript中学习Leaflet（我传统上使用R）。我的目标是创建一个我可以试验的简单地图。但是，我无法获得要渲染的地图。我的代码如下：

＆＃13;

// 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);

＆＃13;

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

＆＃13;

<!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>

＆＃13;

我是苹果公司让它在Stack的编辑器中运行但不是在创建传统文件时。

任何帮助都将不胜感激。

Answer 1

<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之后。

Answer 2

此代码段适用于我 - 但我必须禁用隐私獾，因为它阻止了unpkg.com。

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

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

HTH

＆＃13;

// 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);

＆＃13;

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

＆＃13;

<!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>

＆＃13;

传单地图不渲染 - Javascript

2 个答案: