1

为什么我无法在画布上获取地图我如何访问 API 的令牌在此处输入图像描述

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=\,initial-scale=1.0"/>
        <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
   crossorigin=""/>
   <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
   integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
   crossorigin="">
   </script>
   <style>
       #mapid {
     height: 180px;
    }
   </style>
   <title>corona stats</title>
   </head>
   <body>
       <h1>where is ISS?</h1>
       <p>
           latitude:<span id="lat"></span><br/>
           longitude:<span id="lon"></span><br/>
           confirmed:<span id="con"></span>  
       </p>
       <div id="mapid">
       <script>
          var mymap = L.map('mapid').setView([51.505, -0.09], 13);
        
        var marker = L.marker([51.5, -0.09]).addTo(mymap);
        L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 18,
        id: 'mapbox/streets-v11',
        tileSize: 512,
        zoomOffset: -1,
        accessToken: 'your.mapbox.access.token'
}).addTo(mymap);
        var circle = L.circle([51.508, -0.11], {
        color: 'red',
        fillColor: '#f03',
        fillOpacity: 0.5,
        radius: 500
        }).addTo(mymap);
        marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
        circle.bindPopup("I am a circle.");
        polygon.bindPopup("I am a polygon.");
        function onMapClick(e) {
        alert("You clicked the map at " + e.latlng);
        }
        mymap.on('click', onMapClick);
        var popup = L.popup();
        function onMapClick(e) {
        popup
        .setLatLng(e.latlng)
        .setContent("You clicked the map at " + e.latlng.toString())
        .openOn(mymap);
        }   
        mymap.on('click', onMapClick); 
       </script>
       </div>
   </body>
</html>
我正在尝试让地图出现在网站上，但我尝试创建访问令牌，但在使用访问令牌后仍然无法看到地图 网站显示没有地图

4

1 回答 1

0

您必须在 Leaflet.com 网站上申请一个 {accessToken}。创建一个用户帐户。选择令牌 i 菜单，您就有了第一个令牌。通过复制/粘贴插入 access_token 而不是 {accessToken} access_token=YOU_NEW_TOKEN。备注：没有 {}

于 2021-03-17T10:05:38.043 回答