Javascript 如何从Google Drive-in传单加载KML？_Javascript_Leaflet_Openstreetmap_Kml

Javascript 如何从Google Drive-in传单加载KML？

javascript leaflet

Javascript 如何从Google Drive-in传单加载KML？,javascript,leaflet,openstreetmap,kml,Javascript,Leaflet,Openstreetmap,Kml,我试图显示一个KML文件，直接从谷歌硬盘加载，例如。https://drive.google.com/file/d/1Ngi_nLWEYt-aCzX0dGioa8bP3K-UbUNP/view?usp=sharing 在地图上使用传单。使用下面的代码，将触发此错误：怎么了 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </meta>

我试图显示一个KML文件，直接从谷歌硬盘加载，例如。https://drive.google.com/file/d/1Ngi_nLWEYt-aCzX0dGioa8bP3K-UbUNP/view?usp=sharing 在地图上使用传单。使用下面的代码，将触发此错误：

怎么了

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"> </meta>
        <title>Map</title>
        <link rel = "stylesheet" href = "lib/leaflet.css"/>
        <script src = "lib/leaflet.js"></script>
        <script src = "lib/L.KML.js"></script>
        <style type="text/css">
        #pozadina{background-image: linear-gradient(to right,lightblue, rgb(36, 112, 226));}
        #map{
            height: 720px;
            width: 86%;
            padding-left: 7%;
            padding-right: 7%;
            }
        #naslov{
            color: rgb(15, 15, 199);
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            text-align: center;
        }
        </style>
    </head>
    <body id="pozadina">
        <h1 id="naslov">Map</h1>
        <div id = "map"></div>

        <script>
            // Make basemap
            const map = new L.Map('map', { center: new L.LatLng(44.786568, 20.448921), zoom: 11 });
            const osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');

            map.addLayer(osm);

            // Load kml file
            fetch("https://cors-anywhere.herokuapp.com/" +"https://drive.google.com/file/d/1Ngi_nLWEYt-aCzX0dGioa8bP3K-UbUNP/view?usp=sharing")
                .then(res => res.text())
                .then(kmltext => {
                    
                    const parser = new DOMParser();
                    const kml = parser.parseFromString(kmltext, 'text/xml');
                    const track = new L.KML(kml);
                    map.addLayer(track);
                    console.log(track.getBounds());
                    map.fitBounds(track.getBounds()); //here is a problem
                });
                
        </script>
    </body>
</html>

您链接到的KML文件位于Google Drive上，您指向共享链接。共享链接加载文件的HTML页面，而不下载文件本身。您需要一个直接下载实际KML文件的URL。GoogleDrive界面不提供这种类型的直接链接，但有一些说明将向您展示构建这种链接所需的URL模式。或者，您可以在其他服务上重新托管KML文件，该服务提供了指向文件本身的简单直接链接。

欢迎使用SO！使用您正在构建的确切URL字符串获取的结果是什么？它似乎是格式不正确的XML—事实上，它看起来像一条纯文本错误消息，抱怨在获取中丢失。即使提供正确的标题，结果看起来也是HTML文档而不是KML。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"> </meta>
        <title>Map</title>
        <link rel = "stylesheet" href = "lib/leaflet.css"/>
        <script src = "lib/leaflet.js"></script>
        <script src = "lib/L.KML.js"></script>
        <style type="text/css">
        #pozadina{background-image: linear-gradient(to right,lightblue, rgb(36, 112, 226));}
        #map{
            height: 720px;
            width: 86%;
            padding-left: 7%;
            padding-right: 7%;
            }
        #naslov{
            color: rgb(15, 15, 199);
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            text-align: center;
        }
        </style>
    </head>
    <body id="pozadina">
        <h1 id="naslov">Map</h1>
        <div id = "map"></div>

        <script>
            // Make basemap
            const map = new L.Map('map', { center: new L.LatLng(44.786568, 20.448921), zoom: 11 });
            const osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');

            map.addLayer(osm);

            // Load kml file
            fetch("https://cors-anywhere.herokuapp.com/" +"https://drive.google.com/file/d/1Ngi_nLWEYt-aCzX0dGioa8bP3K-UbUNP/view?usp=sharing")
                .then(res => res.text())
                .then(kmltext => {
                    
                    const parser = new DOMParser();
                    const kml = parser.parseFromString(kmltext, 'text/xml');
                    const track = new L.KML(kml);
                    map.addLayer(track);
                    console.log(track.getBounds());
                    map.fitBounds(track.getBounds()); //here is a problem
                });
                
        </script>
    </body>
</html>