2016-12-05 51 views
-1

我想使用84MB KML文件在Google地图上显示KML图层,但Google地图不支持超过10MB的KML文件。Google地图KML图层文件大小限制问题

关于大小和复杂性的限制谷歌地图开发者链接KML呈现

https://developers.google.com/maps/documentation/javascript/kmllayer

请检查下面的代码是我用来显示在谷歌地图KML层。它与小KML文件很好地工作。

<!DOCTYPE html> 
<html> 
    <head> 
     <meta name="viewport" content="initial-scale=1.0"> 
     <meta charset="utf-8"> 
     <title>KML Layer</title> 
     <style> 
      #map { 
       height: 80%; 
      } 
      html, body { 
       height: 100%; 
       margin: 0; 
       padding: 0; 
      } 
     </style> 
    </head> 
    <body> 
     <div> 
      <a href="#" class="button" data-latLng="cta_red.kml">Red Fibre</a><br> 
      <a href="#" class="button" data-latLng="cta_green.kml">Green Fibre</a><br> 
      <a href="#" class="button" data-latLng="cta_blue.kml">Blue Fibre</a><br> 
     </div><br> 
     <div id="map"></div> 
     <script async defer 
       src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAWsZy8xWxT9yNBvYcO1dpxBzDttr7DqLA&sensor=false"> 
     </script> 
     <script src="https://code.jquery.com/jquery-2.2.4.min.js" 
    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
     <script> 
      jQuery(document).ready(function() { 
       var defaultu = 'cta.kml'; 
       initMapp(defaultu); 
       jQuery(document).on("click", ".button", function(e) { 
        e.preventDefault(); 
        var url = jQuery(this).attr("data-latLng"); 
        initMapp(url); 
       }); 

       function initMapp(url) { 
        var myLatLng = {lat: 41.876, lng: -87.624} 
        var map = new google.maps.Map(document.getElementById('map'), { 
         zoom: 17, 
         center: myLatLng 
        }); 
        var marker = new google.maps.Marker({ 
         position: myLatLng, 
         map: map, 
         title: 'Hello David!' 
        }); 
        var kmlurl = url; 

        var ctaLayer = new google.maps.KmlLayer({ 
         url: kmlurl, 
         map: map 
        }); 
       } 
      }); 
     </script> 
    </body> 
</html> 
+0

请在此提问的时候让自己尽可能明确。请参阅:http://stackoverflow.com/help/mcve – bosco

+0

我已更新我的问题。希望它会更清晰... – VishalChaturvedi

回答

2

一种选择是使用第三方KML解析器像geoxml3geoxml-v3。请注意,由于KML文件的大小和复杂性,可能会出现性能问题,加载需要很长时间。

var geoXml = null; 
var map = null; 
var myLatLng = null; 

function initialize() { 
    myLatLng = new google.maps.LatLng(37.422104808,-122.0838851); 

    var myOptions = { 
    zoom: 18, 
    center: new google.maps.LatLng(37.422104808,-122.0838851), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById("map_canvas"), 
    myOptions); 

    geoXml = new geoXML3.parser({ 
    map: map, 
    singleInfoWindow: true, 
    }); 
    geoXml.parse('cta.xml'); 
}; 

live example (with a small KML file)

+0

我更新我的问题,请让我知道如何在代码中使用它 – VishalChaturvedi

+0

我试过了,但是当我尝试加载84MB kml文件时,浏览器挂起。请帮助... – VishalChaturvedi

+0

这就是我所说的“性能问题”(以及Google为什么不让您加载大型KML文件)。 geoxml3没有大小限制,只需要花费时间在客户端(您的计算机/浏览器)上传输文件和内存以存储它。 – geocodezip