Panoramica
Questo tutorial illustra come visualizzare le informazioni di un file KML in una mappa e nella barra laterale di Google. Per ulteriori informazioni sull'utilizzo dei file KML in Maps, consulta 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 di seguito 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 fare esperimenti con questo codice in JSFiddle facendo clic sull'icona <>
nell'angolo in alto a destra della finestra di 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
Di seguito sono riportate le fasi per creare la mappa e la barra laterale per questo tutorial:
- Configurare il file KML
- Visualizzazione del livello KML
- Visualizzazione dei dati nella barra laterale
Configurare il file KML per l'importazione
Il file KML deve essere conforme allo standard KML. Per maggiori dettagli su questo standard, consulta il sito web del Open Geospatial Consortium. La documentazione KML di Google descrive anche il linguaggio e offre documentazione di riferimento e concettuale per gli sviluppatori.
Se stai ancora imparando e non hai un file KML, puoi:
Utilizza il seguente file KML per questo tutorial:
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 qualsiasi termine di ricerca con
velodromes
o ometti completamente il termine per trovare tutti i file KML.
Se crei il file, il codice in questo esempio presuppone che:
- Hai ospitato pubblicamente il file su internet. Questo è un requisito per tutte le applicazioni che caricano 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 su una pagina protetta da password.
- Le funzionalità hanno contenuti nella finestra informativa. Puoi includere questi contenuti in un elemento
description
o in un elementoExtendedData
e utilizzare la sostituzione delle entità (leggi di seguito per ulteriori informazioni). Entrambi sono accessibili come proprietàinfoWindowHtml
della funzionalità.
Elementi ExtendedData
Il file KML in questo tutorial include le informazioni sulle funzionalità in un elemento ExtendedData
. Per inserire queste informazioni nella descrizione della funzionalità, utilizza la sostituzione delle entità, che è essenzialmente una variabile nel tag BalloonStyle
.
La tabella seguente spiega il codice di questa sezione.
Codice e descrizione | |
---|---|
|
Il file KML contiene un singolo elemento Style applicato a tutti
i segnaposto. Questo elemento Style assegna un valore #[video] all'elemento di testo di BalloonStyle .Il formato $[x] indica al parser KML di cercare un elemento Data denominato video e di utilizzarlo come testo del riquadro informativo. |
|
Ogni Placemark contiene un elemento ExtendedData , che contiene l'elemento Data .
Tieni presente che ogni 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 della finestra popup di ogni segnaposto. |
Per saperne di più sulla sostituzione delle entità, consulta il capitolo Aggiunta di dati personalizzati della documentazione KML.
Visualizzazione di KMLLayer
Inizializzazione della mappa
Questa tabella spiega il codice di questa sezione.
Codice e descrizione | |
---|---|
|
Per visualizzare i dati KML su una mappa, devi prima creare la mappa. Questo codice crea un nuovo oggetto Google Maps, gli indica dove centrare e aumentare lo zoom e lo allega al div .Per scoprire di più sulle nozioni di base per la creazione di una mappa di Google, consulta il tutorial su come aggiungere una mappa di Google al tuo sito web. |
Creazione di KMLLayer
Questa tabella spiega il codice che crea un KMLLayer.
Codice e descrizione | |
---|---|
|
Crea un nuovo oggetto KMLLayer per visualizzare il KML. |
|
Il costruttore KMLLayer imposta l'URL del file KML. Inoltre, definisce proprietà per l'oggetto KMLLayer che svolgono le seguenti operazioni:
|
Visualizzazione dei dati nella barra laterale
Questa sezione spiega le impostazioni che mostrano i contenuti della finestra informativa nella barra laterale quando fai clic su un elemento sulla mappa. A questo scopo:
- Ascolto di un evento di clic su una delle funzionalità di KMLLayer.
- Acquisisci i dati della funzionalità su cui è stato fatto clic.
- Scrivere questi dati nella barra laterale.
Aggiunta di un listener di eventi
Google Maps fornisce una funzione per ascoltare e rispondere agli eventi utente sulla mappa, come clic o pressioni dei tasti della tastiera. Aggiunge un listener per questi eventiclick
.
La tabella seguente spiega il codice di questa sezione.
Codice e descrizione | |
---|---|
|
Il listener di eventi kmlLayer.addListener si concentra su quanto segue:
|
Scrittura dei dati delle funzionalità KML nella 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 della funzionalità e i contenuti della finestra informativa nella barra laterale.
La tabella seguente spiega il codice di questa sezione.
Codice e descrizione | |
---|---|
|
Scrive i contenuti della finestra informativa in una variabile. |
|
Identifica il div in cui scrivere e sostituisce l'HTML al suo interno
con i contenuti della funzionalità.
|
|
Queste righe di codice diventano la funzione all'interno del addListener
costruttore.
|
Ora, ogni volta che fai clic su un elemento KML sulla mappa, la barra laterale si aggiorna per visualizzare i contenuti della finestra informativa.
Ulteriori informazioni
Scopri di più sull'utilizzo dei file KML.