Question

我无法在本地使用基本示例。我只能看到一个灰色方框，左上角有放大/缩小ui，右下角有属性。有灰色的地方应该有地图。

我的代码除了我从Mapbox获得的api-key之外。

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8' />
  <title></title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css">
  <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
  <style type='text/css'>
        #mapid {
                height: 180px;
              }

  </style>


</head>
<body>

  <div id="mapid" style="width: 600px; height: 400px; position: relative; outline:none;" class="leaflet-container leaflet-touch leaflet-fade-anim leaflet-grab leaflet-touch-drag leaflet-touch-zoom" tabindex="0">

  </div>
<script>
var mymap = L.map('mapid').setView([51.505, -0.09], 13);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=MYMAPBOXAPIKEY', {
    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: 'MYMAPBOXAPIKEY'
}).addTo(mymap);

L.marker([40.717192,-74.012042]).addTo(map)
    .bindPopup('The Borough of Manhattan Community College.')
    .openPopup();

</script>
</body>
</html>

Answer 1

我猜您还没有在地图集帐户中创建名为your.mapbox.project.id的项目。

尝试使用'mapbox.streets'

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=MYMAPBOXAPIKEY', {
    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: 'mapbox.streets'
}).addTo(mymap);

Answer 2

public void addMenu()
{
    LinearLayout layout = (LinearLayout) findViewById(R.id.backLayer);
    Button newButton = new Button(this);
    newButton.setText("menu "+menu);
    layout.addView(newButton);
    menu++;
}

ihave写了一个带有传单的项目，我的js文件在868行上有很多地图，向下看这里： https://github.com/VisProj/vis/blob/gh-pages/WebContent/js/heat.js

Leaflet.js快速入门基本示例演示

2 个答案: