Question

我正在关注leaftlet js入门教程。但是我无法加载地图。这是我的代码

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" />
         <script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
    </head>

    <style>
        #mapid { height: 180px; }
    </style>

    <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={accessToken}', {
    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: 'I have put public access token'
        }).addTo(mymap);
    </script>

    <body>

         <div style="margin-top:100px;margin-left:100px;height: 200px;width:200px" id="mapid"></div>
            <div style="height:200px;width:200px;background: red">
            </div>      
    </body>
</html>

在上面的代码中，id: 'your.mapbox.project.id'我无法找到这个。我发现只有公共访问令牌，这是地图没有加载的原因..任何帮助表示赞赏

Answer 1

要学习传单，您可以使用example的选项（查看来源）

<div id="mapid" style="width: 600px; height: 400px;"></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=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
        maxZoom: 18,
        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>',
        id: 'mapbox.streets'
    }).addTo(mymap);

</script>

稍后，当您更熟悉传单时，您可以打开mapbox帐户并了解他们正在添加的内容。

在传单的主页中提到mapbox的原因是因为传单的创建者现在正在为mapbox工作。

无法加载leaftlet地图

1 个答案: