在地圖中新增 HTML 標記

發行項
08/27/2024

本文說明如何在地圖中新增自訂 HTML (例如影像檔) 來作為 HTML 標記。

注意

HTML 標記不會連線至資料來源。相反地，位置資訊會直接新增至標記中，標記則會新增至地圖的 markers 屬性，即 HtmlMarkerManager。

重要

Azure 地圖服務 Web 控制項中的大多數圖層會使用 WebGL 來進行轉譯，HTML 標記則與之不同，會使用傳統的 DOM 元素來進行轉譯。因此，新增至頁面的 HTML 標記越多，其中的 DOM 項目就會越多。在新增幾百個 HTML 標記之後，效能就會下降。因此，對於規模較大的資料集，請考慮將資料叢集化，或使用「符號」或「泡泡」圖層。

新增 HTML 標記

HtmlMarker 類別具有預設樣式。若要自訂標記，請設定標記的色彩和文字選項。 HTML 標記類別的預設樣式是 SVG 範本，其具有 {color} 和 {text} 預留位置。若要快速自訂，請在 HTML 標記選項中設定 color 和 text 屬性。

下列程式碼會建立 HTML 標記，並將 color 屬性設為 DodgerBlue，以及將 text 屬性設定為 10。快顯視窗會附加至標記，並使用 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();
});

如需如何新增 HTML 標記的完整實用範例，請參閱 Azure 地圖服務範例中的簡單 HTML 標記。如需此範例的原始程式碼，請參閱簡單的 HTML 標記原始程式碼。

建立 SVG 樣板化 HTML 標記

HTML 標記的預設 htmlContent 是內含預留位置 {color} 和 {text} 的 SVG 範本。您可以建立自訂 SVG 字串，並在 SVG 中新增同樣的預留位置，讓標記的 color 和 text 選項的設定更新 SVG 中的這些預留位置。

如需如何建立自訂 SVG 範本並將其與 HtmlMarker 類別搭配使用的完整實用範例，請參閱 Azure 地圖服務範例中的 HTML 標記與自訂 SVG 範本。執行此範例時，請選取標示為 [更新標記選項] 視窗左上角的按鈕，以變更 HtmlMarker 中使用之 SVG 範本中的 color 和 text 選項。如需此範例的原始程式碼，請參閱使用自訂 SVG 範本原始程式碼的 HTML 標記。

提示

Azure 地圖服務 Web SDK 提供數個 SVG 影像範本，其可與 HTML 標籤搭配使用。如需詳細資訊，請參閱如何使用影像範本文件。

新增 CSS 樣式的 HTML 標記

HTML 標記的好處之一是您可以使用 CSS 來實現許多完美的自訂功能。在以下範例中，HtmlMarker 的內容是由 HTML 和 CSS 所組成，其會建立可就定位和有脈衝波的動畫圖釘。

//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]
    }));
});

這個 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>

如需如何使用 CSS 和 HTML 在地圖上建立標記的完整實用範例，請參閱 Azure 地圖服務範例中的採用 CSS 樣式的 HTML 標記。如需此範例的原始程式碼，請參閱採用 CSS 樣式的 HTML 標記原始程式碼。