JavaScript-LeafletJS磁贴不只显示灰色-堆栈溢出

顺晟科技

2022-10-18 12:30:07

201

所以我正在做一个项目，其中包括使用LeafletJS.我只是从快速入门指南中复制了代码，但地图无法显示。除了地图DIV高度外，我没有更改任何内容，所以我对问题

所在感到困惑。

这是密码

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: 'your.mapbox.access.token'
}).addTo(mymap);

#mapid { height: 100vh; }

<代码><；！文档类型HTML>；<；HTML Lang=“ en ”>；<；头部>；<；元字符集=“ UTF-8 ”>；<；meta HTTP-equiv=“ X-ua-compatible ” content=“ ie=edge ”>；<；meta name=“ viewport ” content=“ width=device-width，initial-scale=1.0 ”>；<；标题>；传单测试<；/标题>；<；link rel=“ stylesheet ” href=“ UNK1@1.7.1/dist/leaflet.CSS ”integrity=“ sha512-xodzbntc5n17xt2attpue1hxjvmsvlvw9ocquklscc5cxdbqcmblashomas6/keqq/smzmz19scr4pszchsr7a==”crossorigin=“ ”/>；<；script SRC=“ UNK1@1.7.1/dist/传单.JS ”integrity=“ SHA512-XQOYMQMTK8LVDXXYG3NZ448HOEQIGLFQKJS1NOQV44CWNURBC8PKAOCXY20W0VLAXAVUEARIOBHIXZ5V3YNXWA==”crossorigin=“ ”>；<；/script>；<；link rel=“ stylesheet ” href=“ style.CSS ”>；<；/标题>；<；身体>；<；DIV ID=“ mapid ”>；<；/DIV>；<；script SRC=“ script.JS ”>；<；/script>；<；/正文>；<；/HTML>；

顺晟科技：

你需要一个令牌<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Leaflet Test</title> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" /> <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script> <link rel="stylesheet" href="style.css"> </head> <body> <div id="mapid"></div> <script src="script.js"></script> </body> </html>你可以通过mapbox.com获得它。

否则，您可以使用其他提供程序：https：//leaflet-extras.github.io/leaflet-providers/preview/。

例如accessToken: 'your.mapbox.access.token'：

openstreetmap

上一篇：HTML-有没有使用&#39；查询& 下一篇：HTML-所有显示的页脚位置应相同-

网站建设

Html

JavaScript-LeafletJS磁贴不只显示灰色-堆栈溢出