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

Wybierz platformę: iOS JavaScript

Do wyszukiwania regionów i uzyskiwania dodatkowych informacji o miejscach możesz używać interfejsów Places API i Geocoding API. Geocoding API i Places API to wydajne i stabilne alternatywy uzyskiwania identyfikatorów miejsc. Jeśli używasz już identyfikatorów miejsc, możesz łatwo wykorzystać je ponownie w stylu granic opartym na danych.

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

Użyj interfejsu Places API

Użyj wyszukiwania tekstowego (nowego) w celu znalezienia regionu

Aby uzyskać identyfikator miejsca zawierający dane o regionie, możesz użyć wyszukiwania tekstowego (nowego). W tym celu użyj funkcji includedType do określenia typu regionu do zwrócenia. Korzystanie z interfejsu Text Search (nowego) API do wysyłania żądań tylko do identyfikatorów miejsc nie będzie powodować naliczania opłat. Więcej informacji

Ta przykładowa mapa pokazuje wysyłanie żądania searchByText w celu uzyskania identyfikatora miejsca dla Trynidadu w Kalifornii, a następnie stosowanie stylu 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 w miejscach, aby znajdować regiony

Widżet autouzupełniania miejsc to wygodny sposób na to, aby użytkownicy mogli wyszukiwać regiony. Aby skonfigurować widżet autouzupełniania miejsc tak, aby zwracał tylko regiony, ustaw types na (regions), jak pokazano poniżej:

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

Pobieranie szczegółów miejsca dla regionu

Szczegółowe informacje o miejscu dotyczące regionu mogą być bardzo przydatne. Na przykład możesz:

  • Wyszukuj identyfikatory miejsc na granicy na podstawie nazw miejsc.
  • Pobierz widoczny obszar, aby powiększyć widok do granicy.
  • Pobierz typ obiektu granicy (np. locality).
  • Uzyskaj sformatowany adres, który będzie miał postać „Nazwa miejsca, Stan, Kraj” w regionie Stanów Zjednoczonych (np. „Ottumwa, IA, USA”).
  • uzyskać inne przydatne dane, np. zdjęcia.

Ta przykładowa funkcja znajduje granicę Trynidadu w Kalifornii i wyśrodkowuje mapę na wyniku:

Ta przykładowa funkcja wywołuje funkcję fetchFields(), aby uzyskać szczegóły miejsca, w tym właściwość place.geometry.viewport, a następnie wywołuje metodę map.fitBounds(), aby wyśrodkować mapę 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);
    }

Korzystanie z interfejsu Geocoding API

Interfejs Geocoding API umożliwia konwertowanie adresów na współrzędne geograficzne i odwrotnie. Poniższe zastosowania dobrze współgrają ze stylem opartym na danych w zakresie granic:

  • Aby uzyskać widoczny obszar dla danego regionu, użyj geokodowania.
  • Zastosuj filtrowanie komponentów w wywołaniu geokodowania, aby uzyskać identyfikatory miejsc dla obszarów administracyjnych 1–4, rejonów lub kodów pocztowych.
  • Za pomocą odwrotnego geokodowania możesz znaleźć identyfikatory miejsc według szerokości i długości geograficznej, a nawet podać identyfikatory miejsc dla wszystkich komponentów w danej lokalizacji.

Pobieranie widocznego obszaru dla regionu

Usługa Geocoding może pobierać identyfikator miejsca i zwracać widoczny obszar, który możesz przekazać do funkcji map.fitBounds(), aby powiększyć na mapie wielokąt granicy. Poniższy przykład pokazuje użycie usługi Geocoding do uzyskania widocznego obszaru, a następnie wywołanie 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żyj odwrotnego geokodowania

Do znajdowania identyfikatorów miejsc można użyć odwrotnego geokodowania. Poniższa przykładowa funkcja usługi Geocoding zwraca identyfikatory miejsc dla wszystkich komponentów adresu o określonych współrzędnych 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 w usłudze 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 w określonej lokalizacji komponentu adresu dla co najmniej jednego z tych typów:

  • administrativeArea
  • country
  • locality
  • postalCode

Następna przykładowa funkcja pokazuje korzystanie z usługi geokodowania z dodaniem ograniczeń komponentów z odwrotnym geokodowaniem w celu uzyskania wszystkich komponentów adresu w określonej 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 w usłudze internetowej:

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