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

Wybierz platformę: Android iOS JavaScript

Deweloperzy z Europejskiego Obszaru Gospodarczego (EOG)

Za pomocą interfejsów Places API i Geocoding API w interfejsie Maps JavaScript API możesz wyszukiwać regiony i uzyskiwać więcej informacji o miejscach. Interfejsy Geocoding API i Places API to wydajne i stabilne alternatywy do uzyskiwania identyfikatorów miejsc. Jeśli używasz już identyfikatorów miejsc, możesz łatwo wykorzystać je ponownie w stylach opartych na danych w przypadku granic.

Dodaj Miejsca i geokodowanie do aplikacji Maps JavaScript API w jeden z tych sposobów:

Korzystanie z interfejsu Places API

Znajdowanie regionu za pomocą wyszukiwania tekstowego (nowa funkcja)

Za pomocą wyszukiwania tekstowego (nowego) możesz uzyskać identyfikator miejsca zawierający dane regionu, używając parametru includedType do określenia typu regionu, który ma zostać zwrócony. Korzystanie z interfejsu Text Search (New) API w celu wysyłania zapytań tylko o identyfikatory miejsc nie wiąże się z żadnymi opłatami. Więcej informacji

Ta przykładowa mapa pokazuje, jak wysłać żądanie searchByText, aby uzyskać identyfikator miejsca dla Trinidad w Kalifornii, a następnie zastosować 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;
        }
    };
}
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

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();
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

Znajdowanie regionów za pomocą autouzupełniania miejsc

Widżet autouzupełniania miejsc ułatwia użytkownikom wyszukiwanie regionów. Aby skonfigurować widżet autouzupełniania 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)"],
};

Pobieranie szczegółów miejsca w regionie

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

  • Wyszukiwanie identyfikatorów miejsc granicznych na podstawie nazw miejsc.
  • Pobierz widoczny obszar, aby powiększyć go do granicy.
  • Pobierz typ funkcji dla granicy (np. locality).
  • Uzyskaj sformatowany adres, który w Stanach Zjednoczonych będzie miał postać „Nazwa miejsca, Stan, Kraj” (np. „Ottumwa, IA, USA”).
  • uzyskiwać inne przydatne dane, takie jak zdjęcia.

Poniższa funkcja znajduje granicę miasta Trinidad w Kalifornii i wyśrodkowuje mapę na wyniku:

W tym przykładzie funkcja wywołuje fetchFields(), aby uzyskać szczegóły miejsca, w tym place.geometry.viewport, a następnie wywołuje map.fitBounds(), aby wyśrodkować mapę na wybranym wielokącie granicznym.

    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

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

  • Użyj geokodowania, aby uzyskać widoczny obszar regionu.
  • Zastosuj filtrowanie komponentów w wywołaniu Geocoding, aby uzyskać identyfikatory miejsc dla obszarów administracyjnych 1–4, miejscowości lub kodu pocztowego.
  • Użyj odwrotnego geokodowania, aby znaleźć identyfikatory miejsc na podstawie współrzędnych geograficznych, lub zwróć identyfikatory miejsc dla wszystkich komponentów w określonej lokalizacji.

Pobieranie widocznego obszaru dla regionu

Usługa geokodowania może pobrać identyfikator miejsca i zwrócić widoczny obszar, który możesz przekazać do funkcji map.fitBounds(), aby powiększyć wielokąt graniczny na mapie. W tym przykładzie pokazujemy, jak za pomocą usługi Geocoding uzyskać widoczny obszar, 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)
        });
}

Korzystanie z odwrotnego geokodowania

Do znajdowania identyfikatorów miejsc można używać odwrotnego geokodowania. Poniższa funkcja usługi Geocoding zwraca identyfikatory miejsc dla wszystkich komponentów adresu o określonych współrzędnych geograficznych:

// 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 odpowiednie wywołanie usługi internetowej odwrotnego geokodowania:

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

Aby użyć geokodowania zwrotnego z filtrowaniem komponentów w celu uzyskania komponentu adresu dla co najmniej 1 z tych typów w określonej lokalizacji:

  • administrativeArea
  • country
  • locality
  • postalCode

Następna przykładowa funkcja pokazuje, jak używać usługi geokodowania, dodając ograniczenia dotyczące 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 wywołania usługi internetowej odwrotnego geokodowania:

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