Přidání značek HTML do mapy
V tomto článku se dozvíte, jak do mapy přidat vlastní kód HTML, například soubor obrázku, jako je značka HTML.
Poznámka:
Značky HTML se nepřipojí ke zdrojům dat. Místo toho jsou informace o pozici přidány přímo do značky a značka je přidána do map markers vlastnost, což je HtmlMarkerManager.
Důležité
Na rozdíl od většiny vrstev webového ovládacího prvku Azure Maps, které k vykreslování používají WebGL, používají značky HTML tradiční prvky DOM k vykreslování. Čím více značek HTML přidaných na stránku, tím více prvků DOM existují. Výkon může po přidání několika stovek značek HTML snížit. U větších datových sad zvažte buď seskupení dat, nebo použití vrstvy Symbol nebo Bublina.
Přidání značky HTML
HtmlMarker třída má výchozí styl. Značku můžete přizpůsobit nastavením možností barvy a textu značky. Výchozí styl třídy značek HTML je šablona SVG, která má {color} a {text} zástupný symbol. Nastavte vlastnosti barvy a textu v možnostech značky HTML pro rychlé přizpůsobení.
Následující kód vytvoří značku HTML a nastaví vlastnost barvy na DodgerBlue a text vlastnost na 10. K značce se připojí automaticky otevírané okno a click událost se použije k přepnutí viditelnosti překryvného okna.
//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();
});
Kompletní funkční ukázka přidání značky HTML najdete v tématu Jednoduchá značka HTML v ukázkách Azure Maps. Zdrojový kód pro tuto ukázku najdete v tématu Jednoduchý zdrojový kód značky HTML.
Vytvoření značky HTML šablony SVG
Výchozí značkou htmlContent HTML je šablona SVG s umístěním složek {color} a {text} v ní. Můžete vytvořit vlastní řetězce SVG a přidat do svG stejné zástupné symboly tak, aby nastavení color a text možnosti značky aktualizovaly tyto zástupné symboly ve vašem SVG.
Kompletní funkční ukázku vytvoření vlastní šablony SVG a použití s htmlmarkerovou třídou najdete v tématu Značky HTML s vlastní šablonou SVG v ukázkách Azure Maps. Při spuštění této ukázky vyberte tlačítko v levé horní části okna s popiskem Možnosti značky aktualizace a změňte color možnosti text ze šablony SVG použité v HtmlMarkeru. Zdrojový kód pro tuto ukázku najdete ve zdrojovém kódu html se zdrojovým kódem vlastní šablony SVG.
Tip
Webová sada SDK služby Azure Maps poskytuje několik šablon obrázků SVG, které lze použít se značkami HTML. Další informace najdete v tématu Jak používat dokument šablon obrázků .
Přidání značky HTML ve stylu CSS
Jednou z výhod značek HTML je, že existuje mnoho skvělých přizpůsobení, které lze dosáhnout pomocí šablon stylů CSS. V následující ukázce se obsah HtmlMarkeru skládá z HTML a CSS, které vytvářejí animovaný špendlík, který klesne na místo a impulsy.
//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]
}));
});
Šablony stylů 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>
Kompletní funkční ukázka použití šablon stylů CSS a HTML k vytvoření značky na mapě najdete v ukázkách Azure Maps se značkou HTML ve stylu CSS. Zdrojový kód pro tuto ukázku najdete ve zdrojovém kódu značky HTML ve stylu CSS.
Přetahování značek HTML
Tato ukázka ukazuje, jak vytvořit přetahování značky HTML. Značky HTML podporují drag, dragstarta dragend události.
Kompletní funkční ukázka použití šablon stylů CSS a HTML k vytvoření značky na mapě najdete v tématu Přetahování značky HTML v ukázkách Azure Maps. Zdrojový kód pro tuto ukázku naleznete v tématu Přetahování zdrojového kódu značky HTML.
Přidání událostí myši do značek HTML
Kompletní funkční ukázka přidání myši a přetažení událostí do značky HTML najdete v tématu Události značky HTML v ukázkách Azure Maps. Zdrojový kód pro tuto ukázku najdete ve zdrojovém kódu události značky HTML.
Další kroky
Další informace o třídách a metodách používaných v tomto článku:
Další příklady kódu pro přidání do map najdete v následujících článcích: