Menambahkan penanda HTML ke peta

2025-04-21

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 menggunakan elemen DOM tradisional. Dengan demikian, semakin banyak penanda HTML ditambahkan ke halaman, semakin banyak elemen DOM yang ada. Performa dapat menurun setelah menambahkan beberapa ratus penanda HTML. 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 dari kelas penanda HTML adalah templat SVG yang memiliki tempat penampung {color} dan {text}. 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 dan click digunakan untuk mengalihkan 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 teks SVG kustom dan menambahkan placeholder yang sama ini ke dalam SVG Anda dengan cara mengatur opsi color dan text dari penanda untuk memperbarui placeholder 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 yang diberi label Perbarui Opsi Penanda untuk mengubah opsi color dan text dari templat SVG yang digunakan di HtmlMarker. Untuk kode sumber dari contoh ini, lihat kode sumber Penanda HTML dengan 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 yang 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 jatuh pada posisi dan berdetak.

//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 peristiwa drag, dragstart, dan dragend.

Untuk contoh kerja lengkap tentang cara menggunakan CSS dan HTML untuk membuat penanda di peta, lihat Penanda HTML yang Dapat Dipindahkan di Contoh Peta Azure. Untuk kode sumber sampel ini, lihat kode sumber Penanda HTML yang Dapat Diseret.

Menambahkan event 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.