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 uzyskanie 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 Maps JavaScript API miejsca i geokodowanie w jeden z tych sposobów:

Korzystanie z Places API

Znajdowanie regionu za pomocą wyszukiwania tekstowego (nowego)

Możesz użyć wyszukiwania tekstu (nowej wersji), 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 zapewnia użytkownikom wygodny sposób wyszukiwania regionów. Aby skonfigurować widżet autouzupełniania Miejsca tak, aby zwracał tylko regiony, ustaw 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)"],
};

Pobieranie szczegółów miejsca w regionie

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

  • Szukaj identyfikatorów miejsc na podstawie nazw miejsc.
  • Pobierz widoczny obszar, aby powiększyć do granicy.
  • Uzyskaj typ funkcji 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”).
  • Pobierać 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 fetchFields() 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 interfejsu Geocoding API

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

  • 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 pobrać 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 umożliwia znajdowanie 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ą geokodowania odwrotnego, 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
```