Dodawanie znacznika do mapy

Wybierz platformę: Android iOS JavaScript

Używaj znaczników do wyświetlania pojedynczych lokalizacji na mapie. Na tej stronie dowiesz się, jak programowo dodać znacznik do mapy oraz jak to zrobić za pomocą niestandardowych elementów HTML.

Wczytywanie biblioteki zaawansowanych znaczników

Aby dodać zaawansowany znacznik do mapy, kod mapy musi wczytać bibliotekę marker, która udostępnia klasy AdvancedMarkerElement i PinElement. Dotyczy to sytuacji, w których aplikacja wczytuje markery programowo lub za pomocą kodu HTML. Aby to zrobić, aplikacja musi najpierw wczytać interfejs Maps JavaScript API.

Metoda wczytywania bibliotek zależy od tego, jak strona internetowa wczytuje interfejs Maps JavaScript API.

  • Jeśli strona internetowa używa dynamicznego wczytywania skryptów, dodaj bibliotekę znaczników i zaimportuj AdvancedMarkerElement (a opcjonalnie PinElement) w czasie działania, jak pokazano tutaj.

    const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");

  • Jeśli Twoja strona korzysta z tagu bezpośredniego wczytywania skryptu, dodaj libraries=marker do skryptu wczytywania, jak pokazano w tym fragmencie kodu. Spowoduje to zaimportowanie zarówno AdvancedMarkerElement, jak i PinElement.

    <script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly&libraries=marker"
defer
></script>

Ustawianie identyfikatora mapy

Aby używać znaczników zaawansowanych, musisz mieć identyfikator mapy (możesz użyć DEMO_MAP_ID). Ustaw identyfikator mapy w opcjach mapy, jak pokazano tutaj:

const map = new Map(document.getElementById('map') as HTMLElement, {
    center: { lat: 37.4239163, lng: -122.0947209 },
    zoom: 14,
    mapId: 'DEMO_MAP_ID',
});

Jeśli używasz komponentów internetowych, możesz ustawić identyfikator mapy bezpośrednio w elemencie gmp-map:

<gmp-map center="37.4239163,-122.0947209" zoom="14" map-id="DEMO_MAP_ID"></gmp-map>

Więcej informacji o identyfikatorach map

Dodawanie znacznika za pomocą niestandardowych elementów HTML

Aby dodać znacznik zaawansowany za pomocą niestandardowych elementów HTML, dodaj element podrzędny gmp-advanced-marker do elementu gmp-map. Poniższy fragment kodu pokazuje, jak dodać znaczniki do strony internetowej:

<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

Zobacz pełny przykładowy kod źródłowy

W tym przykładzie pokazujemy, jak utworzyć mapę ze znacznikami za pomocą kodu HTML.

TypeScript

// This example adds a map with markers, using web components.
async function initMap() {
    console.log('Maps JavaScript API loaded.');
}
initMap();
index.ts

JavaScript

// This example adds a map with markers, using web components.
async function initMap() {
    console.log('Maps JavaScript API loaded.');
}
initMap();
index.js

CSS

/* Note: This CSS file is intentionally blank. */
style.css

HTML

<html>
    <head>
        <title>Add a Map with Markers using HTML</title>
        <style>
            gmp-map {
                height: 100%;
            }
            html,
            body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
        </style>
        <script type="module" src="./index.js"></script>
        <script
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps,marker&v=weekly&internal_usage_attribution_ids=gmp_git_jsapisamples_v1_web-components"
            defer></script>
    </head>
    <body>
        <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>
    </body>
</html>
index.html

Wypróbuj przykład

Dodawanie znacznika za pomocą kodu

Aby programowo dodać znacznik zaawansowany do mapy, utwórz nowy obiekt AdvancedMarkerElement i dołącz go do mapy, jak pokazano w tym przykładzie:

TypeScript

const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;

async function initMap() {
    // Request needed libraries.
    const { Map } = (await google.maps.importLibrary(
        'maps'
    )) as google.maps.MapsLibrary;
    const { AdvancedMarkerElement } = (await google.maps.importLibrary(
        'marker'
    )) as google.maps.MarkerLibrary;

    const marker = new AdvancedMarkerElement({
        position: { lat: 37.4239163, lng: -122.0947209 },
    });
    mapElement.append(marker);
}
index.ts

JavaScript

const mapElement = document.querySelector('gmp-map');
async function initMap() {
    // Request needed libraries.
    const { Map } = (await google.maps.importLibrary('maps'));
    const { AdvancedMarkerElement } = (await google.maps.importLibrary('marker'));
    const marker = new AdvancedMarkerElement({
        position: { lat: 37.4239163, lng: -122.0947209 },
    });
    mapElement.append(marker);
}
index.js

Dołączanie elementów jest możliwe tylko w przypadku komponentów internetowych. Jeśli do wczytania mapy używasz elementu div, użyj właściwości map, aby powiązać znacznik z instancją mapy, jak pokazano tutaj:

myMap = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
});

const marker = new AdvancedMarkerElement({
    map: myMap,
    position: { lat: -34.397, lng: 150.644 },
});

Usuwanie znacznika

Aby usunąć znacznik z mapy, ustaw wartość marker.map lub marker.position na null.

// Set the map to null.
marker.map = null;

// Set the position to null.
marker.position = null;

Zobacz pełny przykładowy kod źródłowy

Ten przykład pokazuje, jak dodać znacznik do mapy.

TypeScript

const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;

async function initMap() {
    // Request needed libraries.
    const { Map } = (await google.maps.importLibrary(
        'maps'
    )) as google.maps.MapsLibrary;
    const { AdvancedMarkerElement } = (await google.maps.importLibrary(
        'marker'
    )) as google.maps.MarkerLibrary;

    const marker = new AdvancedMarkerElement({
        position: { lat: 37.4239163, lng: -122.0947209 },
    });
    mapElement.append(marker);
}
initMap();
index.ts

JavaScript

const mapElement = document.querySelector('gmp-map');
async function initMap() {
    // Request needed libraries.
    const { Map } = (await google.maps.importLibrary('maps'));
    const { AdvancedMarkerElement } = (await google.maps.importLibrary('marker'));
    const marker = new AdvancedMarkerElement({
        position: { lat: 37.4239163, lng: -122.0947209 },
    });
    mapElement.append(marker);
}
initMap();
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>Default Advanced Marker</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <!-- prettier-ignore -->
        <script>(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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly" });</script>
    </head>
    <body>
        <gmp-map
            center="37.4239163,-122.0947209"
            zoom="14"
            map-id="4504f8b37365c3d0"></gmp-map>
    </body>
</html>
index.html

Wypróbuj przykład

Dalsze kroki