Utilizzare le API Places e Geocoding con gli stili basati sui dati per i confini

Seleziona la piattaforma: Android iOS JavaScript

Sviluppatori dello Spazio economico europeo (SEE)

Puoi utilizzare l'API Places e l'API Geocoding nell'API Maps JavaScript per cercare regioni e ottenere maggiori informazioni sui luoghi. L'API Geocoding e l'API Places sono alternative potenti e stabili per ottenere gli ID luogo. Se utilizzi già gli ID luogo, puoi riutilizzarli facilmente con gli stili basati sui dati per i confini.

Aggiungi Places e Geocoding alle tue app dell'API Maps JavaScript nei seguenti modi:

Utilizzare l'API Places

Utilizzare la ricerca testuale (New) per trovare una regione

Puoi utilizzare Ricerca testuale (New) per ottenere un ID luogo che includa i dati della regione utilizzando includedType per specificare il tipo di regione da restituire. L'utilizzo dell'API Ricerca testuale (New) per richiedere solo gli ID luogo non comporta alcun addebito. Scopri di più.

Questa mappa di esempio mostra come effettuare una richiesta searchByText per ottenere l'ID luogo di Trinidad, CA, quindi applicare lo stile al confine:

TypeScript

async function findBoundary() {
    const request = {
        textQuery: 'Trinidad, CA',
        fields: ['id', 'location'],
        includedType: 'locality',
        locationBias: center,
    };

    const { Place } = (await google.maps.importLibrary(
        'places'
    )) as google.maps.PlacesLibrary;
    const { places } = await Place.searchByText(request);

    if (places.length) {
        const place = places[0];
        styleBoundary(place.id);
        innerMap.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

JavaScript

async function findBoundary() {
    const request = {
        textQuery: 'Trinidad, CA',
        fields: ['id', 'location'],
        includedType: 'locality',
        locationBias: center,
    };
    const { Place } = (await google.maps.importLibrary('places'));
    const { places } = await Place.searchByText(request);
    if (places.length) {
        const place = places[0];
        styleBoundary(place.id);
        innerMap.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

Visualizza il codice sorgente di esempio completo

TypeScript

let innerMap;
let featureLayer;
let center;

async function initMap() {
    // Load the needed libraries.
    (await google.maps.importLibrary('maps')) as google.maps.MapsLibrary;

    center = { lat: 41.059, lng: -124.151 }; // Trinidad, CA

    // Get the gmp-map element.
    const mapElement = document.querySelector(
        'gmp-map'
    ) as google.maps.MapElement;

    // Get the inner map.
    innerMap = mapElement.innerMap;

    // Get the LOCALITY feature layer.
    featureLayer = innerMap.getFeatureLayer(google.maps.FeatureType.LOCALITY);

    findBoundary();
}
async function findBoundary() {
    const request = {
        textQuery: 'Trinidad, CA',
        fields: ['id', 'location'],
        includedType: 'locality',
        locationBias: center,
    };

    const { Place } = (await google.maps.importLibrary(
        'places'
    )) as google.maps.PlacesLibrary;
    const { places } = await Place.searchByText(request);

    if (places.length) {
        const place = places[0];
        styleBoundary(place.id);
        innerMap.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

JavaScript

let innerMap;
let featureLayer;
let center;
async function initMap() {
    // Load the needed libraries.
    (await google.maps.importLibrary('maps'));
    center = { lat: 41.059, lng: -124.151 }; // Trinidad, CA
    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map');
    // Get the inner map.
    innerMap = mapElement.innerMap;
    // Get the LOCALITY feature layer.
    featureLayer = innerMap.getFeatureLayer(google.maps.FeatureType.LOCALITY);
    findBoundary();
}
async function findBoundary() {
    const request = {
        textQuery: 'Trinidad, CA',
        fields: ['id', 'location'],
        includedType: 'locality',
        locationBias: center,
    };
    const { Place } = (await google.maps.importLibrary('places'));
    const { places } = await Place.searchByText(request);
    if (places.length) {
        const place = places[0];
        styleBoundary(place.id);
        innerMap.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

Utilizzare il completamento automatico di Places per trovare le regioni

Il widget Place Autocomplete offre un modo pratico per consentire agli utenti di cercare le regioni. Per configurare il widget Place Autocomplete in modo che restituisca solo le regioni, imposta includedPrimaryTypes su (regions), come mostrato nel seguente snippet:

// Set up the Autocomplete widget to return only region results.
placeAutocomplete = document.querySelector(
    'gmp-place-autocomplete'
) as google.maps.places.PlaceAutocompleteElement;
placeAutocomplete.includedPrimaryTypes = ['(regions)'];

Ottenere i dettagli del luogo per una regione

I dati dei dettagli del luogo per una regione possono essere molto utili. Ad esempio, puoi:

  • Cercare gli ID luogo dei confini in base ai nomi dei luoghi.
  • Ottenere l'area visibile per eseguire lo zoom su un confine.
  • Ottenere il tipo di funzionalità per il confine (ad esempio locality).
  • Ottenere l'indirizzo formattato, che si risolve in "Nome luogo, Stato, Paese" nella regione degli Stati Uniti (ad esempio, "Ottumwa, IA, USA").
  • Ottenere altri dati utili, come recensioni e foto degli utenti.

La seguente funzione di esempio trova il confine di Trinidad, CA, e centra la mappa sul risultato:

La seguente funzione di esempio chiama fetchFields() per ottenere i dettagli del luogo, incluso place.geometry.viewport, quindi chiama map.fitBounds() per centrare la 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 data fields you want.
        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 consente di convertire gli indirizzi in coordinate geografiche e viceversa. I seguenti utilizzi si combinano bene con gli stili basati sui dati per i confini:

  • Utilizza la geocodifica per ottenere l'area visibile di una regione.
  • Applica il filtro dei componenti alla chiamata di geocodifica per ottenere gli ID luogo per le aree amministrative 1-4, la località o il codice postale.
  • Utilizza la geocodifica inversa per trovare gli ID luogo in base alle coordinate di latitudine/longitudine o persino per restituire gli ID luogo per tutti i componenti in una determinata località.

Ottenere l'area visibile di una regione

Il servizio Geocoding può accettare un ID luogo e restituire un'area visibile, che puoi passare alla map.fitBounds() funzione per eseguire lo zoom su un poligono di confine sulla mappa. L'esempio seguente mostra come utilizzare il servizio Geocoding per ottenere un'area visibile, quindi chiamare 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

La geocodifica inversa può essere utilizzata per trovare gli ID luogo. La seguente funzione del servizio Geocoding di esempio restituisce gli ID luogo per tutti i componenti dell'indirizzo alle 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)
        });
}

Ecco la chiamata al servizio web di geocodifica inversa equivalente: geocodifica inversa 

```html
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 per ottenere il componente dell'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 restrizioni sui componenti con la geocodifica inversa per ottenere tutti i componenti dell'indirizzo nella 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)
        });
}

Questa è la chiamata al servizio web di geocodifica inversa equivalente:

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