时间戳

首页 > 解决方案 > Javascript 快速入门教程

javascript - Javascript 快速入门教程

问题描述

我一直在浏览传单快速入门指南，但没有取得多大成功。

我的代码如下：

 <link rel="stylesheet" 
href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
   integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
   crossorigin=""/>

<!-- Make sure you put this AFTER Leaflet's CSS -->
 <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
   integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
   crossorigin=""></script>

<div id="mapid"></div>

mapid { height: 180px; }

var mymap = L.map('mapid').setView([51.505, -0.09], 13);


 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/copyright">OpenStreetMap</a> 
contributors, Imagery © <a 
href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox/streets-v11',
    tileSize: 512,
    zoomOffset: -1,
    accessToken:'XXXX'
}).addTo(mymap);

#mapid 命令似乎有点不对劲。请问有人有什么建议吗？

标签： javascript

解决方案

快速入门指南示例说“在此示例中，我们将使用 Mapbox 的静态图块 API 中的 mapbox/streets-v11 图块（为了使用 Mapbox 中的图块，您还必须请求访问令牌）”。

没有它就行不通。

这是一个适用于带有 OpenStreetMap Tiles 的 Leaflet 的工作 JSFiddle，我认为这就是您要寻找的。

而且您的 CSS 缺少 #! 应该#mapid { // }

推荐阅读