Places API und Geocoding API mit datengestützten Stilen für Grenzen verwenden

Plattform auswählen: Android iOS JavaScript

Sie können die Places API und die Geocoding API in der Maps JavaScript API verwenden, um nach Regionen zu suchen und mehr Informationen zu Orten zu erhalten. Die Geocoding API und die Places API sind leistungsstarke, stabile Alternativen zum Abrufen von Orts-IDs. Falls Sie bereits Orts-IDs nutzen, können Sie sie mit datengestützten Stilen für Begrenzungen ganz einfach wiederverwenden.

So binden Sie die Places API und Geocoding API in Ihre Maps JavaScript API-Apps ein:

Places API verwenden

„Text Search“ (Neu) für die Suche nach Regionen verwenden

Sie können „Text Search“ (Neu) verwenden, um eine Orts-ID, die Regionsdaten enthält, mithilfe von includedType abzurufen. Damit lässt sich der Typ der Region angeben, der zurückgegeben werden soll. Wenn die Text Search API (neu) nur verwendet wird, um Orts-IDs anzufordern, fallen keine Gebühren an. Weitere Informationen

Mit dieser Beispielkarte wird mit einer searchByText-Anfrage die Orts-ID für Trinidad im US-Bundesstaat Kalifornien ermittelt. Anschließend werden Stile auf die Grenze angewendet:

TypeScript

async function findBoundary() {
    const request = {
        query: 'Trinidad, CA',
        fields: ['id', 'location'],
        includedType: 'locality',
        locationBias: center,
    };

    const { Place } = await google.maps.importLibrary("places") as google.maps.PlacesLibrary;
    //@ts-ignore
    const { places } = await Place.searchByText(request);

    if (places.length) {
        const place = places[0];
        styleBoundary(place.id);
        map.setCenter(place.location);
    } else {
        console.log('No results');
    }
}

function styleBoundary(placeid) {
    // Define a style of transparent purple with opaque stroke.
    const styleFill = {
        strokeColor: '#810FCB',
        strokeOpacity: 1.0,
        strokeWeight: 3.0,
        fillColor: '#810FCB',
        fillOpacity: 0.5
    };

    // Define the feature style function.
    featureLayer.style = (params) => {
        if (params.feature.placeId == placeid) {
            return styleFill;
        }
    };
}
index.ts

JavaScript

async function findBoundary() {
  const request = {
    query: "Trinidad, CA",
    fields: ["id", "location"],
    includedType: "locality",
    locationBias: center,
  };
  const { Place } = await google.maps.importLibrary("places");
  //@ts-ignore
  const { places } = await Place.searchByText(request);

  if (places.length) {
    const place = places[0];

    styleBoundary(place.id);
    map.setCenter(place.location);
  } else {
    console.log("No results");
  }
}

function styleBoundary(placeid) {
  // Define a style of transparent purple with opaque stroke.
  const styleFill = {
    strokeColor: "#810FCB",
    strokeOpacity: 1.0,
    strokeWeight: 3.0,
    fillColor: "#810FCB",
    fillOpacity: 0.5,
  };

  // Define the feature style function.
  featureLayer.style = (params) => {
    if (params.feature.placeId == placeid) {
      return styleFill;
    }
  };
}

index.js

Vollständigen Quellcode des Beispiels ansehen

TypeScript

let map;
let featureLayer;
let center;

async function initMap() {
    const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;

    center = {lat: 41.059, lng: -124.151}; // Trinidad, CA

    map = new Map(document.getElementById('map') as HTMLElement, {
        center: center,
        zoom: 15,
        // In the cloud console, configure this Map ID with a style that enables the
        // "Locality" Data Driven Styling type.
        mapId: 'a3efe1c035bad51b', // <YOUR_MAP_ID_HERE>,
    });

    featureLayer = map.getFeatureLayer('LOCALITY');

    findBoundary();
}
async function findBoundary() {
    const request = {
        query: 'Trinidad, CA',
        fields: ['id', 'location'],
        includedType: 'locality',
        locationBias: center,
    };

    const { Place } = await google.maps.importLibrary("places") as google.maps.PlacesLibrary;
    //@ts-ignore
    const { places } = await Place.searchByText(request);

    if (places.length) {
        const place = places[0];
        styleBoundary(place.id);
        map.setCenter(place.location);
    } else {
        console.log('No results');
    }
}

function styleBoundary(placeid) {
    // Define a style of transparent purple with opaque stroke.
    const styleFill = {
        strokeColor: '#810FCB',
        strokeOpacity: 1.0,
        strokeWeight: 3.0,
        fillColor: '#810FCB',
        fillOpacity: 0.5
    };

    // Define the feature style function.
    featureLayer.style = (params) => {
        if (params.feature.placeId == placeid) {
            return styleFill;
        }
    };
}
initMap();
index.ts

JavaScript

let map;
let featureLayer;
let center;

async function initMap() {
  const { Map } = await google.maps.importLibrary("maps");

  center = { lat: 41.059, lng: -124.151 }; // Trinidad, CA
  map = new Map(document.getElementById("map"), {
    center: center,
    zoom: 15,
    // In the cloud console, configure this Map ID with a style that enables the
    // "Locality" Data Driven Styling type.
    mapId: "a3efe1c035bad51b", // <YOUR_MAP_ID_HERE>,
  });
  featureLayer = map.getFeatureLayer("LOCALITY");
  findBoundary();
}

async function findBoundary() {
  const request = {
    query: "Trinidad, CA",
    fields: ["id", "location"],
    includedType: "locality",
    locationBias: center,
  };
  const { Place } = await google.maps.importLibrary("places");
  //@ts-ignore
  const { places } = await Place.searchByText(request);

  if (places.length) {
    const place = places[0];

    styleBoundary(place.id);
    map.setCenter(place.location);
  } else {
    console.log("No results");
  }
}

function styleBoundary(placeid) {
  // Define a style of transparent purple with opaque stroke.
  const styleFill = {
    strokeColor: "#810FCB",
    strokeOpacity: 1.0,
    strokeWeight: 3.0,
    fillColor: "#810FCB",
    fillOpacity: 0.5,
  };

  // Define the feature style function.
  featureLayer.style = (params) => {
    if (params.feature.placeId == placeid) {
      return styleFill;
    }
  };
}

initMap();
index.js

„Place Autocomplete“ für die Suche nach Regionen verwenden

Mit dem „Place Autocomplete“-Widget können Nutzer bequem nach Regionen suchen. Wenn das „Place Autocomplete“-Widget nur Regionen zurückgeben soll, müssen Sie types auf (regions) setzen, wie im folgenden Snippet gezeigt:

// Set up the Autocomplete widget to return only region results.
const autocompleteOptions = {
  fields: ["place_id", "type"],
  strictBounds: false,
  types: ["(regions)"],
};

Ortsdetails für eine Region abrufen

Die Ortsdetails einer Region können sehr nützlich sein. Sie können z. B.

  • anhand der Ortsnamen nach den Orts-IDs der jeweiligen Begrenzungen suchen
  • den Darstellungsbereich abrufen, um eine Begrenzung anzuzeigen
  • den Elementtyp für die Begrenzung abrufen (z. B. locality)
  • die formatierte Adresse abrufen, die in den USA in „Ort, Bundesstaat, Land“ aufgelöst wird (z. B. „Ottumwa, IA, USA“)
  • andere nützliche Daten wie Fotos abrufen

Mit der folgenden Beispielfunktion wird die Grenze für Trinidad im US-Bundesstaat Kalifornien ermittelt. Anschließend wird die Karte entsprechend dem Ergebnis zentriert:

Mit der folgenden Beispielfunktion wird fetchFields() aufgerufen, um Ortsdetails abzurufen, einschließlich place.geometry.viewport. Anschließend wird map.fitBounds() aufgerufen, um die Karte auf das ausgewählte Begrenzungspolygon zu zentrieren.

    async function getPlaceDetails(placeId) {
        // Use place ID to create a new Place instance.
        const place = new google.maps.places.Place({
            id: placeId,
        });

        // Call fetchFields, passing the desired data fields.
        await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'geometry', 'type'] });

        // Zoom to the boundary polygon.
        let viewport = place.geometry.viewport;
        map.fitBounds(viewport, 155);

        // Print some place details to the console.
        const types = place.types;
        console.log("Feature type: " + types[0]);
        console.log("Formatted address: " + place.formattedAddress);
    }

Geocoding API verwenden

Mit der Geocoding API können Sie Adressen in geografische Koordinaten umwandeln und umgekehrt. Die folgenden Anwendungsfälle lassen sich gut mit datengestützten Stilen für Begrenzungen kombinieren:

  • Geocoding verwenden, um den Darstellungsbereich für eine Region abzurufen
  • Das Filtern von Komponenten auf Ihren Geocoding-Aufruf anwenden, um die Orts-IDs für die Verwaltungsgebiete 1–4, den Ort oder die Postleitzahl abzurufen
  • Die umgekehrte Geocodierung verwenden, um Orts-IDs anhand von Breiten- und Längengraden zu ermitteln oder Orts-IDs für alle Komponenten an einem bestimmten Ort zurückzugeben

Darstellungsbereich für eine Region abrufen

Der „Geocoding“-Dienst kann eine Orts-ID als Darstellungsbereich zurückgeben, den Sie an die Funktion map.fitBounds() weitergeben können, um ein Begrenzungspolygon auf der Karte anzuzeigen. Im folgenden Beispiel wird mit dem „Geocoding“-Dienst ein Darstellungsbereich abgerufen und dann map.fitBounds() aufgerufen:

// Set up the geocoder.
geocoder = new google.maps.Geocoder();

...

// Call Geocoding API and zoom to the resulting bounds.
function zoomToPolygon(placeid) {
    geocoder
        .geocode({ placeId: placeid })
        .then(({ results }) => {
            map.fitBounds(results[0].geometry.viewport, 155);
        })
        .catch((e) => {
            console.log('Geocoder failed due to: ' + e)
        });
}

Umgekehrte Geocodierung verwenden

Mit der umgekehrten Geocodierung können Sie Orts-IDs finden. Im folgenden Beispiel für eine „Geocoding“-Dienstfunktion werden die Orts-IDs für alle Adresskomponenten an den angegebenen Breiten- und Längengraden zurückgegeben:

// Set up the geocoder.
geocoder = new google.maps.Geocoder();

...

// Call Geocoding API.
function getPlaceIds(latLng) {
    geocoder
        .geocode({ latLng })
        .then(({ results }) => {
            console.log('Geocoding result:');
            console.log(results[0]);
            console.log(results[0].place_id);
            console.log(results[0].address_components);
        })
        .catch((e) => {
            console.log('Geocoder failed due to: ' + e)
        });
}

Hier der entsprechende Webdienstaufruf für die umgekehrte Geocodierung:

https://maps.googleapis.com/maps/api/geocode/json?key="YOUR_API_KEY"&latlng=41.864182,-87.676930

So verwenden Sie die umgekehrte Geocodierung mit Komponentenfilter, um die Adresskomponenten für einen oder mehrere der folgenden Typen am angegebenen Ort abzurufen:

  • administrativeArea
  • country
  • locality
  • postalCode

In der nächsten Beispielfunktion wird der „Geocoding“-Dienst verwendet, um Komponenteneinschränkungen mit umgekehrter Geocodierung hinzuzufügen und alle Adresskomponenten am angegebenen Ort nur für den locality-Typ zu erhalten:

// Set up the geocoder.
geocoder = new google.maps.Geocoder();

...

function getPlaceIdWithRestrictions(latLng) {
    geocoder
        .geocode({ latLng,
            componentRestrictions: {
              country: "US",
              locality: "chicago",
            },
        })
        .then(({ results }) => {
            console.log('Geocoding result with restriction:');
            console.log(results[0]);
            console.log(results[0].place_id);
            console.log(results[0].address_components);
            console.log(results[0].address_components[1].types[0]);
            console.log(results[0].address_components[1].long_name);
        })
        .catch((e) => {
            console.log('getPlaceId Geocoder failed due to: ' + e)
        });
}

Hier der entsprechende Webdienstaufruf für die umgekehrte Geocodierung:

https://maps.googleapis.com/maps/api/geocode/json?key="YOUR_API_KEY"&latlng=41.864182,-87.676930&result_type=locality