Używanie interfejsów API Miejsc i geokodowania ze stylem opartym na danych do określania granic

Wybierz platformę: Android iOS JavaScript

W interfejsie Maps JavaScript API możesz używać interfejsów Places API i Geocoding API, aby wyszukiwać regiony i uzyskiwać więcej informacji o miejscach. Interfejs Geocoding API i Places API to skuteczne i stabilne rozwiązanie, które pozwala uzyskać identyfikatory miejsc. Jeśli już używasz konta za pomocą identyfikatorów miejsc, możesz łatwo ponownie wykorzystać te identyfikatory za pomocą stylu opartego na danych dla granic.

Dodaj Miejsca i Geokodowanie do aplikacji Maps JavaScript API w w następujący sposób:

.

Korzystanie z interfejsu Places API

Znajdowanie regionu za pomocą wyszukiwania tekstowego (nowego)

Możesz użyć funkcji wyszukiwania tekstowego (nowość). aby uzyskać identyfikator miejsca zawierający dane regionu, używając parametru includedType do określenia typ regionu zwrócić. Zastosowanie interfejsu Text Search (nowy) API do tylko żądania identyfikatorów miejsc. Więcej informacji

Ta przykładowa mapa pokazuje wysłanie żądania searchByText, aby uzyskać dostęp do miejsca Identyfikator dla Trinidad w Kalifornii, a następnie zastosuj styl do granicy:

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

Pełny przykładowy kod źródłowy

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

Używanie autouzupełniania miejsc do znajdowania regionów

Widżet autouzupełniania miejsc zapewnia użytkownikom wygodny sposób wyszukiwania regionów. Aby skonfigurować w widżecie autouzupełniania miejsc, aby zwracał tylko regiony, ustaw types na (regions) na przykład w tym fragmencie:

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

Pobieranie szczegółowych informacji o miejscu w regionie

Szczegółowe informacje o miejscach w regionie mogą być całkiem przydatne. Możesz na przykład:

  • Szukaj identyfikatorów miejsc granicznych na podstawie nazw miejsc.
  • Pobierz widoczny obszar, aby powiększyć do granicy.
  • Pobierz typ funkcji dla granicy (np. locality).
  • Uzyskaj sformatowany adres, który ma format „Nazwa miejsca, Stan, Kraj”. w regionie Stanów Zjednoczonych (np. „Ottumwa, IA, USA”).
  • Pobierać inne przydatne dane, takie jak zdjęcia.

Funkcja przykładowa, która znajduje granicę Trinidadu w Kalifornii i wyśrodkowuje mapę na podstawie uzyskanego wyniku:

W tym przykładzie funkcja fetchFields() wywołuje funkcję place.geometry.viewport, aby uzyskać szczegóły miejsca, w tym place.geometry.viewport, a następnie wywołuje funkcję map.fitBounds(), aby wyśrodkować mapę na wybranym poligonie granicy.

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

Korzystanie z interfejsu Geocoding API

Interfejs Geocoding API umożliwia konwertować adresy na współrzędne geograficzne i odwrotnie. Poniżej zastosowania dobrze łączą się ze stylem opartym na danych w przypadku granic:

  • Użyj geokodowania, by uzyskać widoczny obszar dla danego regionu.
  • Zastosuj filtrowanie komponentów do wywołania geokodowania, aby uzyskać identyfikatory miejsc dla obszarów administracyjnych 1–4, miejscowości lub kodu pocztowego.
  • użyć odwrotnego geokodowania, aby znaleźć identyfikatory miejsc według współrzędnych geograficznych bądź szerokości i długości geograficznej; zwraca identyfikatory miejsc dla wszystkich komponentów w konkretnej lokalizacji.

Pobieranie widocznego obszaru dla regionu

Usługa Geocoding może przyjąć identyfikator miejsca i zwrócić widoczny obszar, mogą być przekazywane do map.fitBounds() w celu powiększenia wielokąta granicy na mapie. Ten przykład pokazuje, jak za pomocą usługi Geokodowania uzyskać widok, a następnie wywołać funkcję map.fitBounds():

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

Używanie odwrotnego geokodowania

Odwrotne geokodowanie może służyć do znajdowania identyfikatorów miejsc. W tym przykładzie funkcja usługi geokodowania zwraca identyfikatory miejsc dla wszystkich elementów adresu w współrzędnych szerokości i długości geograficznej podanych w funkcji:

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

Jest to odpowiednik odwrotnego geokodowania. Wywołanie usługi internetowej:

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

Aby użyć odwrotnego geokodowania z filtrowaniem komponentów w celu uzyskania komponentu adresu w przypadku co najmniej jednego z tych typów w wybranym miejscu:

  • administrativeArea
  • country
  • locality
  • postalCode

Następna przykładowa funkcja jest pokazana za pomocą usługi Geocoding, dodając komponent za pomocą odwrotnego geokodowania, by wszystkie składniki adresu były w w podanej lokalizacji tylko dla typu locality:

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

Jest to odpowiednik odwrotnego geokodowania Wywołanie usługi sieciowej:

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