Извлечь поля
Если у вас есть существующий объект Place
или идентификатор места, используйте метод Place.fetchFields()
чтобы получить сведения об этом месте. Укажите разделенный запятыми список полей данных места для возврата; укажите имена полей в camel case. Используйте возвращенный объект Place
, чтобы получить данные для запрошенных полей.
В следующем примере используется идентификатор места для создания нового Place
, вызывается Place.fetchFields()
запрашивающий поля displayName
и formattedAddress
, добавляется маркер на карту и выводятся некоторые данные в консоль.
Машинопись
async function getPlaceDetails() { const { Place } = await google.maps.importLibrary("places") as google.maps.PlacesLibrary; const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; // Use place ID to create a new Place instance. const place = new Place({ id: 'ChIJN5Nz71W3j4ARhx5bwpTQEGg', requestedLanguage: 'en', // optional }); // Call fetchFields, passing the desired data fields. await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] }); // Log the result console.log(place.displayName); console.log(place.formattedAddress); // Add an Advanced Marker const marker = new AdvancedMarkerElement({ map, position: place.location, title: place.displayName, }); }
JavaScript
async function getPlaceDetails() { const { Place } = await google.maps.importLibrary("places"); const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); // Use place ID to create a new Place instance. const place = new Place({ id: "ChIJN5Nz71W3j4ARhx5bwpTQEGg", requestedLanguage: "en", // optional }); // Call fetchFields, passing the desired data fields. await place.fetchFields({ fields: ["displayName", "formattedAddress", "location"], }); // Log the result console.log(place.displayName); console.log(place.formattedAddress); // Add an Advanced Marker const marker = new AdvancedMarkerElement({ map, position: place.location, title: place.displayName, }); }
Map
и Place
были объявлены до этой функции:const { Map } = await google.maps.importLibrary("maps"); const { Place } = await google.maps.importLibrary("places");
Используйте компонент «Обзор места»
Компонент Place Overview отображает подробную информацию о миллионах предприятий, включая часы работы, отзывы и фотографии, а также направления и другие действия в готовом пользовательском интерфейсе в 5 размерах и форматах. Он является частью Extended Component Library из Google Maps Platform, набора веб-компонентов, которые помогают разработчикам быстрее создавать лучшие карты и функции местоположения.
Используйте конфигуратор Place Overview , чтобы создать встраиваемый код для пользовательского компонента Place Overview, а затем экспортировать его для использования с популярными фреймворками, такими как React и Angular, или вообще без фреймворка.