Tạo điểm đánh dấu bằng đồ hoạ

Xem mã nguồn ví dụ hoàn chỉnh

Ví dụ này cho thấy cách tạo điểm đánh dấu nâng cao, thay thế biểu tượng điểm đánh dấu mặc định bằng hình ảnh đồ hoạ tuỳ chỉnh ở nhiều định dạng.

TypeScript

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

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

    const parser = new DOMParser();

    // A marker with a custom inline SVG.
    const pinSvgString =
        '<svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 56 56" fill="none"><rect width="56" height="56" rx="28" fill="#7837FF"></rect><path d="M46.0675 22.1319L44.0601 22.7843" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M11.9402 33.2201L9.93262 33.8723" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M27.9999 47.0046V44.8933" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M27.9999 9V11.1113" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M39.1583 43.3597L37.9186 41.6532" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16.8419 12.6442L18.0816 14.3506" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9.93262 22.1319L11.9402 22.7843" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M46.0676 33.8724L44.0601 33.2201" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M39.1583 12.6442L37.9186 14.3506" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16.8419 43.3597L18.0816 41.6532" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M28 39L26.8725 37.9904C24.9292 36.226 23.325 34.7026 22.06 33.4202C20.795 32.1378 19.7867 30.9918 19.035 29.9823C18.2833 28.9727 17.7562 28.0587 17.4537 27.2401C17.1512 26.4216 17 25.5939 17 24.7572C17 23.1201 17.5546 21.7513 18.6638 20.6508C19.7729 19.5502 21.1433 19 22.775 19C23.82 19 24.7871 19.2456 25.6762 19.7367C26.5654 20.2278 27.34 20.9372 28 21.8649C28.77 20.8827 29.5858 20.1596 30.4475 19.6958C31.3092 19.2319 32.235 19 33.225 19C34.8567 19 36.2271 19.5502 37.3362 20.6508C38.4454 21.7513 39 23.1201 39 24.7572C39 25.5939 38.8488 26.4216 38.5463 27.2401C38.2438 28.0587 37.7167 28.9727 36.965 29.9823C36.2133 30.9918 35.205 32.1378 33.94 33.4202C32.675 34.7026 31.0708 36.226 29.1275 37.9904L28 39Z" fill="#FF7878"></path></svg>';

    const pinSvg = parser.parseFromString(
        pinSvgString,
        'image/svg+xml'
    ).documentElement;
    const pinSvgMarker = new AdvancedMarkerElement({
        position: { lat: 37.42475, lng: -122.094 },
        title: 'A marker using a custom SVG image.',
        anchorLeft: '-50%',
        anchorTop: '-50%',
    });
    pinSvgMarker.append(pinSvg);
    mapElement.append(pinSvgMarker);

    // A marker with a with a URL pointing to a PNG.
    const beachFlagImg = document.createElement('img');
    beachFlagImg.src = new URL('./public/beachflag.png', import.meta.url).href;

    const beachFlagMarker = new AdvancedMarkerElement({
        position: { lat: 37.434, lng: -122.082 },
        title: 'A marker using a custom PNG Image',
        anchorLeft: '0px',
        anchorTop: '100%',
    });
    beachFlagMarker.append(beachFlagImg);
    mapElement.append(beachFlagMarker);

    // A marker with a custom SVG glyph.
    const glyphImgSrc = new URL('./public/google_logo_g.svg', import.meta.url);

    const glyphSvgPinElement = new PinElement({
        glyphSrc: glyphImgSrc,
    });

    const glyphSvgMarker = new AdvancedMarkerElement({
        position: { lat: 37.425, lng: -122.07 },
        title: 'A marker using a custom SVG for the glyph.',
    });
    glyphSvgMarker.append(glyphSvgPinElement);
    mapElement.append(glyphSvgMarker);

    // A marker customized using a place icon and color, name, and geometry.
    const place = new Place({
        id: 'ChIJN5Nz71W3j4ARhx5bwpTQEGg',
    });

    // Call fetchFields, passing the desired data fields.
    await place.fetchFields({
        fields: [
            'location',
            'displayName',
            'svgIconMaskURI',
            'iconBackgroundColor',
        ],
    });

    const pinElement = new PinElement({
        background: place.iconBackgroundColor,
        glyphSrc: new URL(String(place.svgIconMaskURI)),
    });

    const placeIconMarker = new AdvancedMarkerElement({
        position: place.location,
        title: place.displayName,
    });
    placeIconMarker.append(pinElement);
    mapElement.append(placeIconMarker);
}

void init();

JavaScript

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

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

    const parser = new DOMParser();

    // A marker with a custom inline SVG.
    const pinSvgString =
        '<svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 56 56" fill="none"><rect width="56" height="56" rx="28" fill="#7837FF"></rect><path d="M46.0675 22.1319L44.0601 22.7843" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M11.9402 33.2201L9.93262 33.8723" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M27.9999 47.0046V44.8933" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M27.9999 9V11.1113" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M39.1583 43.3597L37.9186 41.6532" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16.8419 12.6442L18.0816 14.3506" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9.93262 22.1319L11.9402 22.7843" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M46.0676 33.8724L44.0601 33.2201" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M39.1583 12.6442L37.9186 14.3506" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16.8419 43.3597L18.0816 41.6532" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M28 39L26.8725 37.9904C24.9292 36.226 23.325 34.7026 22.06 33.4202C20.795 32.1378 19.7867 30.9918 19.035 29.9823C18.2833 28.9727 17.7562 28.0587 17.4537 27.2401C17.1512 26.4216 17 25.5939 17 24.7572C17 23.1201 17.5546 21.7513 18.6638 20.6508C19.7729 19.5502 21.1433 19 22.775 19C23.82 19 24.7871 19.2456 25.6762 19.7367C26.5654 20.2278 27.34 20.9372 28 21.8649C28.77 20.8827 29.5858 20.1596 30.4475 19.6958C31.3092 19.2319 32.235 19 33.225 19C34.8567 19 36.2271 19.5502 37.3362 20.6508C38.4454 21.7513 39 23.1201 39 24.7572C39 25.5939 38.8488 26.4216 38.5463 27.2401C38.2438 28.0587 37.7167 28.9727 36.965 29.9823C36.2133 30.9918 35.205 32.1378 33.94 33.4202C32.675 34.7026 31.0708 36.226 29.1275 37.9904L28 39Z" fill="#FF7878"></path></svg>';

    const pinSvg = parser.parseFromString(
        pinSvgString,
        'image/svg+xml'
    ).documentElement;
    const pinSvgMarker = new AdvancedMarkerElement({
        position: { lat: 37.42475, lng: -122.094 },
        title: 'A marker using a custom SVG image.',
        anchorLeft: '-50%',
        anchorTop: '-50%',
    });
    pinSvgMarker.append(pinSvg);
    mapElement.append(pinSvgMarker);

    // A marker with a with a URL pointing to a PNG.
    const beachFlagImg = document.createElement('img');
    beachFlagImg.src = new URL('./public/beachflag.png', import.meta.url).href;

    const beachFlagMarker = new AdvancedMarkerElement({
        position: { lat: 37.434, lng: -122.082 },
        title: 'A marker using a custom PNG Image',
        anchorLeft: '0px',
        anchorTop: '100%',
    });
    beachFlagMarker.append(beachFlagImg);
    mapElement.append(beachFlagMarker);

    // A marker with a custom SVG glyph.
    const glyphImgSrc = new URL('./public/google_logo_g.svg', import.meta.url);

    const glyphSvgPinElement = new PinElement({
        glyphSrc: glyphImgSrc,
    });

    const glyphSvgMarker = new AdvancedMarkerElement({
        position: { lat: 37.425, lng: -122.07 },
        title: 'A marker using a custom SVG for the glyph.',
    });
    glyphSvgMarker.append(glyphSvgPinElement);
    mapElement.append(glyphSvgMarker);

    // A marker customized using a place icon and color, name, and geometry.
    const place = new Place({
        id: 'ChIJN5Nz71W3j4ARhx5bwpTQEGg',
    });

    // Call fetchFields, passing the desired data fields.
    await place.fetchFields({
        fields: [
            'location',
            'displayName',
            'svgIconMaskURI',
            'iconBackgroundColor',
        ],
    });

    const pinElement = new PinElement({
        background: place.iconBackgroundColor,
        glyphSrc: new URL(String(place.svgIconMaskURI)),
    });

    const placeIconMarker = new AdvancedMarkerElement({
        position: place.location,
        title: place.displayName,
    });
    placeIconMarker.append(pinElement);
    mapElement.append(placeIconMarker);
}

void init();
export {};

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;
}

HTML

<html>
    <head>
        <title>Advanced Markers Using Graphics</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.42475,-122.0845"
            zoom="13"
            map-id="4504f8b37365c3d0"></gmp-map>
    </body>
</html>

API Điểm đánh dấu nâng cao hỗ trợ thay thế biểu tượng điểm đánh dấu mặc định bằng hình ảnh đồ hoạ tuỳ chỉnh. Bạn cũng có thể thay thế ký tự bằng một tệp hình ảnh. Trang này hướng dẫn bạn cách:

Điểm đánh dấu nâng cao hỗ trợ tất cả loại tệp hình ảnh phổ biến, bao gồm PNG, JPEG, GIF, SVG và TIFF.

Để thêm điểm đánh dấu vào bản đồ, trước tiên, bạn phải tải thư viện marker cung cấp các lớp AdvancedMarkerElement và PinElement.

Sử dụng tệp đồ hoạ tuỳ chỉnh

Tạo điểm đánh dấu bằng hình ảnh tuỳ chỉnh bằng cách thêm phần tử img tham chiếu đến tệp đồ hoạ (ví dụ: PNG) vào AdvancedMarkerElement:

TypeScript

// A marker with a with a URL pointing to a PNG.
const beachFlagImg = document.createElement('img');
beachFlagImg.src = new URL('./public/beachflag.png', import.meta.url).href;

const beachFlagMarker = new AdvancedMarkerElement({
    position: { lat: 37.434, lng: -122.082 },
    title: 'A marker using a custom PNG Image',
    anchorLeft: '0px',
    anchorTop: '100%',
});
beachFlagMarker.append(beachFlagImg);
mapElement.append(beachFlagMarker);

JavaScript

// A marker with a with a URL pointing to a PNG.
const beachFlagImg = document.createElement('img');
beachFlagImg.src = new URL('./public/beachflag.png', import.meta.url).href;

const beachFlagMarker = new AdvancedMarkerElement({
    position: { lat: 37.434, lng: -122.082 },
    title: 'A marker using a custom PNG Image',
    anchorLeft: '0px',
    anchorTop: '100%',
});
beachFlagMarker.append(beachFlagImg);
mapElement.append(beachFlagMarker);

Sử dụng SVG cùng dòng

Một số trường hợp có thể yêu cầu sử dụng SVG cùng dòng. Tạo điểm đánh dấu bằng hình ảnh SVG cùng dòng bằng cách thêm phần tử XML SVG vào AdvancedMarkerElement:

TypeScript

const parser = new DOMParser();

// A marker with a custom inline SVG.
const pinSvgString =
    '<svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 56 56" fill="none"><rect width="56" height="56" rx="28" fill="#7837FF"></rect><path d="M46.0675 22.1319L44.0601 22.7843" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M11.9402 33.2201L9.93262 33.8723" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M27.9999 47.0046V44.8933" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M27.9999 9V11.1113" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M39.1583 43.3597L37.9186 41.6532" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16.8419 12.6442L18.0816 14.3506" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9.93262 22.1319L11.9402 22.7843" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M46.0676 33.8724L44.0601 33.2201" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M39.1583 12.6442L37.9186 14.3506" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16.8419 43.3597L18.0816 41.6532" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M28 39L26.8725 37.9904C24.9292 36.226 23.325 34.7026 22.06 33.4202C20.795 32.1378 19.7867 30.9918 19.035 29.9823C18.2833 28.9727 17.7562 28.0587 17.4537 27.2401C17.1512 26.4216 17 25.5939 17 24.7572C17 23.1201 17.5546 21.7513 18.6638 20.6508C19.7729 19.5502 21.1433 19 22.775 19C23.82 19 24.7871 19.2456 25.6762 19.7367C26.5654 20.2278 27.34 20.9372 28 21.8649C28.77 20.8827 29.5858 20.1596 30.4475 19.6958C31.3092 19.2319 32.235 19 33.225 19C34.8567 19 36.2271 19.5502 37.3362 20.6508C38.4454 21.7513 39 23.1201 39 24.7572C39 25.5939 38.8488 26.4216 38.5463 27.2401C38.2438 28.0587 37.7167 28.9727 36.965 29.9823C36.2133 30.9918 35.205 32.1378 33.94 33.4202C32.675 34.7026 31.0708 36.226 29.1275 37.9904L28 39Z" fill="#FF7878"></path></svg>';

const pinSvg = parser.parseFromString(
    pinSvgString,
    'image/svg+xml'
).documentElement;
const pinSvgMarker = new AdvancedMarkerElement({
    position: { lat: 37.42475, lng: -122.094 },
    title: 'A marker using a custom SVG image.',
    anchorLeft: '-50%',
    anchorTop: '-50%',
});
pinSvgMarker.append(pinSvg);
mapElement.append(pinSvgMarker);

JavaScript

const parser = new DOMParser();

// A marker with a custom inline SVG.
const pinSvgString =
    '<svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 56 56" fill="none"><rect width="56" height="56" rx="28" fill="#7837FF"></rect><path d="M46.0675 22.1319L44.0601 22.7843" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M11.9402 33.2201L9.93262 33.8723" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M27.9999 47.0046V44.8933" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M27.9999 9V11.1113" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M39.1583 43.3597L37.9186 41.6532" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16.8419 12.6442L18.0816 14.3506" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9.93262 22.1319L11.9402 22.7843" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M46.0676 33.8724L44.0601 33.2201" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M39.1583 12.6442L37.9186 14.3506" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16.8419 43.3597L18.0816 41.6532" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M28 39L26.8725 37.9904C24.9292 36.226 23.325 34.7026 22.06 33.4202C20.795 32.1378 19.7867 30.9918 19.035 29.9823C18.2833 28.9727 17.7562 28.0587 17.4537 27.2401C17.1512 26.4216 17 25.5939 17 24.7572C17 23.1201 17.5546 21.7513 18.6638 20.6508C19.7729 19.5502 21.1433 19 22.775 19C23.82 19 24.7871 19.2456 25.6762 19.7367C26.5654 20.2278 27.34 20.9372 28 21.8649C28.77 20.8827 29.5858 20.1596 30.4475 19.6958C31.3092 19.2319 32.235 19 33.225 19C34.8567 19 36.2271 19.5502 37.3362 20.6508C38.4454 21.7513 39 23.1201 39 24.7572C39 25.5939 38.8488 26.4216 38.5463 27.2401C38.2438 28.0587 37.7167 28.9727 36.965 29.9823C36.2133 30.9918 35.205 32.1378 33.94 33.4202C32.675 34.7026 31.0708 36.226 29.1275 37.9904L28 39Z" fill="#FF7878"></path></svg>';

const pinSvg = parser.parseFromString(
    pinSvgString,
    'image/svg+xml'
).documentElement;
const pinSvgMarker = new AdvancedMarkerElement({
    position: { lat: 37.42475, lng: -122.094 },
    title: 'A marker using a custom SVG image.',
    anchorLeft: '-50%',
    anchorTop: '-50%',
});
pinSvgMarker.append(pinSvg);
mapElement.append(pinSvgMarker);

Sử dụng tệp đồ hoạ làm ký tự

Thay thế ký tự mặc định bằng cách truyền một phần tử img tham chiếu đến tài nguyên tệp đồ hoạ hoặc tài nguyên SVG cùng dòng vào tuỳ chọn PinElement.glyphSrc:

TypeScript

// A marker with a custom SVG glyph.
const glyphImgSrc = new URL('./public/google_logo_g.svg', import.meta.url);

const glyphSvgPinElement = new PinElement({
    glyphSrc: glyphImgSrc,
});

const glyphSvgMarker = new AdvancedMarkerElement({
    position: { lat: 37.425, lng: -122.07 },
    title: 'A marker using a custom SVG for the glyph.',
});
glyphSvgMarker.append(glyphSvgPinElement);
mapElement.append(glyphSvgMarker);

JavaScript

// A marker with a custom SVG glyph.
const glyphImgSrc = new URL('./public/google_logo_g.svg', import.meta.url);

const glyphSvgPinElement = new PinElement({
    glyphSrc: glyphImgSrc,
});

const glyphSvgMarker = new AdvancedMarkerElement({
    position: { lat: 37.425, lng: -122.07 },
    title: 'A marker using a custom SVG for the glyph.',
});
glyphSvgMarker.append(glyphSvgPinElement);
mapElement.append(glyphSvgMarker);

Sử dụng biểu tượng địa điểm làm ký tự

Với Place Details, bạn có thể yêu cầu biểu tượng địa điểm và màu nền mà bạn có thể áp dụng cho điểm đánh dấu. Tuỳ chỉnh điểm đánh dấu bằng dữ liệu địa điểm bằng cách truyền place.icon_background_color đến tuỳ chọn PinElement.background và một URL bằng cách sử dụng place.icon_mask_base_uri đến PinElement.glyphSrc. Thêm đuôi loại tệp PNG hoặc SVG vào URI. Sử dụng place.geometry.location để đặt điểm đánh dấu vào đúng vị trí. Ví dụ này cũng hiển thị place.name trong tiêu đề điểm đánh dấu.

TypeScript

// A marker customized using a place icon and color, name, and geometry.
const place = new Place({
    id: 'ChIJN5Nz71W3j4ARhx5bwpTQEGg',
});

// Call fetchFields, passing the desired data fields.
await place.fetchFields({
    fields: [
        'location',
        'displayName',
        'svgIconMaskURI',
        'iconBackgroundColor',
    ],
});

const pinElement = new PinElement({
    background: place.iconBackgroundColor,
    glyphSrc: new URL(String(place.svgIconMaskURI)),
});

const placeIconMarker = new AdvancedMarkerElement({
    position: place.location,
    title: place.displayName,
});
placeIconMarker.append(pinElement);
mapElement.append(placeIconMarker);

JavaScript

// A marker customized using a place icon and color, name, and geometry.
const place = new Place({
    id: 'ChIJN5Nz71W3j4ARhx5bwpTQEGg',
});

// Call fetchFields, passing the desired data fields.
await place.fetchFields({
    fields: [
        'location',
        'displayName',
        'svgIconMaskURI',
        'iconBackgroundColor',
    ],
});

const pinElement = new PinElement({
    background: place.iconBackgroundColor,
    glyphSrc: new URL(String(place.svgIconMaskURI)),
});

const placeIconMarker = new AdvancedMarkerElement({
    position: place.location,
    title: place.displayName,
});
placeIconMarker.append(pinElement);
mapElement.append(placeIconMarker);

Điểm đánh dấu vị trí bằng anchorLeft và anchorTop

Khi sử dụng điểm đánh dấu đồ hoạ, bạn có thể cần điều chỉnh vị trí của điểm đánh dấu để điểm đánh dấu xuất hiện chính xác trên bản đồ. Điều này rất hữu ích khi sử dụng hình ảnh có điểm neo khác với điểm chính giữa dưới cùng thông thường của điểm đánh dấu mặc định.

Đặt vị trí neo của điểm đánh dấu bằng cách sử dụng các tuỳ chọn điểm đánh dấu anchorLeft và anchorTop. Chỉ định giá trị anchorLeft và anchorTop bằng giá trị tỷ lệ phần trăm chiều dài CSS.

Theo mặc định, AdvancedMarkerElement đặt vị trí chính giữa phía dưới của nội dung tại position (anchorLeft: '-50%', anchorTop: '-100%') địa lý của điểm đánh dấu.

anchorLeft và anchorTop chấp nhận các giá trị CSS <length-percentage> bù trừ góc trên cùng bên trái của điểm đánh dấu so với toạ độ địa lý của điểm đánh dấu đó trên bản đồ:

  • Giá trị âm sẽ dịch chuyển điểm đánh dấu sang trái (anchorLeft) hoặc lên trên (anchorTop) để một điểm cụ thể bên trong hình ảnh của bạn nằm trên toạ độ.
  • Số 0 ('0px' hoặc '0%') căn chỉnh cạnh trái hoặc cạnh trên của điểm đánh dấu ngay với toạ độ.
Điểm neo mong muốn trên điểm đánh dấu anchorLeft anchorTop Trường hợp sử dụng mẫu
Giữa dưới cùng (mặc định) '-50%' '-100%' Chốt và con trỏ tháo dỡ tiêu chuẩn
Center '-50%' '-50%' Biểu tượng hình tròn, dấu chấm hoặc SVG đối xứng
Dưới cùng bên trái '0px' '-100%' Biểu tượng cờ có cột cờ ở cạnh trái (beachflag.png)
Trên cùng bên trái '0px' '0px' Nhãn hoặc chú thích kéo dài xuống dưới và sang phải từ một điểm

Tránh sử dụng các giá trị dương (chẳng hạn như anchorTop: '100%') hoặc các giá trị nằm ngoài phạm vi từ 0% đến -100%. Khi điểm neo nằm ngoài ranh giới điểm đánh dấu, khoảng cách pixel cố định khiến điểm đánh dấu có vẻ như trôi nổi trên bản đồ khi phóng to và thu nhỏ.

Các bước tiếp theo

Tạo điểm đánh dấu bằng HTML tuỳ chỉnh