API Карт Google для нескольких слоев KML

-1

Я не очень программист, но я учусь довольно быстро. Извините, если мой код некрасивый.API Карт Google для нескольких слоев KML

Я использую следующий код, чтобы потянуть .KMLs в стилизованную карту, используя API карт Google. Я получил это довольно хорошо и искал различные решения, но я изо всех сил пытаюсь называть сразу несколько слоев .KML.

Код, который я использовал ниже, был вытащен из нескольких источников, включая другие сообщения в стеке (я делал поиск перед публикацией), но он не совсем работает, поэтому я, должно быть, пропустил что-то с помощью ссылки на переменную слоев , Почему не отображаются мои слои .KML?

<script type="text/javascript"> 
    <style> 
     #map { 
     width: 100%; 
     height: 400px; 
     } 
</style> 
<script src="https://maps.googleapis.com/maps/api/js"></script> 
<script> 
/** 
* @fileoverview Sample showing capturing a KML file click 
* and displaying the contents in a side panel instead of 
* an InfoWindow 
*/ 
var map; 
var layers = []; 
     layers [0] = new google.maps.KmlLayer("http://www.pipeleaks.org/map_files/Line9AB.kml",{ 
     preserveViewport: false 
     }); 

     layers [1] = new google.maps.KmlLayer("http://www.pipeleaks.org/map_files/Line9FirstNations1.kml",{ 
     preserveViewport: false 
     }); 

     layers [2] = new google.maps.KmlLayer("http://www.pipeleaks.org/map_files/Line9FirstNations2.kml",{ 
     preserveViewport: false 
     }); 

/** 
* Initializes the map and calls the function that creates polylines. 
*/ 
function initialize() { 
    map = new google.maps.Map(document.getElementById('map'), { 
    center: new google.maps.LatLng(43.6424359, -79.37448849999998), 
    zoom: 2, 
    disableDefaultUI: true, 
    mapTypeId: google.maps.MapTypeId.ROAD 

    }); 
    loadKmlLayer(layers, map); 
} 

map.set('styles', [ 
    { 
    featureType: 'all', 
    elementType: 'geometry.fill', 
    stylers: [ 
    { visibility: 'off' }, 
    { color: '#000000' } 
    ] 
    }, 
    { 
    featureType: 'landscape.natural.terrain', 
    elementType: 'geometry.stroke', 
    stylers: [ 
    { visibility: 'on' }, 
    { color: '#FFFFFF' }, 
    { weight: 1 } 
    ] 
    }, 
    { 
    featureType: 'landscape.natural.terrain', 
    elementType: 'geometry.fill', 
    stylers: [ 
    { visibility: 'on' }, 
    { color: '#FFFFFF' } 
    ] 
    }, 
    { 
    featureType: 'landscape.natural.terrain', 
    stylers: [ 
     { visibility: 'on' }, 
     ] 
     }, 
{ 
    featureType: 'water', 
    elementType: 'geometry.fill', 
    stylers: [ 
    { visibility: 'on' }, 
    { color: '#365F91' } 
    ] 
    }, 
    { 
    featureType: 'road', 
    elementType: 'geometry', 
    stylers: [ 
     { visibility: 'on' } 
    ] 
    }, { 
    featureType: 'road', 
    elementType: 'labels', 
    stylers: [ 
     { visibility: 'on' } 
    ] 
    }, { 
    featureType: 'poi', 
    elementType: 'geometry', 
    stylers: [ 
    { visibility: 'off' } 
    ] 
}, { 
    elementType: 'labels.icon', 
    stylers: [ 
    { visibility: 'on' } 
    ] }, 
    { 
    elementType: 'labels.text.stroke', 
    stylers: [ 
    { visibility: 'on' } 
    ] }, 
    { 
    elementType: 'labels.text.fill', 
    stylers: [ 
    { visibility: 'on' } 
    ] } 

]); 
} 


/** 
* Adds a KMLLayer based on the URL passed. 
*/ 
function loadKmlLayer(layers, map) { 
    var kmlLayer = new google.maps.KmlLayer(layers, { 

    preserveViewport: false, 
    map: map}); 

} 


     google.maps.event.addDomListener(window, 'load', initialize); 
    </script>

источник

2015-12-25 Kevin Metcalf

Я играл немного с кодом

это работа ..

<!DOCTYPE html> 
    <html> 
     <head> 
     <style> 
     #map { 
     width: 100%; 
      height: 400px; 
     } 
     </style> 
<script src="https://maps.googleapis.com/maps/api/js"></script> 

    </head> 
    <body> 

     <div id="map" style="width: 1000px; height: 1000px;"></div> 


<script> 
/** 
* @fileoverview Sample showing capturing a KML file click 
* and displaying the contents in a side panel instead of 
* an InfoWindow 
*/ 
var map; 


/** 
* Initializes the map and calls the function that creates polylines. 
*/ 
function initialize() { 
    map = new google.maps.Map(document.getElementById('map'), { 
    center: new google.maps.LatLng(43.6424359, -79.37448849999998), 
    zoom: 2, 
    disableDefaultUI: true, 
    mapTypeId: google.maps.MapTypeId.ROAD 

    }); 

    var layers = []; 
     layers [0] = new google.maps.KmlLayer("http://www.pipeleaks.org/map_files/Line9AB.kml",{ 
     preserveViewport: false, 
     map: map 
     }); 

     layers [1] = new google.maps.KmlLayer("http://www.pipeleaks.org/map_files/Line9FirstNations1.kml",{ 
     preserveViewport: false, 
     map: map 
     }); 

     layers [2] = new google.maps.KmlLayer("http://www.pipeleaks.org/map_files/Line9FirstNations2.kml",{ 
     preserveViewport: false, 
     map: map 
     }); 


map.set('styles', [ 
    { 
    featureType: 'all', 
    elementType: 'geometry.fill', 
    stylers: [ 
    { visibility: 'off' }, 
    { color: '#000000' } 
    ] 
    }, 
    { 
    featureType: 'landscape.natural.terrain', 
    elementType: 'geometry.stroke', 
    stylers: [ 
    { visibility: 'on' }, 
    { color: '#FFFFFF' }, 
    { weight: 1 } 
    ] 
    }, 
    { 
    featureType: 'landscape.natural.terrain', 
    elementType: 'geometry.fill', 
    stylers: [ 
    { visibility: 'on' }, 
    { color: '#FFFFFF' } 
    ] 
    }, 
    { 
    featureType: 'landscape.natural.terrain', 
    stylers: [ 
     { visibility: 'on' }, 
     ] 
     }, 
{ 
    featureType: 'water', 
    elementType: 'geometry.fill', 
    stylers: [ 
    { visibility: 'on' }, 
    { color: '#365F91' } 
    ] 
    }, 
    { 
    featureType: 'road', 
    elementType: 'geometry', 
    stylers: [ 
     { visibility: 'on' } 
    ] 
    }, { 
    featureType: 'road', 
    elementType: 'labels', 
    stylers: [ 
     { visibility: 'on' } 
    ] 
    }, { 
    featureType: 'poi', 
    elementType: 'geometry', 
    stylers: [ 
    { visibility: 'off' } 
    ] 
}, { 
    elementType: 'labels.icon', 
    stylers: [ 
    { visibility: 'on' } 
    ] }, 
    { 
    elementType: 'labels.text.stroke', 
    stylers: [ 
    { visibility: 'on' } 
    ] }, 
    { 
    elementType: 'labels.text.fill', 
    stylers: [ 
    { visibility: 'on' } 
    ] } 

]); 

} 

    google.maps.event.addDomListener(window, 'load', initialize); 
    </script>

источник

2015-12-25 17:56:06 scaisEdge

API Карт Google для нескольких слоев KML

ответ

Смежные вопросы