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

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

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

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

Добавить функции «Места» и «Геокодирование» в ваши приложения Maps JavaScript API можно следующими способами:

Используйте API Places

Используйте текстовый поиск (новая функция), чтобы найти регион.

С помощью функции текстового поиска (новая функция) вы можете получить идентификатор места, содержащий данные о регионе, указав тип возвращаемого региона с помощью includedType . Использование API текстового поиска (новая функция) только для запроса идентификаторов мест не влечет за собой никаких дополнительных затрат. Подробнее .

На этом примере карты показано, как выполнить запрос searchByText для получения идентификатора места Тринидад, Калифорния, а затем применить стиль к границе:

Машинопись 

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

См. полный пример исходного кода.

Машинопись 

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

Используйте функцию автозаполнения «Места», чтобы найти регионы.

Виджет автозаполнения «Местоположение» предоставляет удобный способ поиска регионов для ваших пользователей. Чтобы настроить виджет автозаполнения «Местоположение» так, чтобы он возвращал только регионы, установите 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 ).
  • Получите отформатированный адрес, который соответствует "Название населенного пункта, штат, страна" в регионе США (например, "Ottumwa, IA, USA").
  • Получите и другие полезные данные, такие как отзывы пользователей и фотографии.

Следующая функция, в качестве примера, находит границу города Тринидад, штат Калифорния, и центрирует карту на полученном результате:

В следующем примере функция вызывает fetchFields() для получения сведений о месте, включая place.geometry.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', '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);
    }

Используйте API геокодирования

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

  • Используйте геокодирование, чтобы получить область просмотра для определенного региона.
  • Примените фильтрацию компонентов к запросу геокодирования, чтобы получить идентификаторы мест для административных районов 1-4, населенных пунктов или почтовых индексов.
  • Используйте обратное геокодирование для поиска идентификаторов мест по координатам широты/долготы или даже для получения идентификаторов мест для всех компонентов в определенном местоположении.

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

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

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

Обратное геокодирование можно использовать для поиска идентификаторов мест. Следующий пример функции службы геокодирования возвращает идентификаторы мест для всех компонентов адреса по указанным координатам широты/долготы:

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

В следующем примере функции показано использование сервиса геокодирования, добавление ограничений по компонентам с обратным геокодированием для получения всех компонентов адреса в указанном месте только для типа 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
```