Panoramica
Questo tutorial ti mostra come visualizzare le informazioni di un file KML in una mappa e in una barra laterale Google. Per ulteriori informazioni sull'utilizzo dei file KML nelle mappe, leggi la guida ai livelli KML. Prova a fare clic su un indicatore sulla mappa di seguito per visualizzare i dati nella barra laterale.
La sezione seguente mostra l'intero codice necessario per creare la mappa e la barra laterale.
var map; var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml'; function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: new google.maps.LatLng(-19.257753, 146.823688), zoom: 2, mapTypeId: 'terrain' }); var kmlLayer = new google.maps.KmlLayer(src, { suppressInfoWindows: true, preserveViewport: false, map: map }); kmlLayer.addListener('click', function(event) { var content = event.featureData.infoWindowHtml; var testimonial = document.getElementById('capture'); testimonial.innerHTML = content; }); }
<div id="map"></div> <div id="capture"></div>
html, body { height: 370px; padding: 0; margin: 0; } #map { height: 360px; width: 300px; overflow: hidden; float: left; border: thin solid #333; } #capture { height: 360px; width: 480px; overflow: hidden; float: left; background-color: #ECECFB; border: thin solid #333; border-left: none; }
<!-- Replace the value of the key parameter with your own API key. --> <script async src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"> </script>
Fai una prova
Puoi sperimentare questo codice in JSFiddle facendo clic sull'icona <>
nell'angolo in alto a destra della finestra del codice.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>KML Click Capture Sample</title>
<style>
html, body {
height: 370px;
padding: 0;
margin: 0;
}
#map {
height: 360px;
width: 300px;
overflow: hidden;
float: left;
border: thin solid #333;
}
#capture {
height: 360px;
width: 480px;
overflow: hidden;
float: left;
background-color: #ECECFB;
border: thin solid #333;
border-left: none;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="capture"></div>
<script>
var map;
var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(-19.257753, 146.823688),
zoom: 2,
mapTypeId: 'terrain'
});
var kmlLayer = new google.maps.KmlLayer(src, {
suppressInfoWindows: true,
preserveViewport: false,
map: map
});
kmlLayer.addListener('click', function(event) {
var content = event.featureData.infoWindowHtml;
var testimonial = document.getElementById('capture');
testimonial.innerHTML = content;
});
}
</script>
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
Per iniziare
Queste sono le fasi della creazione della mappa e della barra laterale per questo tutorial:
Impostazione del file KML per l'importazione
Il file KML deve essere conforme allo standard KML. Per maggiori dettagli su questo standard, consulta il sito web dell'Open Geospatial Consortium. Anche la documentazione KML di Google descrive il linguaggio e offre sia una documentazione di riferimento sia una documentazione concettuale per gli sviluppatori.
Se stai imparando e non disponi di un file KML, puoi:
Per questo tutorial, utilizza il seguente file KML:
https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml
Trova un file KML sul web. Puoi utilizzare l'operatore di ricerca
filetype
di Google.Sostituisci
velodromes
con qualsiasi termine di ricerca oppure ometti del tutto il termine per trovare tutti i file KML.
Se stai creando un tuo file, il codice in questo esempio presuppone che:
- Hai ospitato pubblicamente il file su internet. Si tratta di un requisito per tutte le applicazioni che caricano un file KML in un
KMLLayer
, in modo che i server di Google possano trovare e recuperare i contenuti per visualizzarli sulla mappa. - Il file non si trova in una pagina protetta da password.
- Le funzionalità hanno i contenuti della finestra informativa. Puoi includere questi contenuti in un elemento
description
oppure includerli utilizzando un elementoExtendedData
e una sostituzione dell'entità (leggi di seguito per maggiori informazioni). Entrambi sono accessibili come proprietàinfoWindowHtml
della funzionalità.
Elementi ExtendedData
Il file KML in questo tutorial include informazioni sulle funzionalità in un elemento ExtendedData
. Per inserire queste informazioni nella descrizione della funzionalità, utilizza la sostituzione dell'entità, che è essenzialmente una variabile nel tag BalloonStyle
.
La tabella seguente spiega il codice di questa sezione.
Codice e descrizione | |
---|---|
|
Il file KML ha un singolo elemento Style applicato a tutti
i segnaposto. Questo elemento Style assegna un valore pari a #[video] all'elemento di testo
BalloonStyle .Il formato $[x] indica all'analizzatore sintattico KML di cercare un elemento Data denominato video e di utilizzarlo come testo del fumetto. |
|
Ogni Placemark contiene un
elemento ExtendedData , che include l'elemento Data .
Nota che ogni elemento Placemark ha un singolo elemento Data
con un attributo name di video .Il file di questo tutorial utilizza il video di YouTube incorporato come valore del testo del fumetto di ogni segnaposto. |
Per ulteriori informazioni sulla sostituzione delle entità, consulta il capitolo Aggiunta di dati personalizzati della documentazione KML.
Visualizzazione del livello KML
Inizializzazione della mappa
In questa tabella viene illustrato il codice di questa sezione.
Codice e descrizione | |
---|---|
|
Per visualizzare il file KML su una mappa, devi prima creare la mappa. Questo codice crea un nuovo oggetto Google Map, indica dove centrare e aumentare lo zoom e associa la mappa al div .Per ulteriori informazioni sulle nozioni di base della creazione di una mappa Google, consulta il tutorial sull'aggiunta di una mappa Google al tuo sito web. |
Creazione del livello KML
Questa tabella spiega il codice che crea un livello KML.
Codice e descrizione | |
---|---|
|
Crea un nuovo oggetto KML Layer per visualizzare il file KML. |
|
Il costruttore KML Layer imposta l'URL del file KML. Definisce inoltre le proprietà dell'oggetto KML Layer che:
|
Visualizzazione dei dati nella barra laterale
Questa sezione illustra le impostazioni che visualizzano i contenuti della finestra informativa nella barra laterale quando fai clic su un elemento nella mappa. A questo scopo:
- In ascolto di un evento di clic su una qualsiasi delle funzionalità del KML.
- Recupero dei dati dell'elemento selezionato.
- Scrittura dei dati sulla barra laterale.
Aggiunta di un listener di eventi
Google Maps offre una funzione per ascoltare e rispondere agli eventi dell'utente sulla mappa, come i clic o la pressione dei tasti della tastiera. Aggiunge un listener per questi
eventi click
.
La tabella seguente spiega il codice di questa sezione.
Codice e descrizione | |
---|---|
|
Il listener di eventi kmlLayer.addListener è incentrato su:
|
Scrittura dei dati delle funzionalità KML sulla barra laterale
In questa fase del tutorial hai acquisito gli eventi di clic sulle funzionalità del livello. Ora puoi impostare l'applicazione in modo che scriva i dati e il contenuto della finestra informativa della funzionalità sulla barra laterale.
La tabella seguente spiega il codice di questa sezione.
Codice e descrizione | |
---|---|
|
Scrivi i contenuti della finestra informativa in una variabile. |
|
Identifica il codice div in cui scrivere e sostituisce il codice HTML al suo interno
con i contenuti della funzionalità.
|
|
Queste righe di codice diventano la funzione all'interno dello strumento addListener .
|
Ora, ogni volta che fai clic su un elemento KML sulla mappa, la barra laterale si aggiorna mostrando i contenuti della finestra informativa.
Maggiori informazioni
Leggi ulteriori informazioni sull'utilizzo dei file KML.