Разместите объект
Объект Place , содержащий информацию о месте, динамически возвращается функциями текстового поиска, поиска поблизости и автозаполнения мест. Вы также можете создать объект Place на основе идентификатора места или имени ресурса (имя ресурса — это идентификатор места с префиксом places/ ). Следующий фрагмент кода показывает создание объекта Place с использованием идентификатора места:
// Use a place ID to create a new Place instance. const place = new Place({ id: 'ChIJyYB_SZVU2YARR-I1Jjf08F0', // San Diego Zoo });
Вы также можете создать объект Place на основе имени ресурса места:
// Use a place resource name to create a new Place instance. const place = new Place({ resourceName: 'places/ChIJyYB_SZVU2YARR-I1JRF08F0', // San Diego Zoo });
Для получения более подробной информации см. PlaceOptions .
Получение полей
Если у вас уже есть объект 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: 'ChIJyYB_SZVU2YARR-I1Jjf08F0', // San Diego Zoo }); // Call fetchFields, passing the desired data fields. await place.fetchFields({ fields: [ 'displayName', 'formattedAddress', 'location', 'googleMapsURI', ], }); // Add an Advanced Marker const marker = new AdvancedMarkerElement({ map: innerMap, position: place.location, title: place.displayName, }); // Assemble the info window content. const content = document.createElement('div'); const address = document.createElement('div'); const placeId = document.createElement('div'); address.textContent = place.formattedAddress || ''; placeId.textContent = place.id; content.append(placeId, address); if (place.googleMapsURI) { const link = document.createElement('a'); link.href = place.googleMapsURI; link.target = '_blank'; link.textContent = 'View Details on Google Maps'; content.appendChild(link); } // Display an info window. infoWindow.setHeaderContent(place.displayName); infoWindow.setContent(content); infoWindow.open({ anchor: marker, }); }
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: 'ChIJyYB_SZVU2YARR-I1Jjf08F0', // San Diego Zoo }); // Call fetchFields, passing the desired data fields. await place.fetchFields({ fields: [ 'displayName', 'formattedAddress', 'location', 'googleMapsURI', ], }); // Add an Advanced Marker const marker = new AdvancedMarkerElement({ map: innerMap, position: place.location, title: place.displayName, }); // Assemble the info window content. const content = document.createElement('div'); const address = document.createElement('div'); const placeId = document.createElement('div'); address.textContent = place.formattedAddress || ''; placeId.textContent = place.id; content.append(placeId, address); if (place.googleMapsURI) { const link = document.createElement('a'); link.href = place.googleMapsURI; link.target = '_blank'; link.textContent = 'View Details on Google Maps'; content.appendChild(link); } // Display an info window. infoWindow.setHeaderContent(place.displayName); infoWindow.setContent(content); infoWindow.open({ anchor: marker, }); }
Map и Place были объявлены до этой функции:const { Map } = await google.maps.importLibrary("maps"); const { Place } = await google.maps.importLibrary("places");