Używanie interfejsów API Mapy i geokodowania do stylizacji granic za pomocą stylu opartego na danych

Wybierz platformę: Android iOS JavaScript

Deweloperzy z Europejskiego Obszaru Gospodarczego (EOG)

Za pomocą interfejsów Places API i Geocoding API w interfejsie Maps JavaScript API możesz wyszukiwać regiony i uzyskiwać więcej informacji o miejscach. Interfejsy Geocoding API i Places API to zaawansowane i stabilne alternatywy do uzyskiwania identyfikatorów miejsc. Jeśli używasz już identyfikatorów miejsc, możesz łatwo wykorzystać je ponownie w stylach opartych na danych w przypadku granic.

Dodaj Miejsca i geokodowanie do aplikacji korzystających z interfejsu Maps JavaScript API w jeden z tych sposobów:

Korzystanie z interfejsu Places API

Znajdowanie regionu za pomocą wyszukiwania tekstowego (nowa funkcja)

Za pomocą wyszukiwania tekstowego (nowego) możesz uzyskać identyfikator miejsca zawierający dane regionu. W tym celu użyj parametru includedType, aby określić typ regionu, który ma zostać zwrócony. Korzystanie z interfejsu Text Search (New) API w celu wysyłania zapytań tylko o identyfikatory miejsc nie wiąże się z żadnymi opłatami. Więcej informacji

Ta przykładowa mapa pokazuje, jak wysłać żądanie searchByText, aby uzyskać identyfikator miejsca dla Trinidad w Kalifornii, a następnie zastosować styl do granicy:

TypeScript

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

  const { Place } = (await google.maps.importLibrary(
    'places'
  )) as google.maps.PlacesLibrary;
  const { places } = await Place.searchByText(request);

  if (places.length) {
    const place = places[0];
    styleBoundary(place.id);
    innerMap.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 = {
        textQuery: 'Trinidad, CA',
        fields: ['id', 'location'],
        includedType: 'locality',
        locationBias: center,
    };
    const { Place } = (await google.maps.importLibrary('places'));
    const { places } = await Place.searchByText(request);
    if (places.length) {
        const place = places[0];
        styleBoundary(place.id);
        innerMap.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 innerMap;
let featureLayer;
let center;

async function initMap() {
  // Load the needed libraries.
  await google.maps.importLibrary('maps') as google.maps.MapsLibrary;

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

  // Get the gmp-map element.
  const mapElement = document.querySelector(
    'gmp-map'
  ) as google.maps.MapElement;

  // Get the inner map.
  innerMap = mapElement.innerMap;

  // Get the LOCALITY feature layer.
  featureLayer = innerMap.getFeatureLayer(google.maps.FeatureType.LOCALITY);

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

  const { Place } = (await google.maps.importLibrary(
    'places'
  )) as google.maps.PlacesLibrary;
  const { places } = await Place.searchByText(request);

  if (places.length) {
    const place = places[0];
    styleBoundary(place.id);
    innerMap.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 innerMap;
let featureLayer;
let center;
async function initMap() {
    // Load the needed libraries.
    await google.maps.importLibrary('maps');
    center = { lat: 41.059, lng: -124.151 }; // Trinidad, CA
    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map');
    // Get the inner map.
    innerMap = mapElement.innerMap;
    // Get the LOCALITY feature layer.
    featureLayer = innerMap.getFeatureLayer(google.maps.FeatureType.LOCALITY);
    findBoundary();
}
async function findBoundary() {
    const request = {
        textQuery: 'Trinidad, CA',
        fields: ['id', 'location'],
        includedType: 'locality',
        locationBias: center,
    };
    const { Place } = (await google.maps.importLibrary('places'));
    const { places } = await Place.searchByText(request);
    if (places.length) {
        const place = places[0];
        styleBoundary(place.id);
        innerMap.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

Znajdowanie regionów za pomocą Autouzupełniania miejsc

Widżet autouzupełniania miejsc ułatwia użytkownikom wyszukiwanie regionów. Aby skonfigurować widżet autouzupełniania miejsc tak, aby zwracał tylko regiony, ustaw wartość includedPrimaryTypes na (regions), jak pokazano w tym fragmencie kodu:

// Set up the Autocomplete widget to return only region results.
placeAutocomplete = document.querySelector(
    'gmp-place-autocomplete'
) as google.maps.places.PlaceAutocompleteElement;
placeAutocomplete.includedPrimaryTypes = ['(regions)'];

Pobieranie szczegółów miejsca w regionie

Dane o miejscach w regionie mogą być bardzo przydatne. Możesz na przykład:

  • Wyszukiwanie identyfikatorów miejsc granicznych na podstawie nazw miejsc.
  • Pobierz widoczny obszar, aby powiększyć go do granicy.
  • Pobierz typ funkcji dla granicy (np. locality).
  • Uzyskaj sformatowany adres, który w Stanach Zjednoczonych będzie miał postać „Nazwa miejsca, Stan, Kraj” (np. „Ottumwa, IA, USA”).
  • uzyskiwać inne przydatne dane, takie jak opinie i zdjęcia użytkowników.

Poniższa funkcja znajduje granice Trinidadu w Kalifornii i wyśrodkowuje mapę na wyniku:

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

    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 data fields you want.
        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

Geocoding API umożliwia konwertowanie adresów na współrzędne geograficzne i odwrotnie. Te zastosowania dobrze sprawdzają się w przypadku stylu opartego na danych w przypadku granic:

  • Użyj geokodowania, aby uzyskać widoczny obszar regionu.
  • Zastosuj filtrowanie komponentów do wywołania Geocoding API, aby uzyskać identyfikatory miejsc dla obszarów administracyjnych 1–4, miejscowości lub kodu pocztowego.
  • Użyj odwrotnego geokodowania, aby znaleźć identyfikatory miejsc na podstawie współrzędnych geograficznych lub zwrócić identyfikatory miejsc dla wszystkich komponentów w określonej lokalizacji.

Pobieranie widocznego obszaru dla regionu

Usługa geokodowania może pobrać identyfikator miejsca i zwrócić widoczny obszar, który możesz przekazać do funkcji map.fitBounds(), aby powiększyć wielokąt graniczny na mapie. W tym przykładzie pokazujemy, jak za pomocą usługi Geocoding uzyskać widoczny obszar, 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)
        });
}

Korzystanie z odwrotnego geokodowania

Do znajdowania identyfikatorów miejsc można używać odwrotnego geokodowania. Poniższa funkcja usługi Geocoding zwraca identyfikatory miejsc dla wszystkich komponentów adresu o określonych współrzędnych geograficznych:

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

Oto odpowiednie wywołanie usługi internetowej odwrotnego geokodowania:

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

Aby użyć geokodowania zwrotnego z filtrowaniem komponentów w celu uzyskania komponentu adresu dla co najmniej 1 z tych typów w określonej lokalizacji:

  • administrativeArea
  • country
  • locality
  • postalCode

Następna przykładowa funkcja pokazuje, jak używać usługi geokodowania, dodając ograniczenia komponentów za pomocą geokodowania odwrotnego, aby uzyskać wszystkie komponenty 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 wywołania usługi internetowej odwrotnego geokodowania:

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