Aggiungere indicatori HTML alla mappa
Questo articolo illustra come aggiungere un codice HTML personalizzato, ad esempio un file di immagine, alla mappa come indicatore HTML.
Nota
Gli indicatore HTML non si connettono alle origini dati. Le informazioni sulla posizione sono invece aggiunte direttamente all'indicatore, il quale viene aggiunto alla proprietà markers delle mappe, un HtmlMarkerManager.
Importante
A differenza della maggior parte dei livelli nel controllo Web di Mappe di Azure, dove per il rendering viene sfruttato WebGL, gli indicatori HTML usano elementi DOM tradizionali. Di conseguenza, più si aggiungono indicatori HTML a una pagina, più saranno disponibili elementi DOM. Le prestazioni possono calare dopo aver aggiunto alcune centinaia di indicatori HTML. Per set di dati più grandi, prendere in considerazione il clustering dei dati o l'uso di un livello per i simboli o per le bolle.
Aggiungere un indicatore HTML
La classe HtmlMarker ha uno stile predefinito. È possibile personalizzare l'indicatore configurandone le impostazioni di colore e testo. Lo stile predefinito della classe HtmlMarker è un modello SVG con un segnaposto {color} e {text}. Configurare le proprietà di colore e testo nelle opzioni dell'indicatore HTML per una rapida personalizzazione.
Il codice seguente crea un indicatore HTML e imposta la proprietà del colore su DodgerBlue e la proprietà del testo su 10. All'indicatore viene associato un popup e, per attivare la visibilità del popup, viene usato l'evento click.
//Create an HTML marker and add it to the map.
var marker = new atlas.HtmlMarker({
color: 'DodgerBlue',
text: '10',
position: [0, 0],
popup: new atlas.Popup({
content: '<div style="padding:10px">Hello World</div>',
pixelOffset: [0, -30]
})
});
map.markers.add(marker);
//Add a click event to toggle the popup.
map.events.add('click',marker, () => {
marker.togglePopup();
});
Per un esempio funzionante completo di come aggiungere un marcatore HTML, vedere Semplice marcatore HTML negli esempi di Mappe di Azure. Per il codice sorgente per questo esempio, vedere Codice sorgente del marcatore HTML semplice.
Creare un indicatore HTML basato su modello SVG
Il valore predefinito htmlContent di un indicatore Html è un modello di SVG che include i segnaposto {color} e {text}. È possibile creare stringhe SVG personalizzate e aggiungere questi segnaposto in SVG, in modo che l'impostazione delle opzioni color e text dell'indicatore aggiorni tali segnaposto in SVG.
Per un esempio completo di come creare un modello SVG personalizzato e usarlo con la classe HtmlMarker, vedere Marcatori HTML con modello SVG personalizzato negli esempi di Mappe di Azure. Quando si esegue questo esempio, selezionare il pulsante nel lato superiore sinistro della finestra con etichetta Opzioni indicatore di aggiornamento per modificare le opzioni color e text dal modello SVG usato in HtmlMarker. Per il codice sorgente per questo esempio, vedere Marcatore HTML con codice sorgente del modello SVG personalizzato.
Suggerimento
Azure Maps Web SDK offre vari modelli di immagini SVG che possono essere usati con indicatori HTML. Per altre informazioni, vedere il documento Come usare i modelli di immagine.
Aggiungere un indicatore HTML in stile CSS
Uno dei vantaggi degli indicatori HTML è la presenza di diverse eccezionali personalizzazioni che si possono ottenere sfruttando lo stile CSS. Nell'esempio seguente, il contenuto di HtmlMarker è costituito da HTML e CSS che creano un indicatore animato che cade sulla posizione ed emette un'onda.
//Wait until the map resources are ready.
map.events.add('ready', function () {
//Create a HTML marker and add it to the map.
map.markers.add(new atlas.HtmlMarker({
htmlContent: "<div><div class='pin bounce'></div><div class='pulse'></div></div>",
position: [-0.1406, 51.5018],
pixelOffset: [5, -18]
}));
});
Il CSS:
<style>
.pin {
width: 30px;
height: 30px;
border-radius: 50% 50% 50% 0;
background: #00cae9;
position: absolute;
transform: rotate(-45deg);
left: 50%;
top: 50%;
margin: -20px 0 0 -20px;
}
.pin:after {
content: "";
width: 14px;
height: 14px;
margin: 8px 0 0 8px;
background: #e6e6e6;
position: absolute;
border-radius: 50%;
}
.bounce {
animation-name: bounce;
animation-fill-mode: both;
animation-duration: 1s;
}
.pulse {
background: #d6d4d4;
border-radius: 50%;
height: 14px;
width: 14px;
position: absolute;
left: 50%;
top: 50%;
margin: 11px 0px 0px -12px;
transform: rotateX(55deg);
z-index: -2;
}
.pulse:after {
content: "";
border-radius: 50%;
height: 40px;
width: 40px;
position: absolute;
margin: -13px 0 0 -13px;
animation: pulsate 1s ease-out;
animation-iteration-count: infinite;
opacity: 0;
box-shadow: 0 0 1px 2px #00cae9;
animation-delay: 1.1s;
}
@keyframes pulsate {
0% {
transform: scale(0.1, 0.1);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: scale(1.2, 1.2);
opacity: 0;
}
}
@keyframes bounce {
0% {
opacity: 0;
transform: translateY(-2000px) rotate(-45deg);
}
60% {
opacity: 1;
transform: translateY(30px) rotate(-45deg);
}
80% {
transform: translateY(-10px) rotate(-45deg);
}
100% {
transform: translateY(0) rotate(-45deg);
}
}
</style>
Per un esempio completo di come usare CSS e HTML per creare un marcatore sulla mappa, vedere Marcatore HTML in stile CSS negli esempi di Mappe di Azure. Per il codice sorgente per questo esempio, vedere Codice sorgente dell'indicatore HTML in stile CSS.
Indicatori HTML trascinabili
Questo esempio mostra come rendere trascinabile un indicatore HTML. Gli indicatori HTML supportano gli eventi drag, dragstart e dragend.
Per un esempio completo di come usare CSS e HTML per creare un marcatore sulla mappa, vedere Marcatori HTML trascinabili negli esempi di Mappe di Azure. Per il codice sorgente per questo esempio, vedere Codice sorgente del marcatore HTML trascinabile.
Aggiungere eventi del mouse a indicatori HTML
Per un esempio funzionante completo di come aggiungere eventi del mouse e trascinare eventi a un marcatore HTML, vedere Eventi del marcatore HTML negli esempi di Mappe di Azure. Per il codice sorgente per questo campione, vedere il codice sorgente degli eventi HTML.
Passaggi successivi
Per altre informazioni sulle classi e sui metodi usati in questo articolo, vedere:
Per altri esempi di codice da aggiungere alle mappe, vedere gli articoli seguenti: