Możesz używać interfejsów Places API i Geocoding API w Maps JavaScript API, aby wyszukiwać regiony i uzyskiwać więcej informacje o miejscach. Geocoding API i Places API to skuteczne i stabilne rozwiązanie, które pozwala uzyskać identyfikatory miejsc. Jeśli już używasz konta za pomocą identyfikatorów miejsc, możesz łatwo ponownie wykorzystać te identyfikatory za pomocą stylu opartego na danych dla granic.
Dodaj Miejsca i Geokodowanie do aplikacji Maps JavaScript API w w następujący sposób:
- Biblioteka Miejsc, Maps JavaScript API, umożliwia aplikacji wyszukiwanie miejsc i zawiera widżet autouzupełniania.
- Interfejs Places API zwraca informacje o miejscach za pomocą żądań HTTP.
- usługa geokodowania, Klasa geokodera może geokodować i dynamicznie odwracać geokodowanie na podstawie danych wejściowych użytkownika.
- Geocoding API umożliwia geokod, znane adresy.
Korzystanie z interfejsu Places API
Znajdowanie regionu za pomocą wyszukiwania tekstowego (nowego)
Możesz użyć funkcji wyszukiwania tekstowego (nowość).
aby uzyskać identyfikator miejsca zawierający dane regionu, używając parametru includedType
do określenia
typ regionu
zwrócić. Zastosowanie interfejsu Text Search (nowy) API do
tylko żądania identyfikatorów miejsc. Więcej informacji
Ta przykładowa mapa pokazuje wysłanie żądania searchByText
, aby uzyskać dostęp do miejsca
Identyfikator dla Trinidad w Kalifornii, a następnie zastosuj styl do granicy:
TypeScript
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; } }; }
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; } }; }
Zobacz pełny przykładowy kod źródłowy
TypeScript
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();
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();
Używanie autouzupełniania miejsc do znajdowania regionów
widżet autouzupełniania Miejsc,
stanowi wygodny sposób na umożliwienie użytkownikom wyszukiwania regionów. Aby skonfigurować
w widżecie autouzupełniania miejsc, aby zwracał tylko regiony, ustaw types
na
(regions)
na przykład w tym fragmencie:
// Set up the Autocomplete widget to return only region results.
const autocompleteOptions = {
fields: ["place_id", "type"],
strictBounds: false,
types: ["(regions)"],
};
Pobieranie szczegółowych informacji o miejscu w regionie
Szczegółowe informacje o miejscach w regionie mogą być całkiem przydatne. Możesz na przykład:
- Wyszukuj identyfikatory miejsc przy granicach na podstawie nazw miejsc.
- Pobierz widoczny obszar, aby powiększyć do granicy granicy.
- Pobierz typ cechy granicy (na przykład
locality
). - Uzyskaj sformatowany adres, który ma format „Nazwa miejsca, Stan, Kraj”. w regionie Stanów Zjednoczonych (np. „Ottumwa, IA, USA”).
- Uzyskiwanie innych przydatnych danych, np. zdjęć.
Ta przykładowa funkcja znajduje granicę Trynidadu, Kalifornii i ośrodków mapę w wyniku:
Poniższa przykładowa funkcja wywołuje fetchFields()
, aby uzyskać szczegółowe informacje o miejscu
w tym place.geometry.viewport
, a potem wywołuje map.fitBounds()
, aby wyśrodkować
na wybranym wielokątie granicy.
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);
}
Używanie interfejsu Geocoding API
Interfejs Geocoding API umożliwia konwertują adresy na współrzędne geograficzne i odwrotnie. Poniżej zastosowania dobrze łączą się ze stylem opartym na danych w przypadku granic:
- Użyj geokodowania, by uzyskać widoczny obszar dla danego regionu.
- Zastosuj filtrowanie komponentów do wywołania Geokodowanie, aby uzyskać identyfikatory miejsc obszary administracyjne 1–4, miejscowość lub kod pocztowy.
- użyć odwrotnego geokodowania, aby znaleźć identyfikatory miejsc według współrzędnych geograficznych bądź szerokości i długości geograficznej; zwraca identyfikatory miejsc dla wszystkich komponentów w konkretnej lokalizacji.
Pobieranie widocznego obszaru dla regionu
Usługa Geocoding może przyjąć identyfikator miejsca i zwrócić widoczny obszar,
mogą być przekazywane do map.fitBounds()
w celu powiększenia wielokąta granicy na mapie. Następujący przykład pokazuje:
za pomocą usługi Geokodowanie w celu uzyskania widocznego obszaru, a potem wywołując funkcję 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)
});
}
Odwrotne geokodowanie
Aby znaleźć identyfikatory miejsc, można użyć odwrotnego geokodowania. Geokodowanie poniżej funkcja usługi zwraca identyfikatory miejsc dla wszystkich komponentów adresu w elemencie określone współrzędne szerokości i długości geograficznej:
// 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)
});
}
Jest to odpowiednik odwrotnego geokodowania Wywołanie usługi sieciowej:
https://maps.googleapis.com/maps/api/geocode/json?key="YOUR_API_KEY"&latlng=41.864182,-87.676930
Aby użyć odwrotnego geokodowania z filtrowaniem komponentów w celu pobrania komponentu adresu dla co najmniej jednego z tych typów w określonej lokalizacji:
administrativeArea
country
locality
postalCode
Następna przykładowa funkcja jest wyświetlana przy użyciu usługi Geocoding, dodając komponent
za pomocą odwrotnego geokodowania, by wszystkie składniki adresu były w
w podanej lokalizacji tylko dla typu 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)
});
}
Jest to odpowiednik odwrotnego geokodowania Wywołanie usługi sieciowej:
https://maps.googleapis.com/maps/api/geocode/json?key="YOUR_API_KEY"&latlng=41.864182,-87.676930&result_type=locality