Question

我一直在努力让Leaflet（一个网络图谱API）工作几个小时。起初我犯了太多错误，现在我只是想让基本的例子工作。

这是我的代码（HTML和Javascript）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="./leaflet.js"></script>
        <link rel="stylesheet" type="text/css" href="./leaflet.css" />  
        <script type="text/javascript">
            function initmap(){
                var map1 = L.map('map');
                //map1.setView([38.642433, -90.255372]),9); //Thanks!
                map1.setView([38.642433, -90.255372],9);

                // add an OpenStreetMap tile layer
                L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
                        attribution: '&amp;copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                }).addTo(map1);
            }
        </script>
       <style>
            #map {
              position: absolute;
              top: 0;
              right: 0;
              left: 0;
              bottom: 0;
              top: 0;
              z-index: 0;
            }
    </style>
        <!-- Without this styling to set the map dimension, the tiles will get downloaded, but nothing will display on the map div!  Thank you choz for answering this question!  -->
    </head>

    <body onload="initmap()">
        <div id='map'></div>
    </body>
</html>

总结：我最初得到了＃34;在陈述之前＃34;和＆＃34;参考错误：initmap未定义＆＃34;。根据choz的第一条评论，通过删除地图定义中的额外括号来解决这个问题。然后我遇到了地图没有出现的问题，即使正在下载瓷砖。 Choz再次评论了地图所需的风格。我在上面列出了工作代码。

Answer 1

您可能忘记设置#map的维度。以下是一个非常基本的示例，说明如何使其正常运行。

// create a map in the "map" div, set the view to a given place and zoom
var map = L.map("map").setView([39.50, -98.35], 5);

// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

#map {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  top: 0;
  z-index: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<div id='map'></div>

传单 - 我似乎无法获得基本的例子

1 个答案: