Sử dụng API Địa điểm và tính năng Mã hoá địa lý với kiểu dáng dựa trên dữ liệu cho các ranh giới

Chọn nền tảng: Android iOS JavaScript

Bạn có thể sử dụng API Địa điểm và API Mã hoá địa lý trong API Maps JavaScript để tìm kiếm các khu vực và nhận thêm thông tin về các địa điểm. Geocoding API và Places API là các giải pháp thay thế mạnh mẽ và ổn định để lấy mã địa điểm. Nếu đang sử dụng mã địa điểm, bạn có thể dễ dàng sử dụng lại các mã đó bằng cách tạo kiểu dựa trên dữ liệu cho các ranh giới.

Thêm tính năng Địa điểm và Mã hoá địa lý vào các ứng dụng Maps JavaScript API theo các cách sau:

Sử dụng API Địa điểm

Sử dụng tính năng Tìm kiếm bằng văn bản (Mới) để tìm một khu vực

Bạn có thể sử dụng tính năng Tìm kiếm bằng văn bản (Mới) để lấy mã địa điểm có chứa dữ liệu khu vực bằng cách sử dụng includedType để chỉ định loại khu vực cần trả về. Bạn sẽ không phải trả phí khi sử dụng API Tìm kiếm văn bản (Mới) chỉ để yêu cầu mã địa điểm. Tìm hiểu thêm.

Bản đồ mẫu này minh hoạ việc tạo yêu cầu searchByText để lấy mã nhận dạng địa điểm cho Trinidad, CA, sau đó áp dụng kiểu cho ranh giới:

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

Xem mã nguồn ví dụ đầy đủ

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

Sử dụng tính năng Tự động điền địa điểm để tìm khu vực

Tiện ích Tự động hoàn thành địa điểm cung cấp một cách thuận tiện để cho phép người dùng tìm kiếm các khu vực. Để định cấu hình tiện ích Tự động hoàn thành địa điểm chỉ trả về các khu vực, hãy đặt types thành (regions), như trong đoạn mã sau:

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

Nhận thông tin chi tiết về địa điểm cho một khu vực

Dữ liệu chi tiết về địa điểm cho một khu vực có thể khá hữu ích. Ví dụ như bạn có thể:

  • Tìm mã địa điểm ranh giới dựa trên tên địa điểm.
  • Lấy khung nhìn để phóng to một ranh giới.
  • Lấy loại đối tượng cho ranh giới (ví dụ: locality).
  • Nhận địa chỉ đã định dạng, địa chỉ này sẽ chuyển đến "Tên địa điểm, Tiểu bang, Quốc gia" trong khu vực Hoa Kỳ (ví dụ: "Ottumwa, IA, Hoa Kỳ").
  • Nhận dữ liệu hữu ích khác như ảnh.

Hàm ví dụ sau đây tìm đường ranh giới cho Trinidad, CA và đặt tâm bản đồ vào kết quả:

Hàm ví dụ sau gọi fetchFields() để lấy thông tin chi tiết về địa điểm, bao gồm cả place.geometry.viewport, sau đó gọi map.fitBounds() để căn giữa bản đồ trên đa giác ranh giới đã chọn.

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

Sử dụng API Địa chỉ

API Mã hoá địa lý cho phép bạn chuyển đổi địa chỉ thành toạ độ địa lý và ngược lại. Các cách sử dụng sau đây kết hợp tốt với kiểu dáng dựa trên dữ liệu cho các ranh giới:

  • Sử dụng tính năng Mã hoá địa lý để lấy khung nhìn cho một khu vực.
  • Áp dụng tính năng lọc thành phần cho lệnh gọi Địa chỉ để lấy mã địa điểm cho các khu vực hành chính 1-4, địa phương hoặc mã bưu chính.
  • Sử dụng tính năng mã hoá địa lý đảo ngược để tìm mã địa điểm theo toạ độ vĩ độ/kinh độ, hoặc thậm chí trả về mã địa điểm cho tất cả thành phần ở một vị trí cụ thể.

Lấy khung nhìn cho một khu vực

Dịch vụ Địa chỉ được mã hoá địa lý có thể lấy mã nhận dạng địa điểm và trả về một khung nhìn mà bạn có thể truyền vào hàm map.fitBounds() để thu phóng đến một đa giác ranh giới trên bản đồ. Ví dụ sau đây cho thấy cách sử dụng dịch vụ Địa chỉ được mã hoá địa lý để lấy khung nhìn, sau đó gọi 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)
        });
}

Sử dụng tính năng mã hoá địa lý ngược

Bạn có thể sử dụng tính năng mã hoá địa lý ngược để tìm mã địa điểm. Hàm dịch vụ Địa chỉ của ví dụ sau trả về mã địa điểm cho tất cả thành phần địa chỉ tại các toạ độ vĩ độ/kinh độ đã chỉ định:

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

Đây là lệnh gọi dịch vụ web mã hoá địa lý ngược tương đương:

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

Cách sử dụng tính năng dịch địa lý ngược với bộ lọc thành phần để lấy thành phần địa chỉ cho một hoặc nhiều loại sau đây tại vị trí đã chỉ định:

  • administrativeArea
  • country
  • locality
  • postalCode

Hàm ví dụ tiếp theo cho thấy cách sử dụng dịch vụ Địa chỉ được mã hoá, thêm các quy tắc hạn chế thành phần bằng tính năng địa chỉ được mã hoá ngược để lấy tất cả các thành phần địa chỉ tại vị trí đã chỉ định chỉ cho loại 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)
        });
}

Đây là lệnh gọi dịch vụ web mã hoá địa lý ngược tương đương:

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