Google MAP KML图层文件大小限制问题

我想使用84MB kml文件在Google Map上显示KML层，但Google Map不支持超过10MB kml文件。

Google Map开发人员链接涉及KML渲染的大小和复杂性限制

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

请检查下面的代码，我用来在Google Map中显示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>

一个选项是使用第三方KML解析器，例如GeoxMl3或Geoxml-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示例（带有小kml文件）

相关内容

最新更新

热门标签：