Puoi utilizzare l'API Places e l'API Geocoding nell'API Maps JavaScript per cercare regioni e ottenere di più informazioni sui luoghi. API Geocoding e API Places sono alternative efficaci e stabili per ottenere gli ID luogo. Se hai già usando gli ID luogo, puoi facilmente riutilizzarli con gli stili basati sui dati per i confini.
Aggiungi luoghi e Geocoding alle tue app dell'API Maps JavaScript nel nei seguenti modi:
- Libreria Places, API Maps JavaScript, consente alla tua app di cercare luoghi e include un widget di completamento automatico.
- API Places restituisce informazioni sulle posizioni utilizzando le richieste HTTP.
- servizio di geocodifica e La classe geocodificatore può geocodificare e geocodifica invertita in modo dinamico a partire dall'input dell'utente.
- L'API Geocoding ti consente geocodificare indirizzi statici noti.
Utilizzare l'API Places
Utilizza la ricerca testuale (novità) per trovare una regione
Puoi utilizzare Ricerca testuale (novità)
per ottenere un ID luogo che includa i dati della regione utilizzando includedType
per specificare
il tipo di regione
da restituire. Utilizzo dell'API Text Search (nuova) per
solo gli ID luogo di richiesta
non comportano alcun costo. Scopri di più.
Questa mappa di esempio mostra una richiesta searchByText
per ottenere il luogo
ID per Trinidad, CA, poi applicare lo stile al confine:
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; } }; }
Visualizza il codice sorgente di esempio completo
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();
Utilizza la funzionalità di completamento automatico di Places per trovare le regioni
Il widget di completamento automatico di Places
offre un modo pratico per consentire agli utenti di cercare regioni. Per configurare
del widget Places Autocomplete per restituire solo le regioni, imposta types
su
(regions)
, come mostrato nello snippet seguente:
// Set up the Autocomplete widget to return only region results.
const autocompleteOptions = {
fields: ["place_id", "type"],
strictBounds: false,
types: ["(regions)"],
};
Visualizza i dettagli del luogo per una regione
I dati dei dettagli del luogo per una regione possono essere molto utili. Ad esempio, puoi:
- Cerca gli ID dei luoghi dei confini in base ai nomi dei luoghi.
- Ottieni l'area visibile per eseguire lo zoom su un confine.
- Ottieni il tipo di caratteristica per il confine (ad esempio
locality
). - Ottieni l'indirizzo formattato, che restituisce "Nome del luogo, Provincia, Paese" nell'area degli Stati Uniti (ad esempio, "Ottumwa, IA, USA").
- Ricevi altri dati utili come le foto.
La funzione di esempio seguente trova il confine per Trinidad, CA e centri la mappa sul risultato:
La funzione di esempio seguente chiama fetchFields()
per ottenere i dettagli del luogo
incluso place.geometry.viewport
, quindi chiama map.fitBounds()
per centrare
mappa sul poligono di confine selezionato.
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);
}
Utilizzare l'API Geocoding
L'API Geocoding ti consente convertire gli indirizzi in coordinate geografiche e viceversa. Le seguenti si combinano bene con gli stili basati sui dati per definire i confini:
- Usa Geocoding per ottenere l'area visibile di una regione.
- Applica il filtro dei componenti alla chiamata di geocodifica per ottenere gli ID luogo per aree amministrative 1-4, località o codice postale.
- Utilizza la geocodifica inversa per trovare gli ID luogo in base alle coordinate di latitudine/longitudine oppure e restituire ID luogo per tutti i componenti in una determinata località.
Ottieni l'area visibile per una regione
Il servizio Geocoding può prendere un ID luogo e restituire un'area visibile,
può passare a map.fitBounds()
per eseguire lo zoom su un poligono di confine sulla mappa. L'esempio seguente mostra
usando il servizio Geocoding per ottenere un'area visibile, quindi chiamando 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)
});
}
Utilizzare la geocodifica inversa
Per trovare gli ID luogo, è possibile utilizzare la geocodifica inversa. Nell'esempio seguente, Geocodifica la funzione di servizio restituisce gli ID luogo per tutti i componenti dell'indirizzo nella coordinate di latitudine/longitudine specificate:
// 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)
});
}
Si tratta della geocodifica inversa equivalente Chiamata al servizio web:
https://maps.googleapis.com/maps/api/geocode/json?key="YOUR_API_KEY"&latlng=41.864182,-87.676930
Per utilizzare la geocodifica inversa con il filtro dei componenti in modo da ottenere il componente indirizzo per uno o più dei seguenti tipi nella località specificata:
administrativeArea
country
locality
postalCode
La funzione di esempio successiva mostra come utilizzare il servizio Geocoding, aggiungendo un componente
limitazioni con la geocodifica inversa per ottenere tutti i componenti dell'indirizzo
località specificata solo per il tipo 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)
});
}
Si tratta della geocodifica inversa equivalente Chiamata al servizio web:
https://maps.googleapis.com/maps/api/geocode/json?key="YOUR_API_KEY"&latlng=41.864182,-87.676930&result_type=locality