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

Wybierz platformę: iOS JavaScript

Możesz używać interfejsów Places API i Geocoding API w Maps JavaScript API, aby wyszukiwać regiony i uzyskiwać więcej informacje o miejscach. 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

Zobacz 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, stanowi wygodny sposób na umożliwienie użytkownikom 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. Na przykład możesz:

  • Wyszukuj identyfikatory miejsc przy granicach na podstawie nazw miejsc.
  • Pobierz widoczny obszar, aby powiększyć do granicy granicy.
  • Pobierz typ cechy granicy (na przykład locality).
  • Uzyskaj sformatowany adres, który ma format „Nazwa miejsca, Stan, Kraj”. w regionie Stanów Zjednoczonych (np. „Ottumwa, IA, USA”).
  • Uzyskiwanie innych przydatnych danych, np. zdjęć.

Ta przykładowa funkcja znajduje granicę Trynidadu, Kalifornii i ośrodków mapę w wyniku:

Poniższa przykładowa funkcja wywołuje fetchFields(), aby uzyskać szczegółowe informacje o miejscu w tym place.geometry.viewport, a potem wywołuje map.fitBounds(), aby wyśrodkować na wybranym wielokątie 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);
    }

Używanie interfejsu Geocoding API

Interfejs Geocoding API umożliwia konwertują 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 Geokodowanie, aby uzyskać identyfikatory miejsc obszary administracyjne 1–4, miejscowość lub kod pocztowy.
  • 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. Następujący przykład pokazuje: za pomocą usługi Geokodowanie w celu uzyskania widocznego obszaru, a potem wywołując 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)
        });
}

Odwrotne geokodowanie

Aby znaleźć identyfikatory miejsc, można użyć odwrotnego geokodowania. Geokodowanie poniżej funkcja usługi zwraca identyfikatory miejsc dla wszystkich komponentów adresu w elemencie określone współrzędne szerokości i długości geograficznej:

// 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 sieciowej:

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 pobrania komponentu adresu dla co najmniej jednego z tych typów w określonej lokalizacji:

  • administrativeArea
  • country
  • locality
  • postalCode

Następna przykładowa funkcja jest wyświetlana przy użyciu 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