Přidání značek HTML do mapy
V tomto článku se dozvíte, jak přidat vlastní kód HTML, například soubor obrázku, do mapy jako značku HTML.
Poznámka
Značky HTML se nepřipojí ke zdrojům dat. Místo toho jsou informace o umístění přidány přímo do značky a značka je přidána do maps markers
vlastnost, což je HtmlMarkerManager.
Důležité
Na rozdíl od většiny vrstev v ovládacím prvku Azure Maps Web, které k vykreslování používají WebGL, používají značky HTML pro vykreslování tradiční prvky DOM. Čím více značek HTML se tedy přidá na stránku, tím více prvků DOM existuje. Po přidání několika stovek značek HTML se může snížit výkon. U větších datových sad zvažte buď seskupení dat, nebo použití vrstvy symbolů nebo bublin.
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čky HTML je šablona SVG, která má {color}
zástupný symbol a {text}
. 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 color na DodgerBlue
a vlastnost text na 10
. Ke značce je připojeno automaticky otevírané okno a click
událost se používá k přepnutí viditelnosti automaticky otevírané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í ukázku přidání značky HTML najdete v tématu Jednoduchá značka HTML v Azure Maps Ukázky. Zdrojový kód pro tuto ukázku najdete v tématu Zdrojový kód jednoduché značky HTML.
Vytvoření značky HTML s šablonou SVG
Výchozí hodnota htmlContent
značky 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 tyto zástupné symboly do svg tak, aby nastavení color
možností a text
značky aktualizovalo tyto zástupné symboly ve formátu SVG.
Kompletní funkční ukázku, jak vytvořit vlastní šablonu SVG a použít ji s třídou HtmlMarker, najdete v tématu Značky HTML s vlastní šablonou SVG v Azure Maps Ukázky. Při spuštění této ukázky vyberte tlačítko v levém horním rohu okna s názvem Možnosti značky aktualizace a změňte color
možnosti a text
ze šablony SVG použité v HtmlMarker. Zdrojový kód pro tuto ukázku najdete v tématu Značka HTML se zdrojovým kódem vlastní šablony SVG.
Tip
Sada AZURE MAPS Web SDK poskytuje několik šablon obrázků SVG, které lze použít se značkami HTML. Další informace najdete v dokumentu Jak používat šablony 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 HtmlMarker skládá z HTML a CSS, které vytvářejí animovaný špendlík, který padá na místo a pulsy.
//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ázku použití šablon stylů CSS a HTML k vytvoření značky na mapě najdete v tématu Značka HTML se stylem CSS v Azure Maps Ukázky. Zdrojový kód pro tuto ukázku najdete v tématu Zdrojový kód značky HTML ve stylu CSS.
Přetahovatelné značky HTML
Tato ukázka ukazuje, jak nastavit přetažení značky HTML. Značky HTML podporují drag
události , dragstart
a dragend
.
Kompletní funkční ukázku použití šablon stylů CSS a HTML k vytvoření značky na mapě najdete v tématu Přetahovatelná značka HTML v Azure Maps Ukázky. Zdrojový kód pro tuto ukázku najdete v tématu Zdrojový kód značky HTML s možnostmi přetažení.
Přidání událostí myši do značek HTML
Kompletní funkční ukázku přidání událostí myši a přetažení do značky HTML najdete v tématu Události značky HTML v Azure Maps Ukázky. Zdrojový kód pro tuto ukázku najdete v tématu Zdrojový kód událostí značky HTML.
Další kroky
Další informace o třídách a metodách použitý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:
Váš názor
https://aka.ms/ContentUserFeedback.
Připravujeme: V průběhu roku 2024 budeme postupně vyřazovat problémy z GitHub coby mechanismus zpětné vazby pro obsah a nahrazovat ho novým systémem zpětné vazby. Další informace naleznete v tématu:Odeslat a zobrazit názory pro