Używanie interfejsów API Mapy i geokodowania do stylizacji granic za pomocą stylu opartego na danych

Wybierz platformę: Android iOS JavaScript

Aby wyszukiwać regiony i uzyskiwać więcej informacji o miejscach, możesz używać interfejsów Places API i Geocoding API w interfejsie Maps JavaScript API. Interfejsy Geocoding API i Places API to wydajne i stabilne alternatywy umożliwiające uzyskiwanie identyfikatorów miejsc. Jeśli używasz już identyfikatorów miejsc, możesz je łatwo ponownie wykorzystać do stylizacji granic na podstawie danych.

Dodaj do swoich aplikacji korzystających z interfejsu Maps JavaScript API usługi Miejsca i geokodowania w jeden z tych sposobów:

Korzystanie z Places API

Znajdowanie regionu za pomocą wyszukiwania tekstowego (nowego)

Możesz użyć wyszukiwania tekstowego (nowego), aby uzyskać identyfikator miejsca, który zawiera dane o regionie. Aby określić typ regionu, użyj parametru includedType. Korzystanie z interfejsu Text Search API (New) do wysyłania tylko zapytań o identyfikatory miejsc jest bezpłatne. Więcej informacji

Ta przykładowa mapa pokazuje wysłanie żądania searchByText w celu uzyskania identyfikatora miejsca Trinidad w Kanadzie, a następnie zastosowanie stylu 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;
        }
    };
}
index.ts

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;
    }
  };
}

index.js

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();
index.ts

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();
index.js

Używanie autouzupełniania miejsc do znajdowania regionów

Widżet autouzupełniania miejsc umożliwia użytkownikom wyszukiwanie regionów. Aby skonfigurować widget Autouzupełnianie miejsc tak, aby zwracał tylko regiony, ustaw wartość parametru types na (regions), jak pokazano w tym fragmencie kodu:

// Set up the Autocomplete widget to return only region results.
const autocompleteOptions = {
  fields: ["place_id", "type"],
  strictBounds: false,
  types: ["(regions)"],
};

Wyświetlanie szczegółów miejsca w regionie

Dane o miejscach w danym regionie mogą być bardzo przydatne. Możesz na przykład:

  • Wyszukaj identyfikatory miejsc na podstawie nazw miejsc.
  • Pobierz widoczny obszar, aby powiększyć do granicy.
  • Uzyskaj typ elementu dla granicy (na przykład locality).
  • Uzyskaj sformatowany adres, który w Stanach Zjednoczonych jest rozwiązywany do „Nazwa miejsca, stan, kraj” (np. „Ottumwa, IA, USA”).
  • uzyskiwać inne przydatne dane, takie jak zdjęcia.

Funkcja przykładowa, która znajduje granicę Trinidadu w Kalifornii i wyśrodkowuje mapę na podstawie uzyskanego wyniku:

W tym przykładzie funkcja wywołuje funkcję fetchFields(), aby uzyskać szczegóły miejsca, w tym place.geometry.viewport, a potem wywołuje funkcję map.fitBounds(), aby wyśrodkować mapę na wybranym poligonie 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 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);
    }

Korzystanie z Geocoding API

Interfejs Geocoding API umożliwia konwertowanie adresów na współrzędne geograficzne i odwrotnie. Te elementy dobrze współpracują ze stylem opartym na danych w przypadku granic:

  • Użyj geokodowania, aby uzyskać widok dla regionu.
  • Zastosuj filtrowanie komponentów do wywołania geokodowania, aby uzyskać identyfikatory miejsc dla obszarów administracyjnych 1–4, miejscowości lub kodu pocztowego.
  • Za pomocą odwrotnego geokodowania możesz znaleźć identyfikatory miejsc na podstawie współrzędnych szerokości i długości geograficznej lub zwrócić identyfikatory wszystkich komponentów w danej lokalizacji.

Pobieranie widocznego obszaru dla regionu

Usługa geokodowania może przyjąć identyfikator miejsca i zwrócić widok, który możesz przekazać funkcji map.fitBounds(), aby powiększyć obszar na mapie do granicy poligonu. Ten przykład pokazuje, jak za pomocą usługi Geokodowania uzyskać widok, a następnie wywołać 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)
        });
}

Używanie odwrotnego geokodowania

Odwrotne geokodowanie może służyć do znajdowania identyfikatorów miejsc. W tym przykładzie funkcja usługi geokodowania zwraca identyfikatory miejsc dla wszystkich elementów adresu w współrzędnych szerokości i długości geograficznej podanych w funkcji:

// 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)
        });
}

Oto odpowiedni odwrotny geokodowanie: wywołanie usługi internetowej:

```html
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 uzyskania komponentu adresu w przypadku co najmniej jednego z tych typów w wybranym miejscu:

  • administrativeArea
  • country
  • locality
  • postalCode

Następująca przykładowa funkcja korzysta z usługi geokodowania, dodając ograniczenia komponentów za pomocą odwrotnego geokodowania, aby uzyskać wszystkie komponenty adresu w określonej 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 internetowej:

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