Ogłoszenie: wkrótce w Google Maps Platform pojawi się nowy styl mapy podstawowej. Ta aktualizacja stylizacji mapy obejmuje nową domyślną paletę kolorów, ulepszone piny oraz udoskonalenia dotyczące obsługi i użyteczności map. Wszystkie style map zostaną automatycznie zaktualizowane w marcu 2025 r. Więcej informacji o dostępności i o tym, jak wcześniej włączyć tę funkcję, znajdziesz w artykule Nowy styl map w Google Maps Platform.

Ta strona została przetłumaczona przez Cloud Translation API.

Widżet autouzupełniania miejsca (podgląd)

Widżet autouzupełniania miejsc tworzy pole tekstowe, podaje prognozy miejsc na liście wyboru w interfejsie użytkownika i zwraca szczegóły miejsca w odpowiedzi na wybór użytkownika. Użyj widżetu autouzupełniania miejsc, aby osadzić na stronie internetowej kompletny, samodzielny interfejs autouzupełniania.

Wymagania wstępne

Aby korzystać z podpowiedzi dotyczących miejsc (wersja podglądowa), musisz włączyć „Places API” w projekcie Google Cloud i określić kanał beta (v: "beta") w bootstrap loaderze. Więcej informacji znajdziesz w artykule Pierwsze kroki.

Nowości

Autouzupełnianie miejsc (wersja wstępna) zostało ulepszone w następujący sposób:

Interfejs użytkownika widżetu autouzupełniania obsługuje lokalizację regionalną (w tym języki z orientacją poziomą) w przypadku obiektu zastępczego w polu tekstowym, logo listy przewidywań i przewidywań dotyczących miejsc.
Ulepszone ułatwienia dostępu, w tym obsługa czytników ekranu i interakcji za pomocą klawiatury.
Widżet autouzupełniania zwraca nową klasę Miejsce, aby uprościć obsługę zwracanego obiektu.
lepsza obsługa urządzeń mobilnych i małych ekranów;
Lepsza wydajność i wygląd graficzny.

Widżet autouzupełniania możesz dodać do strony internetowej lub mapy Google. Widgety autouzupełniania tworzą pole tekstowe, podają prognozy miejsc na liście wyboru w interfejsie i zwracają szczegóły miejsca w odpowiedzi na kliknięcie użytkownika za pomocą listenera gmp-placeselect. W tej sekcji dowiesz się, jak dodać widżet autouzupełniania do strony internetowej lub mapy Google.

Aby dodać widżet autouzupełniania do strony internetowej, utwórz nowy element google.maps.places.PlaceAutocompleteElement i dodaj go do strony, jak pokazano w tym przykładzie:

TypeScript

// Request needed libraries.
//@ts-ignore
await google.maps.importLibrary("places") as google.maps.PlacesLibrary;
// Create the input HTML element, and append it.
//@ts-ignore
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
//@ts-ignore
document.body.appendChild(placeAutocomplete);index.ts

JavaScript

// Request needed libraries.
//@ts-ignore
await google.maps.importLibrary("places");

// Create the input HTML element, and append it.
//@ts-ignore
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();

//@ts-ignore
document.body.appendChild(placeAutocomplete);
index.js

Zobacz pełny przykład kodu

Aby dodać widżet autouzupełniania do mapy, utwórz nowy obiekt google.maps.places.PlaceAutocompleteElement, dodaj do niego element PlaceAutocompleteElement i przesuń go na mapę jako element sterujący niestandardowy, jak pokazano w tym przykładzie:div

TypeScript

//@ts-ignore
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
//@ts-ignore
placeAutocomplete.id = 'place-autocomplete-input';

const card = document.getElementById('place-autocomplete-card') as HTMLElement;
//@ts-ignore
card.appendChild(placeAutocomplete);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);index.ts

JavaScript

//@ts-ignore
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();

//@ts-ignore
placeAutocomplete.id = "place-autocomplete-input";

const card = document.getElementById("place-autocomplete-card");

//@ts-ignore
card.appendChild(placeAutocomplete);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);index.js

Zobacz pełny przykład kodu

Ograniczanie podpowiedzi autouzupełniania

Domyślnie autouzupełnianie miejsc przedstawia wszystkie typy miejsc, z uwzględnieniem prognoz w pobliżu lokalizacji użytkownika, i pobiera wszystkie dostępne pola danych dla wybranego miejsca. Ustaw opcję PlaceAutocompleteElementOptions, aby wyświetlać trafniejsze prognozy, ograniczając lub faworyzując wyniki.

Ograniczenie wyników powoduje, że widżet Autouzupełnianie ignoruje wyniki, które znajdują się poza obszarem ograniczeń. Typowym rozwiązaniem jest ograniczenie wyników do granic mapy. Wyniki z uwzględnieniem preferencji sprawiają, że widżet autouzupełniania wyświetla wyniki w określonym obszarze, ale niektóre dopasowania mogą znajdować się poza tym obszarem.

Jeśli nie podasz żadnych granic ani widoku mapy, interfejs API spróbuje wykryć lokalizację użytkownika na podstawie jego adresu IP i dostosować wyniki do tej lokalizacji. W miarę możliwości ustawiaj zakresy. W przeciwnym razie różne osoby mogą otrzymywać różne prognozy. Aby ogólnie poprawić przewidywania, należy podać sensowny widok, np. ustawiony przez przesuwanie lub powiększanie na mapie, lub widok ustawiony przez dewelopera na podstawie położenia i promienia urządzenia. Gdy promień jest niedostępny, domyślna wartość automatycznego uzupełniania adresu miejsca to 5 km. Nie ustawiaj widocznego obszaru o zerowym promieniu (pojedynczy punkt), widocznego obszaru o rozmiarach kilku metrów (mniej niż 100 m) ani widocznego obszaru obejmującego cały glob.

Ograniczanie wyszukiwania miejsc według kraju

Aby ograniczyć wyszukiwanie miejsc do jednego lub kilku konkretnych krajów, użyj właściwości componentRestrictions, aby podać kody krajów, jak pokazano w tym fragmencie kodu:

const pac = new google.maps.places.PlaceAutocompleteElement({
  componentRestrictions: {country: ['us', 'au']},
});

Ograniczenie wyszukiwania miejsc do granic mapy

Aby ograniczyć wyszukiwanie miejsc do granic mapy, użyj właściwości locationRestrictions, aby dodać granice, jak pokazano w tym fragmencie kodu:

const pac = new google.maps.places.PlaceAutocompleteElement({
  locationRestriction: map.getBounds(),
});

Jeśli ograniczasz dostęp do obszaru na mapie, pamiętaj, aby dodać listenera, który będzie aktualizować granice, gdy się zmienią:

map.addListener('bounds_changed', () => {
  autocomplete.locationRestriction = map.getBounds();
});

Aby usunąć locationRestriction, ustaw je na null.

Wyniki wyszukiwania miejsc z błędem

Wyniki wyszukiwania możesz ograniczyć do obszaru koła, używając właściwości locationBias i podając promień, jak tutaj:

const autocomplete = new google.maps.places.PlaceAutocompleteElement({
  locationBias: {radius: 100, center: {lat: 50.064192, lng: -130.605469}},
});

Aby usunąć locationBias, ustaw je na null.

Ograniczanie wyników wyszukiwania miejsc do określonych typów

Ogranicz wyniki wyszukiwania miejsc do określonych typów miejsc, używając właściwości types i podając co najmniej jeden typ, jak tutaj:

const autocomplete = new google.maps.places.PlaceAutocompleteElement({
  types: ['establishment'],
});

Pełną listę obsługiwanych typów znajdziesz w tabeli 3: Typy obsługiwane w żądaniach autouzupełniania adresów.

Pobieranie informacji o miejscu

Aby uzyskać szczegóły wybranego miejsca, dodaj do metody gmp-placeselect listenera PlaceAutocompleteElement, jak pokazano w tym przykładzie:

TypeScript

// Add the gmp-placeselect listener, and display the results.
//@ts-ignore
placeAutocomplete.addEventListener('gmp-placeselect', async ({ place }) => {
    await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });

    selectedPlaceTitle.textContent = 'Selected Place:';
    selectedPlaceInfo.textContent = JSON.stringify(
        place.toJSON(), /* replacer */ null, /* space */ 2);
});index.ts

JavaScript

// Add the gmp-placeselect listener, and display the results.
//@ts-ignore
placeAutocomplete.addEventListener("gmp-placeselect", async ({ place }) => {
  await place.fetchFields({
    fields: ["displayName", "formattedAddress", "location"],
  });
  selectedPlaceTitle.textContent = "Selected Place:";
  selectedPlaceInfo.textContent = JSON.stringify(
    place.toJSON(),
    /* replacer */ null,
    /* space */ 2,
  );
});index.js

Zobacz pełny przykład kodu

W poprzednim przykładzie detektor zdarzeń zwraca obiekt klasy Place. Zadzwoń pod numer place.fetchFields(), aby uzyskać pola danych z sekcja Szczegóły miejsca, które są potrzebne do przesłania zgłoszenia.

W następnym przykładzie odbiorca prosi o informacje o miejscu i wyświetla je na mapie.

TypeScript

// Add the gmp-placeselect listener, and display the results on the map.
//@ts-ignore
placeAutocomplete.addEventListener('gmp-placeselect', async ({ place }) => {
    await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });

    // If the place has a geometry, then present it on a map.
    if (place.viewport) {
        map.fitBounds(place.viewport);
    } else {
        map.setCenter(place.location);
        map.setZoom(17);
    }

    let content = '<div id="infowindow-content">' +
    '<span id="place-displayname" class="title">' + place.displayName + '</span><br />' +
    '<span id="place-address">' + place.formattedAddress + '</span>' +
    '</div>';

    updateInfoWindow(content, place.location);
    marker.position = place.location;
});index.ts

JavaScript

// Add the gmp-placeselect listener, and display the results on the map.
//@ts-ignore
placeAutocomplete.addEventListener("gmp-placeselect", async ({ place }) => {
  await place.fetchFields({
    fields: ["displayName", "formattedAddress", "location"],
  });
  // If the place has a geometry, then present it on a map.
  if (place.viewport) {
    map.fitBounds(place.viewport);
  } else {
    map.setCenter(place.location);
    map.setZoom(17);
  }

  let content =
    '<div id="infowindow-content">' +
    '<span id="place-displayname" class="title">' +
    place.displayName +
    "</span><br />" +
    '<span id="place-address">' +
    place.formattedAddress +
    "</span>" +
    "</div>";

  updateInfoWindow(content, place.location);
  marker.position = place.location;
});index.js

Zobacz pełny przykład kodu

Przykładowe mapy

Ta sekcja zawiera pełny kod przykładowych map przedstawionych na tej stronie.

Element autouzupełniania

W tym przykładzie widżet autouzupełniania jest dodawany do strony internetowej i wyświetla wyniki dla każdego wybranego miejsca.

TypeScript

async function initMap(): Promise<void> {
    // Request needed libraries.
    //@ts-ignore
    await google.maps.importLibrary("places") as google.maps.PlacesLibrary;
    // Create the input HTML element, and append it.
    //@ts-ignore
    const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
    //@ts-ignore
    document.body.appendChild(placeAutocomplete);

    // Inject HTML UI.
    const selectedPlaceTitle = document.createElement('p');
    selectedPlaceTitle.textContent = '';
    document.body.appendChild(selectedPlaceTitle);

    const selectedPlaceInfo = document.createElement('pre');
    selectedPlaceInfo.textContent = '';
    document.body.appendChild(selectedPlaceInfo);

    // Add the gmp-placeselect listener, and display the results.
    //@ts-ignore
    placeAutocomplete.addEventListener('gmp-placeselect', async ({ place }) => {
        await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });

        selectedPlaceTitle.textContent = 'Selected Place:';
        selectedPlaceInfo.textContent = JSON.stringify(
            place.toJSON(), /* replacer */ null, /* space */ 2);
    });
}

initMap();index.ts

JavaScript

async function initMap() {
  // Request needed libraries.
  //@ts-ignore
  await google.maps.importLibrary("places");

  // Create the input HTML element, and append it.
  //@ts-ignore
  const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();

  //@ts-ignore
  document.body.appendChild(placeAutocomplete);

  // Inject HTML UI.
  const selectedPlaceTitle = document.createElement("p");

  selectedPlaceTitle.textContent = "";
  document.body.appendChild(selectedPlaceTitle);

  const selectedPlaceInfo = document.createElement("pre");

  selectedPlaceInfo.textContent = "";
  document.body.appendChild(selectedPlaceInfo);
  // Add the gmp-placeselect listener, and display the results.
  //@ts-ignore
  placeAutocomplete.addEventListener("gmp-placeselect", async ({ place }) => {
    await place.fetchFields({
      fields: ["displayName", "formattedAddress", "location"],
    });
    selectedPlaceTitle.textContent = "Selected Place:";
    selectedPlaceInfo.textContent = JSON.stringify(
      place.toJSON(),
      /* replacer */ null,
      /* space */ 2,
    );
  });
}

initMap();index.js

CSS

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

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

p {
  font-family: Roboto, sans-serif;
  font-weight: bold;
}
style.css

HTML

<html>
  <head>
    <title>Place Autocomplete element</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <p style="font-family: roboto, sans-serif">Search for a place here:</p>

    <!-- 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: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script>
  </body>
</html>index.html

Wypróbuj próbkę

JSFiddle.net Google Cloud Shell

Autouzupełnianie mapy

Ten przykład pokazuje, jak dodać widżet autouzupełniania do mapy Google.

TypeScript

let map: google.maps.Map;
let marker: google.maps.marker.AdvancedMarkerElement;
let infoWindow: google.maps.InfoWindow;
async function initMap(): Promise<void> {
    // Request needed libraries.
    //@ts-ignore
    const [{ Map }, { AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary("marker"),
        google.maps.importLibrary("places")
      ]);

    // Initialize the map.
    map = new google.maps.Map(document.getElementById('map') as HTMLElement, {
        center: { lat: 40.749933, lng: -73.98633 },
        zoom: 13,
        mapId: '4504f8b37365c3d0',
        mapTypeControl: false,
    });
    //@ts-ignore
    const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
    //@ts-ignore
    placeAutocomplete.id = 'place-autocomplete-input';

    const card = document.getElementById('place-autocomplete-card') as HTMLElement;
    //@ts-ignore
    card.appendChild(placeAutocomplete);
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);

    // Create the marker and infowindow
    marker = new google.maps.marker.AdvancedMarkerElement({
        map,
    });

    infoWindow = new google.maps.InfoWindow({});

    // Add the gmp-placeselect listener, and display the results on the map.
    //@ts-ignore
    placeAutocomplete.addEventListener('gmp-placeselect', async ({ place }) => {
        await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });

        // If the place has a geometry, then present it on a map.
        if (place.viewport) {
            map.fitBounds(place.viewport);
        } else {
            map.setCenter(place.location);
            map.setZoom(17);
        }

        let content = '<div id="infowindow-content">' +
        '<span id="place-displayname" class="title">' + place.displayName + '</span><br />' +
        '<span id="place-address">' + place.formattedAddress + '</span>' +
        '</div>';

        updateInfoWindow(content, place.location);
        marker.position = place.location;
    });
}

// Helper function to create an info window.
function updateInfoWindow(content, center) {
    infoWindow.setContent(content);
    infoWindow.setPosition(center);
    infoWindow.open({
        map,
        anchor: marker,
        shouldFocus: false,
    });
}

initMap();index.ts

JavaScript

let map;
let marker;
let infoWindow;

async function initMap() {
  // Request needed libraries.
  //@ts-ignore
  const [{ Map }, { AdvancedMarkerElement }] = await Promise.all([
    google.maps.importLibrary("marker"),
    google.maps.importLibrary("places"),
  ]);

  // Initialize the map.
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 40.749933, lng: -73.98633 },
    zoom: 13,
    mapId: "4504f8b37365c3d0",
    mapTypeControl: false,
  });

  //@ts-ignore
  const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();

  //@ts-ignore
  placeAutocomplete.id = "place-autocomplete-input";

  const card = document.getElementById("place-autocomplete-card");

  //@ts-ignore
  card.appendChild(placeAutocomplete);
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);
  // Create the marker and infowindow
  marker = new google.maps.marker.AdvancedMarkerElement({
    map,
  });
  infoWindow = new google.maps.InfoWindow({});
  // Add the gmp-placeselect listener, and display the results on the map.
  //@ts-ignore
  placeAutocomplete.addEventListener("gmp-placeselect", async ({ place }) => {
    await place.fetchFields({
      fields: ["displayName", "formattedAddress", "location"],
    });
    // If the place has a geometry, then present it on a map.
    if (place.viewport) {
      map.fitBounds(place.viewport);
    } else {
      map.setCenter(place.location);
      map.setZoom(17);
    }

    let content =
      '<div id="infowindow-content">' +
      '<span id="place-displayname" class="title">' +
      place.displayName +
      "</span><br />" +
      '<span id="place-address">' +
      place.formattedAddress +
      "</span>" +
      "</div>";

    updateInfoWindow(content, place.location);
    marker.position = place.location;
  });
}

// Helper function to create an info window.
function updateInfoWindow(content, center) {
  infoWindow.setContent(content);
  infoWindow.setPosition(center);
  infoWindow.open({
    map,
    anchor: marker,
    shouldFocus: false,
  });
}

initMap();index.js

CSS

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

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

#place-autocomplete-card {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  margin: 10px;
  padding: 5px;
  font-family: Roboto, sans-serif;
  font-size: large;
  font-weight: bold;
}

gmp-place-autocomplete {
  width: 300px;
}

#infowindow-content .title {
  font-weight: bold;
}

#map #infowindow-content {
  display: inline;
}
style.css

HTML

<html>
  <head>
    <title>Place Autocomplete map</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div class="place-autocomplete-card" id="place-autocomplete-card">
      <p>Search for a place here:</p>
    </div>
    <div id="map"></div>

    <!-- 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: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script>
  </body>
</html>index.html

Wypróbuj próbkę

JSFiddle.net Google Cloud Shell

Korzystanie z komponentu Selektor miejsca

Komponent selektora miejsc to pole tekstowe, które umożliwia użytkownikom wyszukiwanie określonego adresu lub miejsca za pomocą autouzupełniania. Jest ona częścią rozszerzonej biblioteki komponentów, czyli zestawu komponentów internetowych, które pomagają deweloperom szybciej tworzyć lepsze mapy i funkcje związane z lokalizacją.

Użyj konfiguratora Place Picker, aby utworzyć kod do umieszczenia niestandardowego komponentu Place Picker, a potem wyeksportuj go do użycia z popularnymi platformami, takimi jak React i Angular, lub bez żadnej platformy.

Widżet autouzupełniania miejsca (podgląd)

Wymagania wstępne

Nowości

Dodawanie widżetu autouzupełniania

Dodawanie widżetu autouzupełniania do strony internetowej

TypeScript

JavaScript

Dodawanie widżetu autouzupełniania do mapy

TypeScript

JavaScript

Ograniczanie podpowiedzi autouzupełniania

Ograniczanie wyszukiwania miejsc według kraju

Ograniczenie wyszukiwania miejsc do granic mapy

Wyniki wyszukiwania miejsc z błędem

Ograniczanie wyników wyszukiwania miejsc do określonych typów

Pobieranie informacji o miejscu

TypeScript

JavaScript

TypeScript

JavaScript

Przykładowe mapy

Element autouzupełniania

TypeScript

JavaScript

CSS

HTML

Wypróbuj próbkę

Autouzupełnianie mapy

TypeScript

JavaScript

CSS

HTML

Wypróbuj próbkę

Korzystanie z komponentu Selektor miejsca