Menambahkan penanda HTML ke peta
Artikel ini memperlihatkan kepada Anda cara menambahkan HTML kustom seperti file gambar ke peta sebagai Penanda HTML.
Catatan
Penanda HTML tidak tersambung ke sumber data. Sebagai gantinya, informasi posisi ditambahkan langsung ke penanda dan penanda ditambahkan ke properti markers peta yang merupakan HtmlMarkerManager.
Penting
Tidak seperti kebanyakan lapisan dalam kontrol Azure Maps Web yang menggunakan WebGL untuk penyajian, Penanda HTML dan Popup menggunakan elemen DOM tradisional untuk penyajian. Dengan demikian, semakin banyak penanda HTML ditambahkan ke halaman, semakin banyak elemen DOM yang ada. Performa dapat menurun setelah menambahkan beberapa ratus penanda HTML atau popup. Untuk kumpulan data yang lebih besar, pertimbangkan untuk mengelompokkan data Anda atau menggunakan lapisan Simbol atau Gelembung.
Menambahkan penanda HTML
Kelas HtmlMarker memiliki gaya default. Anda bisa menyesuaikan penanda dengan mengatur opsi warna dan teks penanda. Gaya default kelas penanda HTML adalah templat SVG yang memiliki {color} dan {text} tempat penampung. Atur properti warna dan teks di opsi penanda HTML untuk kustomisasi cepat.
Kode berikut membuat penanda HTML, dan mengatur properti warna ke DodgerBlue dan properti teks ke 10. Popup dilampirkan ke penanda click dan kejadian digunakan untuk beralih visibilitas popup.
//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();
});
Untuk sampel kerja lengkap tentang cara menambahkan penanda HTML, lihat Penanda HTML Sederhana di Sampel Azure Maps. Untuk kode sumber untuk sampel ini, lihat Kode sumber Penanda HTML Sederhana.
Membuat penanda HTML bertemplat SVG
Default htmlContent penanda Html adalah templat SVG dengan folder tempat {color} dan {text} di dalamnya. Anda dapat membuat string SVG kustom dan menambahkan tempat penampung yang sama ini ke dalam SVG Anda sedemikian rupa sehingga mengatur color dan text opsi penanda memperbarui tempat penampung ini di SVG Anda.
Untuk sampel kerja lengkap tentang cara membuat templat SVG kustom dan menggunakannya dengan kelas HtmlMarker, lihat Penanda HTML dengan Templat SVG Kustom di Sampel Azure Maps. Saat menjalankan sampel ini, pilih tombol di sisi kiri atas jendela berlabel Perbarui Opsi Penanda untuk mengubah color opsi dan text dari templat SVG yang digunakan di HtmlMarker. Untuk kode sumber untuk sampel ini, lihat Penanda HTML dengan kode sumber Templat SVG Kustom.
Tip
Azure Maps web SDK menyediakan beberapa templat gambar SVG yang dapat digunakan dengan penanda HTML. Untuk informasi selengkapnya, lihat dokumen Cara menggunakan templat gambar.
Menambahkan penanda HTML bergaya CSS
Salah satu manfaat penanda HTML adalah ada banyak kustomisasi hebat yang dapat dicapai menggunakan CSS. Dalam sampel berikut, konten HtmlMarker terdiri dari HTML dan CSS yang membuat pin animasi yang turun ke tempat dan pulsa.
//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]
}));
});
The 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>
Untuk sampel kerja lengkap tentang cara menggunakan CSS dan HTML untuk membuat penanda di peta, lihat Penanda HTML Gaya CSS di Sampel Azure Maps. Untuk kode sumber untuk sampel ini, lihat Kode sumber Penanda HTML Bergaya CSS.
Penanda HTML yang dapat diseret
Contoh ini menunjukkan cara membuat penanda HTML yang dapat diseret. Penanda HTML mendukung drag, dragstart, dan dragend kejadian.
Untuk sampel kerja lengkap tentang cara menggunakan CSS dan HTML untuk membuat penanda di peta, lihat Penanda HTML yang Dapat Diseret di Sampel Azure Maps. Untuk kode sumber untuk sampel ini, lihat Kode sumber Penanda HTML yang Dapat Diseret.
Menambahkan kejadian mouse ke penanda HTML
Untuk sampel kerja lengkap tentang cara menambahkan mouse dan menyeret peristiwa ke penanda HTML, lihat Peristiwa Penanda HTML di Sampel Azure Maps. Untuk kode sumber untuk sampel ini, lihat Kode sumber peristiwa Penanda HTML.
Langkah berikutnya
Pelajari selengkapnya tentang kelas dan metode yang digunakan di artikel ini:
Untuk contoh kode lainnya untuk ditambahkan ke peta Anda, lihat artikel berikut: