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

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

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

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

Добавьте места и геокодирование в приложения JavaScript API Карт следующими способами:

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

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

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

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

Машинопись 

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

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

Машинопись 

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

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

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

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

Получить подробную информацию о месте в регионе

Данные о местоположении в регионе могут быть весьма полезны. Например, вы можете:

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

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

В следующем примере функция вызывает 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
```