2016-12-05 185 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