Menggunakan Places API dan Geocoding dengan gaya visual berbasis data untuk batas

Pilih platform: iOS JavaScript

Anda dapat menggunakan Places API dan Geocoding API di Maps JavaScript API untuk menelusuri wilayah, dan mendapatkan lebih banyak informasi tentang tempat. Geocoding API dan Places API adalah alternatif yang efektif dan stabil untuk mendapatkan ID tempat. Jika sudah menggunakan ID tempat, Anda dapat menggunakan kembali ID tersebut dengan mudah menggunakan gaya visual berbasis data untuk batas.

Tambahkan Places dan Geocoding ke aplikasi Maps JavaScript API dengan cara berikut:

Menggunakan Places API

Menggunakan Text Search (Baru) untuk menemukan wilayah

Anda dapat menggunakan Text Search (Baru) untuk mendapatkan ID tempat yang mencakup data wilayah menggunakan includedType untuk menentukan jenis wilayah yang akan ditampilkan. Penggunaan Text Search API (Baru) untuk meminta hanya ID tempat tidak dikenai biaya. Pelajari lebih lanjut.

Contoh peta ini menunjukkan cara membuat permintaan searchByText guna mendapatkan ID tempat untuk Trinidad, CA, lalu menerapkan gaya pada batas:

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

Lihat contoh kode sumber yang lengkap

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

Menggunakan Place Autocomplete untuk menemukan wilayah

Widget Place Autocomplete menyediakan cara yang mudah bagi pengguna Anda untuk menelusuri wilayah. Untuk mengonfigurasi widget Place Autocomplete agar hanya menampilkan wilayah, tetapkan types ke (regions), seperti yang ditunjukkan dalam cuplikan berikut:

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

Mendapatkan detail tempat untuk suatu wilayah

Data detail tempat untuk suatu wilayah dapat sangat berguna. Misalnya, Anda dapat:

  • Menelusuri ID tempat batas berdasarkan nama tempat.
  • Mendapatkan area tampilan untuk zoom hingga batas.
  • Mendapatkan jenis fitur untuk batas (misalnya, locality).
  • Mendapatkan alamat berformat, yang me-resolve ke "Place Name, State, Country" di wilayah Amerika Serikat (misalnya, "Ottumwa, IA, USA").
  • Mendapatkan data bermanfaat lainnya seperti foto.

Contoh fungsi berikut menemukan batas untuk Trinidad, CA, dan memusatkan peta pada hasilnya:

Contoh fungsi berikut memanggil fetchFields() untuk mendapatkan detail tempat termasuk place.geometry.viewport, lalu memanggil map.fitBounds() untuk memusatkan peta pada poligon batas yang dipilih.

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

Menggunakan Geocoding API

Geocoding API memungkinkan Anda mengonversi alamat menjadi koordinat geografis, dan sebaliknya. Penggunaan berikut dapat digabungkan dengan gaya visual berbasis data untuk batas:

  • Gunakan Geocoding untuk mendapatkan area tampilan untuk suatu wilayah.
  • Terapkan pemfilteran komponen ke panggilan Geocoding Anda guna mendapatkan ID tempat untuk wilayah administratif 1-4, lokalitas, atau kode pos.
  • Gunakan geocoding terbalik untuk menemukan ID tempat berdasarkan koordinat lintang/bujur, atau bahkan menampilkan ID tempat untuk semua komponen di lokasi tertentu.

Mendapatkan area tampilan untuk suatu wilayah

Layanan Geocoding dapat mengambil ID tempat dan menampilkan area tampilan, yang dapat Anda teruskan ke fungsi map.fitBounds() untuk melakukan zoom ke poligon batas pada peta. Contoh berikut menunjukkan penggunaan layanan Geocoding untuk mendapatkan area tampilan, lalu memanggil 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)
        });
}

Menggunakan geocoding terbalik

Geocoding terbalik dapat digunakan untuk menemukan ID tempat. Contoh fungsi layanan Geocoding berikut menampilkan ID tempat untuk semua komponen alamat pada koordinat lintang/bujur yang ditentukan:

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

Ini adalah panggilan layanan Web geocoding terbalik yang setara:

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

Untuk menggunakan geocoding terbalik dengan pemfilteran komponen guna mendapatkan komponen alamat untuk satu atau beberapa jenis berikut di lokasi yang ditentukan:

  • administrativeArea
  • country
  • locality
  • postalCode

Contoh fungsi berikutnya menunjukkan penggunaan layanan Geocoding, yang menambahkan pembatasan komponen dengan geocoding terbalik untuk mendapatkan semua komponen alamat di lokasi yang ditentukan hanya untuk jenis 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)
        });
}

Ini adalah panggilan layanan Web geocoding terbalik yang setara:

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