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

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

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

• Библиотека мест, Maps JavaScript API , позволяет вашему приложению выполнять поиск мест и включает виджет автозаполнения.
• Places API возвращает информацию о местах с помощью HTTP-запросов.
• Служба геокодирования и класс геокодера могут выполнять геокодирование и обратное геокодирование динамически на основе пользовательского ввода.
• 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

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

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 desired data fields.
        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)
        });
}

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

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

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

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