دریافت کلید نسخه نمایشی Maps: با «کلید نسخه نمایشی Maps» برخی‌از ویژگی‌های Maps JavaScript API و «کیت میانای کاربر جاها» را بدون هزینه امتحان کنید—اطلاعات صورت‌حساب لازم نیست.

‫Google برای ترجمه محتوا به زبان ترجیحی شما از فناوری هوشواره استفاده می‌کند. ترجمه‌های هوشواره‌ای ممکن است اشتباه داشته باشند.

سفارشی‌سازی نشانگر پایه

پلاتفرم را انتخاب کنید: Android iOS JavaScript

مشاهده کد منبع نمونه کامل

این مثال نشان می‌دهد که چگونه نشانگرها را به روش‌های زیر سفارشی‌سازی کنید: افزودن نوشتار عنوان، مقیاس‌بندی نشانگر، تغییر رنگ پس‌زمینه، تغییر رنگ حاشیه، تغییر رنگ نویسه، پنهان کردن نویسه.

TypeScript

const mapElement = document.querySelector('gmp-map')!;

async function init() {
    // Request needed libraries.
    const [{ AdvancedMarkerElement, PinElement }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
    ]);

    // Each PinElement is paired with a marker to demonstrate setting each parameter.

    // Default marker with title text (no PinElement).
    const markerWithText = new AdvancedMarkerElement({
        position: { lat: 37.419, lng: -122.03 },
        title: 'Title text for the marker at lat: 37.419, lng: -122.03',
    });
    mapElement.append(markerWithText);

    // Adjust the scale.
    const pinScaled = new PinElement({
        scale: 1.5,
    });
    const markerScaled = new AdvancedMarkerElement({
        position: { lat: 37.419, lng: -122.02 },
    });
    markerScaled.append(pinScaled);
    mapElement.append(markerScaled);

    // Change the background color.
    const pinBackground = new PinElement({
        background: '#FBBC04',
    });
    const markerBackground = new AdvancedMarkerElement({
        position: { lat: 37.419, lng: -122.01 },
    });
    markerBackground.append(pinBackground);
    mapElement.append(markerBackground);

    // Change the border color.
    const pinBorder = new PinElement({
        borderColor: '#137333',
    });
    const markerBorder = new AdvancedMarkerElement({
        position: { lat: 37.415, lng: -122.035 },
    });
    markerBorder.append(pinBorder);
    mapElement.append(markerBorder);

    // Change the glyph color.
    const pinGlyph = new PinElement({
        glyphColor: 'white',
    });
    const markerGlyph = new AdvancedMarkerElement({
        position: { lat: 37.415, lng: -122.025 },
    });
    markerGlyph.append(pinGlyph);
    mapElement.append(markerGlyph);

    const pinTextGlyph = new PinElement({
        glyphText: 'T',
        glyphColor: 'white',
    });
    const markerGlyphText = new AdvancedMarkerElement({
        position: { lat: 37.415, lng: -122.015 },
    });
    markerGlyphText.append(pinTextGlyph);
    mapElement.append(markerGlyphText);

    // Hide the glyph.
    const pinNoGlyph = new PinElement({
        glyphText: '',
    });
    const markerNoGlyph = new AdvancedMarkerElement({
        position: { lat: 37.415, lng: -122.005 },
    });
    markerNoGlyph.append(pinNoGlyph);
    mapElement.append(markerNoGlyph);
}

void init();index.ts

JavaScript

const mapElement = document.querySelector('gmp-map');

async function init() {
    // Request needed libraries.
    const [{ AdvancedMarkerElement, PinElement }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
    ]);

    // Each PinElement is paired with a marker to demonstrate setting each parameter.

    // Default marker with title text (no PinElement).
    const markerWithText = new AdvancedMarkerElement({
        position: { lat: 37.419, lng: -122.03 },
        title: 'Title text for the marker at lat: 37.419, lng: -122.03',
    });
    mapElement.append(markerWithText);

    // Adjust the scale.
    const pinScaled = new PinElement({
        scale: 1.5,
    });
    const markerScaled = new AdvancedMarkerElement({
        position: { lat: 37.419, lng: -122.02 },
    });
    markerScaled.append(pinScaled);
    mapElement.append(markerScaled);

    // Change the background color.
    const pinBackground = new PinElement({
        background: '#FBBC04',
    });
    const markerBackground = new AdvancedMarkerElement({
        position: { lat: 37.419, lng: -122.01 },
    });
    markerBackground.append(pinBackground);
    mapElement.append(markerBackground);

    // Change the border color.
    const pinBorder = new PinElement({
        borderColor: '#137333',
    });
    const markerBorder = new AdvancedMarkerElement({
        position: { lat: 37.415, lng: -122.035 },
    });
    markerBorder.append(pinBorder);
    mapElement.append(markerBorder);

    // Change the glyph color.
    const pinGlyph = new PinElement({
        glyphColor: 'white',
    });
    const markerGlyph = new AdvancedMarkerElement({
        position: { lat: 37.415, lng: -122.025 },
    });
    markerGlyph.append(pinGlyph);
    mapElement.append(markerGlyph);

    const pinTextGlyph = new PinElement({
        glyphText: 'T',
        glyphColor: 'white',
    });
    const markerGlyphText = new AdvancedMarkerElement({
        position: { lat: 37.415, lng: -122.015 },
    });
    markerGlyphText.append(pinTextGlyph);
    mapElement.append(markerGlyphText);

    // Hide the glyph.
    const pinNoGlyph = new PinElement({
        glyphText: '',
    });
    const markerNoGlyph = new AdvancedMarkerElement({
        position: { lat: 37.415, lng: -122.005 },
    });
    markerNoGlyph.append(pinNoGlyph);
    mapElement.append(markerNoGlyph);
}

void init();index.js

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
gmp-map {
    height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
style.css

HTML

<html>
    <head>
        <title>Advanced Marker Basic Customization</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
                key: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <gmp-map
            center="37.419,-122.02"
            zoom="14"
            map-id="4504f8b37365c3d0"></gmp-map>
    </body>
</html>index.html

این صفحه به شما نشان می‌دهد که چگونه نشانگرها را به روش‌های زیر سفارشی کنید:

افزودن نوشتار عنوان
تغییر مقیاس نشانگر
تغییر رنگ پس‌زمینه
تغییر رنگ حاشیه
تغییر دادن رنگ گلیف
استفاده از نوشتار در گلیف
پنهان کردن گلیف

نشانگرهای پیشرفته از دو کلاس برای تعریف نشانگرها استفاده می‌کنند: کلاس AdvancedMarkerElement پارامترهای اصلی (position، title، و map) را ارائه می‌دهد، و کلاس PinElement حاوی گزینه‌هایی برای سفارشی‌سازی بیشتر است.

برای افزودن نشانگر به نقشه، ابتدا باید کتابخانه marker را بار کنید که کلاس‌های AdvancedMarkerElement و PinElement را ارائه می‌دهد.

تکه کد زیر کدی را برای ایجاد PinElement جدید نشان می‌دهد، سپس آن را روی نشانگر اعمال می‌کند.

// Create a pin element.
const myPin = new PinElement({
    scale: 1.5,
});
// Create a marker.
const myMarker = new AdvancedMarkerElement({
    position: { lat: 37.4239163, lng: -122.0947209 },
});
// Append the pin to the marker.
myMarker.append(myPin);
// Append the marker to the map.
mapElement.append(myMarker);

در نقشه‌هایی که بااستفاده از عناصر HTML سفارشی ایجاد شده‌اند، پارامترهای اصلی برای نشانگر بااستفاده از عنصر HTML‏ gmp-advanced-marker اعلام می‌شوند؛ هرگونه سفارشی‌سازی که از کلاس PinElement استفاده می‌کند باید به‌صورت برنامه‌نویسی‌شده اعمال شود. برای انجام این کار، کد شما باید عناصر gmp-advanced-marker را از صفحه HTML بازیابی کند. تکه‌کد زیر کدی را برای پُرسمان کردن مجموعه‌ای از عناصر gmp-advanced-marker نشان می‌دهد، سپس نتایج را تکرار می‌کند تا سفارشی‌سازی اعلام‌شده در PinElement را اعمال کند.

// Return an array of markers.
const advancedMarkers = [...document.querySelectorAll('gmp-advanced-marker')];

// Loop through the markers
for (let i = 0; i < advancedMarkers.length; i++) {
  const pin = new PinElement({
      scale: 2.0,
  });

  marker.append(pin);
}

افزودن نوشتار عنوان

وقتی مکان‌نما روی نشانگر نگه داشته می‌شود، نوشتار عنوان ظاهر می‌شود. نوشتار عنوان توسط صفحه‌خوان‌ها قابل‌خواندن است.

برای افزودن نوشتار عنوان به‌صورت برنامه‌نویسی‌شده، از گزینه AdvancedMarkerElement.title استفاده کنید:

// Default marker with title text (no PinElement).
const markerWithText = new AdvancedMarkerElement({
    position: { lat: 37.419, lng: -122.03 },
    title: 'Title text for the marker at lat: 37.419, lng: -122.03',
});
mapElement.append(markerWithText);index.js

برای افزودن نوشتار عنوان به نشانگری که بااستفاده از عناصر HTML سفارشی ایجاد شده است، از مشخصه title استفاده کنید:

<gmp-map
    center="41.027748173921374, -92.41852445367961"
    zoom="13"
    map-id="DEMO_MAP_ID">
    <gmp-advanced-marker
        position="41.027748173921374, -92.41852445367961"
        title="Ottumwa, IA"></gmp-advanced-marker>
</gmp-map>index.html

مقیاس‌بندی نشانگر

برای مقیاس‌بندی نشانگر، از گزینه scale استفاده کنید.

TypeScript

// Adjust the scale.
const pinScaled = new PinElement({
    scale: 1.5,
});
const markerScaled = new AdvancedMarkerElement({
    position: { lat: 37.419, lng: -122.02 },
});
markerScaled.append(pinScaled);
mapElement.append(markerScaled);index.ts

JavaScript

// Adjust the scale.
const pinScaled = new PinElement({
    scale: 1.5,
});
const markerScaled = new AdvancedMarkerElement({
    position: { lat: 37.419, lng: -122.02 },
});
markerScaled.append(pinScaled);
mapElement.append(markerScaled);index.js

تغییر رنگ پس‌زمینه

از گزینه PinElement.background برای تغییر رنگ پس‌زمینه نشانگر استفاده کنید:

TypeScript

// Change the background color.
const pinBackground = new PinElement({
    background: '#FBBC04',
});
const markerBackground = new AdvancedMarkerElement({
    position: { lat: 37.419, lng: -122.01 },
});
markerBackground.append(pinBackground);
mapElement.append(markerBackground);index.ts

JavaScript

// Change the background color.
const pinBackground = new PinElement({
    background: '#FBBC04',
});
const markerBackground = new AdvancedMarkerElement({
    position: { lat: 37.419, lng: -122.01 },
});
markerBackground.append(pinBackground);
mapElement.append(markerBackground);index.js

تغییر رنگ حاشیه

از گزینه PinElement.borderColor برای تغییر رنگ حاشیه نشانگر استفاده کنید:

TypeScript

// Change the border color.
const pinBorder = new PinElement({
    borderColor: '#137333',
});
const markerBorder = new AdvancedMarkerElement({
    position: { lat: 37.415, lng: -122.035 },
});
markerBorder.append(pinBorder);
mapElement.append(markerBorder);index.ts

JavaScript

// Change the border color.
const pinBorder = new PinElement({
    borderColor: '#137333',
});
const markerBorder = new AdvancedMarkerElement({
    position: { lat: 37.415, lng: -122.035 },
});
markerBorder.append(pinBorder);
mapElement.append(markerBorder);index.js

تغییر رنگ گلیف

از گزینه PinElement.glyphColor برای تغییر رنگ نویسه نشانگر استفاده کنید:

TypeScript

// Change the glyph color.
const pinGlyph = new PinElement({
    glyphColor: 'white',
});
const markerGlyph = new AdvancedMarkerElement({
    position: { lat: 37.415, lng: -122.025 },
});
markerGlyph.append(pinGlyph);
mapElement.append(markerGlyph);index.ts

JavaScript

// Change the glyph color.
const pinGlyph = new PinElement({
    glyphColor: 'white',
});
const markerGlyph = new AdvancedMarkerElement({
    position: { lat: 37.415, lng: -122.025 },
});
markerGlyph.append(pinGlyph);
mapElement.append(markerGlyph);index.js

استفاده از نوشتار در گلیف

از گزینه PinElement.glyphText برای جایگزین کردن نویسه پیش‌فرض با نویسه نوشتاری استفاده کنید. نوشتار PinElement با PinElement مقیاس‌بندی می‌شود و رنگ پیش‌فرض آن با glyphColor پیش‌فرض PinElement مطابقت دارد.

TypeScript

const pinTextGlyph = new PinElement({
    glyphText: 'T',
    glyphColor: 'white',
});
const markerGlyphText = new AdvancedMarkerElement({
    position: { lat: 37.415, lng: -122.015 },
});
markerGlyphText.append(pinTextGlyph);
mapElement.append(markerGlyphText);index.ts

JavaScript

const pinTextGlyph = new PinElement({
    glyphText: 'T',
    glyphColor: 'white',
});
const markerGlyphText = new AdvancedMarkerElement({
    position: { lat: 37.415, lng: -122.015 },
});
markerGlyphText.append(pinTextGlyph);
mapElement.append(markerGlyphText);index.js

پنهان کردن گلیف

گزینه PinElement.glyphText را روی رشته خالی تنظیم کنید تا نویسه نشانگر پنهان شود:

TypeScript

// Hide the glyph.
const pinNoGlyph = new PinElement({
    glyphText: '',
});
const markerNoGlyph = new AdvancedMarkerElement({
    position: { lat: 37.415, lng: -122.005 },
});
markerNoGlyph.append(pinNoGlyph);
mapElement.append(markerNoGlyph);index.ts

JavaScript

// Hide the glyph.
const pinNoGlyph = new PinElement({
    glyphText: '',
});
const markerNoGlyph = new AdvancedMarkerElement({
    position: { lat: 37.415, lng: -122.005 },
});
markerNoGlyph.append(pinNoGlyph);
mapElement.append(markerNoGlyph);index.js

یا PinElement.glyphColor را روی همان مقدار PinElement.background تنظیم کنید. این کار باعث می‌شود که نویسه به‌صورت بصری پنهان شود.

مراحل بعدی:

ایجاد نشانگر با گرافیک

سفارشی‌سازی نشانگر پایه با مجموعه‌ها، منظم بمانید ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.

مشاهده کد منبع نمونه کامل

TypeScript

JavaScript

CSS

HTML

افزودن نوشتار عنوان

مقیاس‌بندی نشانگر

TypeScript

JavaScript

تغییر رنگ پس‌زمینه

TypeScript

JavaScript

تغییر رنگ حاشیه

TypeScript

JavaScript

تغییر رنگ گلیف

TypeScript

JavaScript

استفاده از نوشتار در گلیف

TypeScript

JavaScript

پنهان کردن گلیف

TypeScript

JavaScript

مراحل بعدی:

سفارشی‌سازی نشانگر پایه