javascript - 超过 15 个 KML 层在基于 Google Maps API 的页面上不可见

Question

我有这个奇怪的问题：我必须从单独的 KML 文件生成许多 KML 图层到单个地图窗口。金额在一对夫妇和不到五十个之间变化。目前，当我将 1、4 或 15 个 KML 文件（作为 URI）作为数组提供时，我的代码正在产生正确的行为。好的，所以基本上我知道我的代码可以正常工作并且我的 KML 文件足够有效。

这是我如何使用 23 个 KML URI 的数组调用地图初始化的示例：

但是，当我为我的代码提供一个包含十六 (16) 个或更多 KML URI 的数组时，就会出现问题。然后这些 KML 文件将永远不会在地图画布上呈现。但是，任何地方都没有出现错误，而且：我知道 KML 文件在地图上“存在”。我怎么知道这个？正如您所看到的，我的代码为每个 KML 文件生成了一个 InfoWindow，并且因为我知道一些 KML 文件的位置，所以我可以点击它，即使它们不可见或尚未呈现，信息窗口出现。正如预期的那样。

这是我的 map_display.js 的完整内容，其中包含调用的函数 initmap()。

function initmap(urls){
    // Creating an option object for the map
    var myLatlng = new google.maps.LatLng(63.349501, 26.817627);
    var options = {
        zoom: 6,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    // Initializing the map
    var map = new google.maps.Map(document.getElementById('map_canvas'), options);

    if(urls != null) {
        for(var i=0;i<urls.length;i++) {
            var url = urls[i];
            url = url+"?dummy="+(new Date()).getTime();
            var ctaLayer = createKML(url);
            ctaLayer.setMap(map);
        }
    }

    function createKML(url){

        var ctaLayer = new google.maps.KmlLayer(url, {suppressInfoWindows: true, preserveViewport: true});

        // Creating a correct reference for project edit URL
        var editUrl = urls[i];
        var s1 = editUrl.indexOf("project");
        s1 = s1+7;
        var s2 = editUrl.indexOf(".kml");
        editUrl = editUrl.substring(s1, s2);

        var baseUrl = getbaseUrl();

        var infoItems = new Array();
        infoItems = getInfo(editUrl);

        editUrl = '<b>' + infoItems[1] + '</b><br />' + infoItems[0] + '<br /><br /><a href="' + baseUrl + '/frontend/viewproject/' + editUrl + '">Katso projektin tiedot</a>';
        // Creating an InfoWindow object
        var infowindow = new google.maps.InfoWindow({ content: editUrl });

        google.maps.event.addListener(ctaLayer, 'click', function(kmlEvent) {
            var clickPos = kmlEvent.latLng;
            var posX = new google.maps.LatLng(clickPos.lat(), clickPos.lng());

            infowindow.close();
            infowindow.setPosition(posX);
            infowindow.open(map);

        });

        return ctaLayer;
    }

    function getbaseUrl(){

        var baseUrl = "https://" + window.location.hostname;
        var firstpath = window.location.pathname;
        var first_slash = firstpath.indexOf("/", 1);
        firstpath = firstpath.substring(0, first_slash);
        baseUrl = baseUrl + firstpath;

        return baseUrl;
    }

    function getInfo(pid){

        var jsoninfo = new Array();

        var xmlhttp;
        if (window.XMLHttpRequest)
        {
            xmlhttp=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }

        var json_location = getbaseUrl() + '/frontend/project_json/' + pid;

        xmlhttp.open("GET",json_location,false);
        xmlhttp.send();

        var json_answer = eval('(' + xmlhttp.responseText + ')');

        jsoninfo[0] = json_answer["projectName"];
        jsoninfo[1] = json_answer["builder"];

        return jsoninfo;
    }

}

有人可以帮助我吗？抱歉，我无法提供实时系统作为参考，因为它是受密码保护等的较大页面的一部分。

score 3 · Accepted Answer

我使用 Google 提供的默认 KML 层的成功有限。我建议尝试GeoXML3或geoxml-v3（不是同一个项目）。我将 GeoXML3 用于校园地图，并为我自己的教育在 Github 上创建了一个 hello world GeoXML3 地图。

score 1 · Accepted Answer

kml 层的工作方式是 thr kml 的 URL 包含在每个图块的 url 中。当您添加如此多的 kml 图层时，切片 url 的长度会超过 2048 个字符，这是 URL 的限制。您可以尝试缩短 kml 图层的 URL。

score 1 · Accepted Answer

来自谷歌文档：

可以在单个 Google 地图上显示的 KML 图层的数量是有限制的。如果超出此限制，则不会显示任何图层。该限制基于传递给 KMLLayer 类的所有 URL 的总长度，因此会因应用程序而异；平均而言，您应该能够加载 10 到 20 层而不会达到限制。

javascript - 超过 15 个 KML 层在基于 Google Maps API 的页面上不可见

3 回答 3

Related

Reference