إضافة علامات HTML إلى الخريطة

توضح لك هذه المقالة كيفية إضافة HTML مخصص مثل ملف صورة إلى الخريطة لتكون علامة HTML.

إشعار

لا تتصل علامات HTML بمصادر البيانات. بدلًا من ذلك، تتم إضافة معلومات الموضع مباشرةً إلى العلامة ويتم إضافة العلامة إلى خاصية markers الخرائط وهي HtmlMarkerManager.

هام

على عكس معظم الطبقات في عنصر تحكم Azure Maps Web الذي يستخدم WebGL للعرض، تستخدم علامات HTML عناصر DOM التقليدية للعرض. على هذا النحو، كلما أُضيفت علامات HTML إلى الصفحة، زادت عناصر DOM هناك. يمكن أن يتدهور الأداء بعد إضافة بضع مئات من علامات HTML. بالنسبة لمجموعات البيانات الأكبر حجمًا ضع في اعتبارك إما تجميع البيانات أو استخدام Symbol أو طبقة Bubble.

إضافة علامة HTML

تحتوي فئة HtmlMarker على نمط افتراضي. يمكنك تخصيص العلامة عن طريق تعيين خيارات لون العلامة ونصها. إن النمط الافتراضي لفئة علامة HTML هو قالب SVG الذي يحتوي على {color} و {text} عنصر نائب. قم بتعيين خصائص اللون والنص في خيارات علامة HTML للحصول على تخصيص سريع.

تنشئ التعليمات البرمجية التالية علامة HTML، وتعين خاصية اللون إلى DodgerBlue وخاصية النص إلى 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، راجع علامة HTML البسيطة في نماذج خرائط Azure. للحصول على التعليمات البرمجية المصدر لهذا النموذج، راجع التعليمات البرمجية المصدر لعلامة HTML البسيطة.

إنشاء علامة HTML بقالب SVG

إن htmlContent الافتراضي لعلامة Html هو قالب SVG به مجلدات الأماكن {color} و {text} بداخله. يمكنك إنشاء سلاسل SVG مخصصة وإضافة العناصر النائبة نفسها إلى SVG إذ يقوم بتعيين color وخيارات text لتحديث العلامة هذه العناصر النائبة في SVG.

للحصول على عينة عمل كاملة حول كيفية إنشاء قالب SVG مخصص واستخدامه مع فئة HtmlMarker، راجع HTML Marker مع قالب SVG مخصص في نماذج خرائط Azure. عند تشغيل هذا النموذج، حدد الزر في الجانب العلوي الأيسر من النافذة المسمى خيارات علامة التحديث لتغيير color خيارات و text من قالب SVG المستخدم في HtmlMarker. للحصول على التعليمات البرمجية المصدر لهذا النموذج، راجع HTML Marker مع التعليمات البرمجية المصدر لقالب SVG المخصص.

تلميح

يوفر Azure Maps web SDK العديد من قوالب صور SVG التي يمكن استخدامها مع علامات HTML. لمزيد من المعلومات، راجع مستند كيفية استخدام قوالب الصور.

إضافة علامة HTML بنمط CSS

تتمثل إحدى ميزات علامات 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]
    }));
});

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>

للحصول على عينة عمل كاملة حول كيفية استخدام CSS وHTML لإنشاء علامة على الخريطة، راجع CSS Styled HTML Marker في خرائط Azure Samples. للحصول على التعليمات البرمجية المصدر لهذا النموذج، راجع التعليمات البرمجية المصدر لعلامة HTML بنمط CSS.

علامات HTML القابلة للسحب

يوضح هذا النموذج كيفية جعل علامة HTML قابلة للسحب. تدعم علامات HTML أحداث drag، و dragstart، و dragend.

للحصول على عينة عمل كاملة حول كيفية استخدام CSS و HTML لإنشاء علامة على الخريطة، راجع علامة HTML القابلة للسحب في نماذج خرائط Azure. للحصول على التعليمات البرمجية المصدر لهذا النموذج، راجع التعليمات البرمجية المصدر لعلامة HTML القابلة للسحب.

إضافة أحداث الماوس إلى علامات HTML

للحصول على عينة عمل كاملة حول كيفية إضافة الماوس وسحب الأحداث إلى علامة HTML، راجع أحداث HTML Marker في خرائط Azure Samples. للحصول على التعليمات البرمجية المصدر لهذا النموذج، راجع التعليمات البرمجية المصدر لأحداث HTML Marker.

الخطوات التالية

تعرّف على المزيد حول الفئات والأساليب المُستخدمة في هذه المقالة:

HtmlMarker

HtmlMarkerOptions

HtmlMarkerManager

لمزيدٍ من أمثلة التعليمات البرمجية لإضافتها إلى الخرائط، راجع المقالات التالية:

كيفية استخدام قوالب الصور

إضافة طبقة رمز

إضافة طبقة فقاعة