Định kiểu cho đa giác ranh giới

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

Tổng quan

Để định kiểu cho màu tô và đường viền của một đa giác ranh giới, hãy dùng FeatureStyleOptions để xác định các thuộc tính kiểu và đặt thuộc tính style trên một lớp đối tượng thành google.maps.FeatureStyleFunction. Thuộc tính này chứa logic định kiểu.

Bản đồ ví dụ sau đây minh hoạ cách làm nổi bật đa giác ranh giới cho một khu vực.

Áp dụng kiểu cho các đối tượng ranh giới bằng cách đặt thuộc tính style thành google.maps.FeatureStyleFunction. Thuộc tính này có thể chứa logic định kiểu. Hàm kiểu được chạy trên mọi đối tượng trong lớp đối tượng bị ảnh hưởng và được áp dụng vào thời điểm bạn đặt thuộc tính kiểu. Để cập nhật, bạn phải đặt lại thuộc tính kiểu.

Để định kiểu đồng nhất cho tất cả đối tượng của một lớp đối tượng, hãy đặt thuộc tính style thành google.maps.FeatureStyleOptions. Trong trường hợp này, bạn không cần dùng hàm kiểu đối tượng vì không cần logic.

Hàm kiểu phải luôn trả về kết quả nhất quán khi được áp dụng cho các đối tượng. Ví dụ: nếu bạn muốn tô màu ngẫu nhiên cho một nhóm đối tượng, thì phần ngẫu nhiên không được diễn ra trong hàm kiểu đối tượng, vì điều đó sẽ gây ra kết quả không mong muốn.

Vì hàm này chạy trên mọi đối tượng trong một lớp, nên việc tối ưu hoá là rất quan trọng. Để tránh ảnh hưởng đến thời gian kết xuất:

• Chỉ bật những lớp bạn cần.
• Đặt style thành null khi một lớp không còn được sử dụng.

Để định kiểu cho một đa giác trong lớp đối tượng địa phương, hãy làm theo các bước sau:

1. Nếu bạn chưa làm việc này, hãy làm theo các bước trong bài viết Bắt đầu để tạo mã bản đồ và kiểu bản đồ mới. Hãy nhớ bật lớp đối tượng Địa phương.

2. Tham chiếu đến lớp đối tượng địa phương khi bản đồ khởi chạy.

   TypeScript

   // Get the feature layer.
   featureLayer = innerMap.getFeatureLayer('LOCALITY');
   index.ts

   Lưu ý: Hãy đọc hướng dẫn về cách sử dụng TypeScript và Google Maps.

   JavaScript

   // Get the feature layer.
   featureLayer = innerMap.getFeatureLayer('LOCALITY');
   index.js

3. Tạo định nghĩa kiểu thuộc loại google.maps.FeatureStyleFunction.

4. Đặt thuộc tính style trên lớp đối tượng thành FeatureStyleFunction. Ví dụ sau đây cho thấy cách xác định một hàm để chỉ áp dụng một kiểu cho google.maps.Feature có mã địa điểm trùng khớp:

   TypeScript

   // Define a style with purple fill and border.
   const featureStyleOptions: google.maps.FeatureStyleOptions = {
       strokeColor: '#810FCB',
       strokeOpacity: 1.0,
       strokeWeight: 3.0,
       fillColor: '#810FCB',
       fillOpacity: 0.5,
   };
   
   // Apply the style to a single boundary.
   featureLayer.style = (options: google.maps.FeatureStyleFunctionOptions) => {
       const feature = options.feature as google.maps.PlaceFeature;
       if (feature.placeId === 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') {
           // Hana, HI
           return featureStyleOptions;
       }
       return null;
   };
   index.ts

   Lưu ý: Hãy đọc hướng dẫn về cách sử dụng TypeScript và Google Maps.

   JavaScript

   // Define a style with purple fill and border.
   const featureStyleOptions = {
       strokeColor: '#810FCB',
       strokeOpacity: 1.0,
       strokeWeight: 3.0,
       fillColor: '#810FCB',
       fillOpacity: 0.5,
   };
   
   // Apply the style to a single boundary.
   featureLayer.style = (options) => {
       const feature = options.feature;
       if (feature.placeId === 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') {
           // Hana, HI
           return featureStyleOptions;
       }
       return null;
   };
   index.js

Nếu không tìm thấy mã địa điểm đã chỉ định hoặc mã địa điểm đó không khớp với loại đối tượng đã chọn, thì kiểu sẽ không được áp dụng. Ví dụ: việc cố gắng định kiểu cho một lớp POSTAL_CODE khớp với mã địa điểm của "Thành phố New York" sẽ không áp dụng được kiểu nào.

Xoá kiểu khỏi một lớp

Để xoá kiểu khỏi một lớp, hãy đặt style thành null:

featureLayer.style = null;

Tra cứu mã địa điểm để nhắm đến các đối tượng

Cách lấy mã địa điểm cho các khu vực:

• Sử dụng Places API và Dịch mã địa lý để tìm kiếm các khu vực theo tên, và lấy mã địa điểm cho các khu vực trong phạm vi đã chỉ định.
• Lấy dữ liệu từ các sự kiện nhấp. Thao tác này sẽ trả về Đối tượng tương ứng với một khu vực được nhấp, cung cấp quyền truy cập vào mã địa điểm, tên hiển thị và danh mục loại đối tượng.

Phạm vi bao phủ sẽ khác nhau tuỳ theo khu vực. Hãy xem bài viết Phạm vi bao phủ ranh giới của Google để biết thông tin chi tiết.

Tên địa lý có trong nhiều nguồn, chẳng hạn như Uỷ ban về tên địa lý của Cục Khảo sát Địa chất Hoa Kỳ (USGS), và Tệp danh bạ địa lý của Hoa Kỳ.

Mã ví dụ đầy đủ

TypeScript

let featureLayer: google.maps.FeatureLayer;

async function init() {
    // Request needed libraries.
    await google.maps.importLibrary('maps');

    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map')!;

    // Get the inner map.
    const innerMap = mapElement.innerMap;

    // Get the feature layer.
    featureLayer = innerMap.getFeatureLayer('LOCALITY');

    // Define a style with purple fill and border.
    const featureStyleOptions: google.maps.FeatureStyleOptions = {
        strokeColor: '#810FCB',
        strokeOpacity: 1.0,
        strokeWeight: 3.0,
        fillColor: '#810FCB',
        fillOpacity: 0.5,
    };

    // Apply the style to a single boundary.
    featureLayer.style = (options: google.maps.FeatureStyleFunctionOptions) => {
        const feature = options.feature as google.maps.PlaceFeature;
        if (feature.placeId === 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') {
            // Hana, HI
            return featureStyleOptions;
        }
        return null;
    };
}

void init();
index.ts

Lưu ý: Hãy đọc hướng dẫn về cách sử dụng TypeScript và Google Maps.

JavaScript

let featureLayer;

async function init() {
    // Request needed libraries.
    await google.maps.importLibrary('maps');

    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map');

    // Get the inner map.
    const innerMap = mapElement.innerMap;

    // Get the feature layer.
    featureLayer = innerMap.getFeatureLayer('LOCALITY');

    // Define a style with purple fill and border.
    const featureStyleOptions = {
        strokeColor: '#810FCB',
        strokeOpacity: 1.0,
        strokeWeight: 3.0,
        fillColor: '#810FCB',
        fillOpacity: 0.5,
    };

    // Apply the style to a single boundary.
    featureLayer.style = (options) => {
        const feature = options.feature;
        if (feature.placeId === 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') {
            // Hana, HI
            return featureStyleOptions;
        }
        return null;
    };
}

void init();
index.js

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
gmp-map {
    height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
style.css

HTML

<html>
    <head>
        <title>Boundaries Simple</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
                key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8"
            });
        </script>
    </head>
    <body>
        <gmp-map
            center="20.773,-156.01"
            zoom="12"
            map-id="8b37d7206ccf0121d4414bb0"></gmp-map>
    </body>
</html>
index.html

Thử mẫu

JSFiddle.net