Как использовать Places API и геокодирование с настройкой стилей на основе данных для границ

Выберите платформу: Android iOS JavaScript

Разработчики из Европейской экономической зоны (ЕЭЗ)

Чтобы находить регионы и получать дополнительную информацию о местах, вы можете использовать Maps JavaScript API вместе с Places API или Geocoding API. Geocoding API и Places API – это мощные и надежные альтернативные решения для получения идентификаторов мест. Если вы уже используете идентификаторы мест, то сможете легко использовать их вместе со стилями на основе данных, чтобы показывать границы.

Возможны следующие варианты использования Places и Geocoding в приложениях с Maps JavaScript API:

  • Поиск мест с помощью библиотеки Places и Maps JavaScript API (также поддерживают виджет автозаполнения).
  • Возврат информации о местах по HTTP-запросам с помощью Places API.
  • Сервис геокодирования и класс Geocoder могут выполнять геокодирование и обратное геокодирование динамически на основе ввода данных пользователем.
  • Геокодирование известных статических адресов с помощью Geocoding API.

Places API

Как искать регионы с помощью новой версии текстового поиска

Вы можете использовать новую версию текстового поиска, чтобы получать идентификаторы мест с данными о регионах. Для этого в качестве значения параметра includedType укажите нужный тип региона. Запрашивать идентификаторы мест с помощью новой версии Text Search API можно бесплатно. Подробнее…

В этом примере показан запрос searchByText для получения идентификатора места "Тринидад, штат Калифорния" и применение стиля к границе:

TypeScript

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: string) {
    // Define a style of transparent purple with opaque stroke.
    const styleFill: google.maps.FeatureStyleOptions = {
        strokeColor: '#810FCB',
        strokeOpacity: 1.0,
        strokeWeight: 3.0,
        fillColor: '#810FCB',
        fillOpacity: 0.5,
    };

    // Define the feature style function.
    featureLayer.style = (params: google.maps.FeatureStyleFunctionOptions) => {
        const placeFeature = params.feature as google.maps.PlaceFeature;
        if (placeFeature.placeId === placeid) {
            return styleFill;
        }
        return null;
    };
}

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) => {
        const placeFeature = params.feature;
        if (placeFeature.placeId === placeid) {
            return styleFill;
        }
        return null;
    };
}

Посмотреть полный пример исходного кода

TypeScript

let innerMap: google.maps.Map;
let featureLayer: google.maps.FeatureLayer;
let center: google.maps.LatLngLiteral;

async function init() {
    // 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('LOCALITY');

    void 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: string) {
    // Define a style of transparent purple with opaque stroke.
    const styleFill: google.maps.FeatureStyleOptions = {
        strokeColor: '#810FCB',
        strokeOpacity: 1.0,
        strokeWeight: 3.0,
        fillColor: '#810FCB',
        fillOpacity: 0.5,
    };

    // Define the feature style function.
    featureLayer.style = (params: google.maps.FeatureStyleFunctionOptions) => {
        const placeFeature = params.feature as google.maps.PlaceFeature;
        if (placeFeature.placeId === placeid) {
            return styleFill;
        }
        return null;
    };
}
void init();

JavaScript

let innerMap;
let featureLayer;
let center;

async function init() {
    // 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('LOCALITY');

    void 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) => {
        const placeFeature = params.feature;
        if (placeFeature.placeId === placeid) {
            return styleFill;
        }
        return null;
    };
}
void init();

Как использовать автозаполнение мест для поиска регионов

С виджетом автозаполнения мест вашим пользователям будет удобно искать регионы на карте. Чтобы настроить виджет автозаполнения мест для возврата только регионов, присвойте параметру includedPrimaryTypes значение (regions), как показано в следующем фрагменте:

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

Как получить информацию о регионе

Вы можете запрашивать разную полезную информацию о регионе, например:

  • идентификаторы граничащих с регионом мест по его названию;
  • область просмотра для увеличения масштаба до границ региона;
  • объекты определенного типа внутри границ (например, locality);
  • форматированный адрес региона США в формате "населенный пункт, штат, страна" (например, "Оттумва, штат Айова, США");
  • отзывы пользователей, фотографии и многое другое.

В этом примере функция находит место "Тринидад, штат Калифорния", а затем центрирует карту по результату поиска:

В примере ниже функция вызывает метод fetchFields(), чтобы получить сведения о месте, в том числе place.viewport, а затем вызывает метод map.fitBounds(), чтобы центрировать карту по границам выбранного многоугольника.

    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', 'viewport', 'types'] });

        // Zoom to the boundary polygon.
        let viewport = place.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

С помощью Geocoding API вы можете преобразовывать адреса в географические координаты и наоборот. Он поддерживает разные варианты использования, которые хорошо сочетаются со стилями на основе данных для границ. Например, вы можете:

  • Получать область просмотра для региона.
  • Получать идентификаторы мест для административных районов уровней 1–4, названия населенных пунктов и индексы – для этого в вызовах Geocoding можно применять фильтры по компонентам.
  • Получать идентификаторы мест по географическим координатам, а также для всех компонентов в том или ином местоположении – это делается с помощью обратного геокодирования.

Как получить область просмотра для региона

Сервис Geocoding позволяет получить область просмотра по идентификатору места, а затем передать ее функции map.fitBounds(), чтобы увеличить масштаб карты до граничного многоугольника. Пример ниже иллюстрирует получение области просмотра с помощью сервиса Geocoding и вызов функции 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)
        });
}

Как использовать обратное геокодирование

Обратное геокодирование позволяет получать идентификаторы мест. В примере ниже функция сервиса Geocoding возвращает идентификаторы места для всех компонентов адреса в точке с заданными координатами.

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

Эта операция эквивалентна вызову веб-сервиса обратного геокодирования:

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

Обратное геокодирование можно использовать с фильтром компонентов адреса, чтобы получать только нужные вам компоненты:

  • administrativeArea
  • country
  • locality
  • postalCode

В примере ниже показано, как добавить ограничение при использовании функции обратного геокодирования в сервисе Geocoding, чтобы получить для заданной точки только адресный компонент 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)
        });
}

Эта операция эквивалентна вызову веб-сервиса обратного геокодирования:

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