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

我有一个奇怪的问题:我必须从单独的 KML 文件生成许多 KML 图层到单个 map 窗口。金额从几到不到五十不等。目前，当我以数组形式提供 1、4 或 15 个 KML 文件(作为 URI)时，我的代码会产生正确的行为。好的，基本上我知道我的代码可以正常运行，并且我的 KML 文件足够有效。

下面是我如何使用 23 个 KML URI 数组调用 map 初始化的示例:

但是，当我为代码提供一个包含十六 (16) 个或更多 KML URI 的数组时，就会出现问题。那么这些 KML 文件将永远不会在 map Canvas 上渲染。然而，任何地方都没有出现错误，而且:我知道 KML 文件“在那里”在 map 上。我怎么知道这个？正如您所看到的，我的代码为每个 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;
    }

}

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

最佳答案

我使用 Google 提供的默认 KML 图层取得的成功有限。我建议尝试 GeoXML3或geoxml-v3 (不是同一个项目)。我将 GeoXML3 用于 campus map并为我自己的教育创建了一个 hello world GeoXML3 map on Github .

关于javascript - 超过 15 个 KML 图层在基于 Google map API 的页面上将不可见，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10317013/

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

上一篇：javascript - 在 JavaScript 中预加载 SVG

下一篇：php - 我如何从 javascript 中的 img 标签中删除样式