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

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

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

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

• Библиотека мест, API Карт JavaScript , позволяет вашему приложению выполнять поиск мест и включает виджет автозаполнения.
• API мест возвращает информацию о местах с помощью HTTP-запросов.
• Служба геокодирования и класс Geocoder могут динамически геокодировать и обратно геокодировать данные, введенные пользователем.
• API геокодирования позволяет геокодировать статические известные адреса.

Примечание: Geocoding API , Places API и Places API (новый) (для текстового поиска (новый)) должны быть включены и оплачиваются отдельно от Maps JavaScript API.

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

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

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

В этом примере карты показано выполнение запроса 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

Примечание: прочитайте руководство по использованию TypeScript и Google Maps.

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

Примечание: прочитайте руководство по использованию TypeScript и Google Maps.

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

Примечание: В период предварительного просмотра вы ограничены максимум 10 запросами в секунду на проект. Узнать больше .

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

Виджет автозаполнения мест предоставляет удобный способ, позволяющий вашим пользователям искать регионы. Чтобы настроить виджет автозаполнения мест для возврата только регионов, установите 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 геокодирования

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

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

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

Служба 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)
        });
}

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

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

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