Lớp dữ liệu

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

Lớp Dữ liệu của Google Maps cung cấp một vùng chứa cho dữ liệu không gian địa lý tuỳ ý. Bạn có thể sử dụng Lớp dữ liệu để lưu trữ dữ liệu tuỳ chỉnh hoặc hiển thị dữ liệu GeoJSON trên bản đồ Google.

Tổng quan

Xem video DevBytes này để tìm hiểu thêm về Lớp dữ liệu.

Với Maps JavaScript API, bạn có thể đánh dấu một bản đồ bằng nhiều lớp phủ, chẳng hạn như điểm đánh dấu, đường nhiều đoạn, đa giác, v.v. Mỗi chú thích này kết hợp thông tin tạo kiểu với dữ liệu vị trí. Lớp google.maps.Data là một vùng chứa cho dữ liệu không gian địa lý tuỳ ý. Thay vì thêm các lớp phủ này, bạn có thể sử dụng Lớp dữ liệu để thêm dữ liệu địa lý tuỳ ý vào bản đồ. Nếu dữ liệu đó chứa các hình học, chẳng hạn như điểm, đường hoặc đa giác, thì theo mặc định, API sẽ hiển thị các hình học này dưới dạng điểm đánh dấu, đường nhiều đoạn và đa giác. Bạn có thể tạo kiểu cho các đối tượng này như một lớp phủ thông thường hoặc áp dụng các quy tắc tạo kiểu dựa trên những thuộc tính khác có trong tập dữ liệu.

Lớp google.maps.Data cho phép bạn:

  • Vẽ đa giác trên bản đồ.
  • Thêm dữ liệu GeoJSON vào bản đồ.
    GeoJSON là một tiêu chuẩn cho dữ liệu không gian địa lý trên Internet. Lớp Data tuân theo cấu trúc của GeoJSON trong phần trình bày dữ liệu và giúp bạn dễ dàng hiển thị dữ liệu GeoJSON. Sử dụng phương thức loadGeoJson() để dễ dàng nhập dữ liệu GeoJSON và hiển thị các điểm, chuỗi đường và đa giác.
  • Sử dụng google.maps.Data để mô hình hoá dữ liệu tuỳ ý.
    Hầu hết các thực thể trong thế giới thực đều có các thuộc tính khác liên kết với chúng. Ví dụ: các cửa hàng có giờ mở cửa, đường có tốc độ giao thông và mỗi nhóm Nữ hướng đạo sinh có khu vực bán bánh quy riêng. Với google.maps.Data, bạn có thể mô hình hoá các thuộc tính này và tạo kiểu cho dữ liệu của mình cho phù hợp.
  • Chọn cách thể hiện dữ liệu và thay đổi ý định ngay lập tức.
    Lớp Dữ liệu cho phép bạn đưa ra quyết định về việc trực quan hoá và tương tác với dữ liệu của mình. Ví dụ: khi xem bản đồ các cửa hàng tiện lợi, bạn có thể chọn chỉ hiển thị những cửa hàng bán vé phương tiện công cộng.

Vẽ đa giác

Lớp Data.Polygon xử lý việc quấn đa giác cho bạn. Bạn có thể truyền cho nó một mảng gồm một hoặc nhiều vòng tuyến tính, được xác định là toạ độ vĩ độ/kinh độ. Vòng tuyến tính đầu tiên xác định ranh giới bên ngoài của đa giác. Nếu bạn truyền nhiều vòng tuyến tính, vòng tuyến tính thứ hai và các vòng tuyến tính tiếp theo sẽ được dùng để xác định các đường dẫn bên trong (lỗ) trong đa giác.

Ví dụ sau đây tạo một đa giác hình chữ nhật có 2 lỗ:

TypeScript

// This example uses the Google Maps JavaScript API's Data layer
// to create a rectangular polygon with 2 holes in it.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 6,
      center: { lat: -33.872, lng: 151.252 },
    }
  );

  // Define the LatLng coordinates for the outer path.
  const outerCoords = [
    { lat: -32.364, lng: 153.207 }, // north west
    { lat: -35.364, lng: 153.207 }, // south west
    { lat: -35.364, lng: 158.207 }, // south east
    { lat: -32.364, lng: 158.207 }, // north east
  ];

  // Define the LatLng coordinates for an inner path.
  const innerCoords1 = [
    { lat: -33.364, lng: 154.207 },
    { lat: -34.364, lng: 154.207 },
    { lat: -34.364, lng: 155.207 },
    { lat: -33.364, lng: 155.207 },
  ];

  // Define the LatLng coordinates for another inner path.
  const innerCoords2 = [
    { lat: -33.364, lng: 156.207 },
    { lat: -34.364, lng: 156.207 },
    { lat: -34.364, lng: 157.207 },
    { lat: -33.364, lng: 157.207 },
  ];

  map.data.add({
    geometry: new google.maps.Data.Polygon([
      outerCoords,
      innerCoords1,
      innerCoords2,
    ]),
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

// This example uses the Google Maps JavaScript API's Data layer
// to create a rectangular polygon with 2 holes in it.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 6,
    center: { lat: -33.872, lng: 151.252 },
  });
  // Define the LatLng coordinates for the outer path.
  const outerCoords = [
    { lat: -32.364, lng: 153.207 }, // north west
    { lat: -35.364, lng: 153.207 }, // south west
    { lat: -35.364, lng: 158.207 }, // south east
    { lat: -32.364, lng: 158.207 }, // north east
  ];
  // Define the LatLng coordinates for an inner path.
  const innerCoords1 = [
    { lat: -33.364, lng: 154.207 },
    { lat: -34.364, lng: 154.207 },
    { lat: -34.364, lng: 155.207 },
    { lat: -33.364, lng: 155.207 },
  ];
  // Define the LatLng coordinates for another inner path.
  const innerCoords2 = [
    { lat: -33.364, lng: 156.207 },
    { lat: -34.364, lng: 156.207 },
    { lat: -34.364, lng: 157.207 },
    { lat: -33.364, lng: 157.207 },
  ];

  map.data.add({
    geometry: new google.maps.Data.Polygon([
      outerCoords,
      innerCoords1,
      innerCoords2,
    ]),
  });
}

window.initMap = initMap;
index.js

Tải GeoJSON

GeoJSON là một tiêu chuẩn phổ biến để chia sẻ dữ liệu không gian địa lý trên Internet. Đây là một định dạng nhẹ và dễ đọc đối với con người, khiến nó trở thành định dạng lý tưởng để chia sẻ và cộng tác. Với Lớp dữ liệu, bạn có thể thêm dữ liệu GeoJSON vào bản đồ Google chỉ bằng một dòng mã.

map.data.loadGeoJson('google.json');

Mỗi bản đồ đều có một đối tượng map.data. Đối tượng này đóng vai trò là lớp dữ liệu cho dữ liệu không gian địa lý tuỳ ý, bao gồm cả GeoJSON. Bạn có thể tải và hiển thị một tệp GeoJSON bằng cách gọi phương thức loadGeoJSON() của đối tượng data. Ví dụ bên dưới cho biết cách thêm bản đồ và tải dữ liệu GeoJSON bên ngoài.

TypeScript

async function initMap() {
  (await google.maps.importLibrary("maps")) as google.maps.MapsLibrary;

  const mapElement = document.querySelector(
    "gmp-map"
  ) as google.maps.MapElement;

  let innerMap = mapElement.innerMap;

  innerMap.data.loadGeoJson("google.json");
}

initMap();
index.ts

JavaScript

async function initMap() {
    (await google.maps.importLibrary("maps"));
    const mapElement = document.querySelector("gmp-map");
    let innerMap = mapElement.innerMap;
    innerMap.data.loadGeoJson("google.json");
}
initMap();
index.js
Xem ví dụ

Dùng thử mẫu

GeoJSON mẫu

Hầu hết các ví dụ trên trang này đều sử dụng một tệp GeoJSON chung. Tệp này xác định 6 ký tự trong "Google" dưới dạng các đa giác trên lãnh thổ Úc. Bạn có thể sao chép hoặc sửa đổi tệp này khi thử nghiệm Lớp dữ liệu.

Lưu ý: Để tải một tệp json từ một miền khác, miền đó phải bật tính năng Chia sẻ tài nguyên trên nhiều nguồn.

Bạn có thể xem toàn bộ nội dung của tệp này bằng cách mở rộng mũi tên nhỏ bên cạnh từ google.json.

google.json

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "letter": "G",
        "color": "blue",
        "rank": "7",
        "ascii": "71"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [123.61, -22.14], [122.38, -21.73], [121.06, -21.69], [119.66, -22.22], [119.00, -23.40],
            [118.65, -24.76], [118.43, -26.07], [118.78, -27.56], [119.22, -28.57], [120.23, -29.49],
            [121.77, -29.87], [123.57, -29.64], [124.45, -29.03], [124.71, -27.95], [124.80, -26.70],
            [124.80, -25.60], [123.61, -25.64], [122.56, -25.64], [121.72, -25.72], [121.81, -26.62],
            [121.86, -26.98], [122.60, -26.90], [123.57, -27.05], [123.57, -27.68], [123.35, -28.18],
            [122.51, -28.38], [121.77, -28.26], [121.02, -27.91], [120.49, -27.21], [120.14, -26.50],
            [120.10, -25.64], [120.27, -24.52], [120.67, -23.68], [121.72, -23.32], [122.43, -23.48],
            [123.04, -24.04], [124.54, -24.28], [124.58, -23.20], [123.61, -22.14]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "o",
        "color": "red",
        "rank": "15",
        "ascii": "111"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [128.84, -25.76], [128.18, -25.60], [127.96, -25.52], [127.88, -25.52], [127.70, -25.60],
            [127.26, -25.79], [126.60, -26.11], [126.16, -26.78], [126.12, -27.68], [126.21, -28.42],
            [126.69, -29.49], [127.74, -29.80], [128.80, -29.72], [129.41, -29.03], [129.72, -27.95],
            [129.68, -27.21], [129.33, -26.23], [128.84, -25.76]
          ],
          [
            [128.45, -27.44], [128.32, -26.94], [127.70, -26.82], [127.35, -27.05], [127.17, -27.80],
            [127.57, -28.22], [128.10, -28.42], [128.49, -27.80], [128.45, -27.44]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "o",
        "color": "yellow",
        "rank": "15",
        "ascii": "111"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [131.87, -25.76], [131.35, -26.07], [130.95, -26.78], [130.82, -27.64], [130.86, -28.53],
            [131.26, -29.22], [131.92, -29.76], [132.45, -29.87], [133.06, -29.76], [133.72, -29.34],
            [134.07, -28.80], [134.20, -27.91], [134.07, -27.21], [133.81, -26.31], [133.37, -25.83],
            [132.71, -25.64], [131.87, -25.76]
          ],
          [
            [133.15, -27.17], [132.71, -26.86], [132.09, -26.90], [131.74, -27.56], [131.79, -28.26],
            [132.36, -28.45], [132.93, -28.34], [133.15, -27.76], [133.15, -27.17]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "g",
        "color": "blue",
        "rank": "7",
        "ascii": "103"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [138.12, -25.04], [136.84, -25.16], [135.96, -25.36], [135.26, -25.99], [135, -26.90],
            [135.04, -27.91], [135.26, -28.88], [136.05, -29.45], [137.02, -29.49], [137.81, -29.49],
            [137.94, -29.99], [137.90, -31.20], [137.85, -32.24], [136.88, -32.69], [136.45, -32.36],
            [136.27, -31.80], [134.95, -31.84], [135.17, -32.99], [135.52, -33.43], [136.14, -33.76],
            [137.06, -33.83], [138.12, -33.65], [138.86, -33.21], [139.30, -32.28], [139.30, -31.24],
            [139.30, -30.14], [139.21, -28.96], [139.17, -28.22], [139.08, -27.41], [139.08, -26.47],
            [138.99, -25.40], [138.73, -25.00 ], [138.12, -25.04]
          ],
          [
            [137.50, -26.54], [136.97, -26.47], [136.49, -26.58], [136.31, -27.13], [136.31, -27.72],
            [136.58, -27.99], [137.50, -28.03], [137.68, -27.68], [137.59, -26.78], [137.50, -26.54]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "l",
        "color": "green",
        "rank": "12",
        "ascii": "108"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [140.14,-21.04], [140.31,-29.42], [141.67,-29.49], [141.59,-20.92], [140.14,-21.04]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "e",
        "color": "red",
        "rank": "5",
        "ascii": "101"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [144.14, -27.41], [145.67, -27.52], [146.86, -27.09], [146.82, -25.64], [146.25, -25.04],
            [145.45, -24.68], [144.66, -24.60], [144.09, -24.76], [143.43, -25.08], [142.99, -25.40],
            [142.64, -26.03], [142.64, -27.05], [142.64, -28.26], [143.30, -29.11], [144.18, -29.57],
            [145.41, -29.64], [146.46, -29.19], [146.64, -28.72], [146.82, -28.14], [144.84, -28.42],
            [144.31, -28.26], [144.14, -27.41]
          ],
          [
            [144.18, -26.39], [144.53, -26.58], [145.19, -26.62], [145.72, -26.35], [145.81, -25.91],
            [145.41, -25.68], [144.97, -25.68], [144.49, -25.64], [144, -25.99], [144.18, -26.39]
          ]
        ]
      }
    }
  ]
}

Tạo kiểu cho dữ liệu GeoJSON

Sử dụng phương thức Data.setStyle() để chỉ định cách dữ liệu của bạn sẽ xuất hiện. Phương thức setStyle() nhận một giá trị cố định đối tượng StyleOptions hoặc một hàm tính toán kiểu cho từng đối tượng.

Quy tắc kiểu đơn giản

Cách đơn giản nhất để tạo kiểu cho các đối tượng là truyền một chữ StyleOptions đối tượng theo nghĩa đen vào setStyle(). Thao tác này sẽ đặt một kiểu duy nhất cho từng đối tượng trong bộ sưu tập của bạn. Xin lưu ý rằng mỗi loại đối tượng chỉ có thể hiển thị một số lựa chọn trong số các lựa chọn hiện có. Điều này có nghĩa là bạn có thể kết hợp các kiểu cho nhiều loại đối tượng trong một đối tượng theo nghĩa đen. Ví dụ: đoạn mã bên dưới đặt cả icon tuỳ chỉnh (chỉ ảnh hưởng đến hình học điểm) và fillColor (chỉ ảnh hưởng đến đa giác).

map.data.setStyle({
  icon: '//example.com/path/to/image.png',
  fillColor: 'green'
});

Bạn có thể xem thêm thông tin về các tổ hợp kiểu/đối tượng hợp lệ trong phần Lựa chọn về kiểu.

Dưới đây là ví dụ về cách đặt màu nét vẽ và màu tô cho một số đối tượng bằng cách sử dụng một chữ StyleOptions đối tượng. Lưu ý rằng mỗi đa giác đều có cùng một kiểu.

TypeScript

async function initMap() {
  (await google.maps.importLibrary("maps")) as google.maps.MapsLibrary;

  const mapElement = document.querySelector(
    "gmp-map"
  ) as google.maps.MapElement;

  const innerMap = mapElement.innerMap;

  // Load GeoJSON.
  google.maps.event.addListenerOnce(innerMap, "idle", () => {
    innerMap.data.loadGeoJson("google.json");
  });

  // Set the stroke width, and fill color for each polygon
  innerMap.data.setStyle({
    fillColor: "green",
    strokeWeight: 1,
  });
}

initMap();
index.ts

JavaScript

async function initMap() {
    (await google.maps.importLibrary("maps"));
    const mapElement = document.querySelector("gmp-map");
    const innerMap = mapElement.innerMap;
    // Load GeoJSON.
    google.maps.event.addListenerOnce(innerMap, "idle", () => {
        innerMap.data.loadGeoJson("google.json");
    });
    // Set the stroke width, and fill color for each polygon
    innerMap.data.setStyle({
        fillColor: "green",
        strokeWeight: 1,
    });
}
initMap();
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>Data Layer: Styling</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
    <!-- prettier-ignore -->
    <script>(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", v: "weekly"});</script>
  </head>
  <body>
    <gmp-map center="-28,137" zoom="4"></gmp-map>
  </body>
</html>
index.html
Xem ví dụ

Dùng thử mẫu

Quy tắc về kiểu khai báo

Nếu muốn cập nhật kiểu của một số lượng lớn lớp phủ, chẳng hạn như điểm đánh dấu hoặc đường nhiều đoạn, bạn thường phải lặp lại từng lớp phủ trên bản đồ và đặt riêng kiểu cho từng lớp phủ. Với Lớp dữ liệu, bạn có thể đặt các quy tắc một cách khai báo và các quy tắc này sẽ được áp dụng cho toàn bộ tập dữ liệu của bạn. Khi dữ liệu hoặc quy tắc được cập nhật, kiểu sẽ tự động được áp dụng cho mọi đối tượng. Bạn có thể sử dụng các thuộc tính của đối tượng để tuỳ chỉnh kiểu của đối tượng.

Ví dụ: mã bên dưới đặt màu cho từng ký tự trong google.json bằng cách kiểm tra vị trí của ký tự đó trong bộ ký tự ASCII. Trong trường hợp này, chúng ta đã mã hoá vị trí ký tự cùng với dữ liệu của mình.

// Color Capital letters blue, and lower case letters red.
// Capital letters are represented in ascii by values less than 91
map.data.setStyle(function(feature) {
    var ascii = feature.getProperty('ascii');
    var color = ascii > 91 ? 'red' : 'blue';
    return {
      fillColor: color,
      strokeWeight: 1
    };
});

Xoá kiểu

Nếu bạn muốn xoá mọi kiểu đã áp dụng, hãy truyền một đối tượng chữ trống vào phương thức setStyles().

// Remove custom styles.
map.data.setStyle({});

Thao tác này sẽ xoá mọi kiểu tuỳ chỉnh mà bạn đã chỉ định và các đối tượng sẽ hiển thị bằng kiểu mặc định. Nếu bạn không muốn hiển thị các đối tượng này nữa, hãy đặt thuộc tính visible của StyleOptions thành false.

// Hide the Data layer.
map.data.setStyle({visible: false});

Ghi đè kiểu mặc định

Các quy tắc tạo kiểu thường được áp dụng cho mọi đối tượng trong Lớp dữ liệu. Tuy nhiên, đôi khi bạn muốn áp dụng các quy tắc tạo kiểu đặc biệt cho các đối tượng cụ thể. Ví dụ: để làm nổi bật một tính năng khi nhấp vào.

Để áp dụng các quy tắc tạo kiểu đặc biệt, hãy sử dụng phương thức overrideStyle(). Mọi thuộc tính mà bạn thay đổi bằng phương thức overrideStyle() đều được áp dụng ngoài các kiểu chung đã được chỉ định trong setStyle(). Ví dụ: đoạn mã bên dưới sẽ thay đổi màu nền của một đa giác khi người dùng nhấp vào, nhưng sẽ không đặt bất kỳ kiểu nào khác.

// Set the global styles.
map.data.setStyle({
  fillColor: 'green',
  strokeWeight: 3
});

// Set the fill color to red when the feature is clicked.
// Stroke weight remains 3.
map.data.addListener('click', function(event) {
   map.data.overrideStyle(event.feature, {fillColor: 'red'});
});

Gọi phương thức revertStyle() để xoá tất cả các chế độ ghi đè kiểu.

Tùy chọn kiểu

Các lựa chọn có sẵn để tạo kiểu cho từng đối tượng phụ thuộc vào loại đối tượng. Ví dụ: fillColor sẽ chỉ hiển thị trên các hình học đa giác, trong khi icon sẽ chỉ xuất hiện trên hình học điểm. Bạn có thể xem thêm thông tin trong tài liệu tham khảo về StyleOptions.

Có trên tất cả các hình học

  • clickable: Nếu true, tính năng này sẽ nhận được các sự kiện về chuột và sự kiện chạm
  • visible: Nếu true, tính năng này sẽ xuất hiện.
  • zIndex: Tất cả các đối tượng đều xuất hiện trên bản đồ theo thứ tự zIndex, trong đó các đối tượng có giá trị cao hơn sẽ xuất hiện trước các đối tượng có giá trị thấp hơn. Các điểm đánh dấu luôn xuất hiện trước các chuỗi đường và đa giác.

Có sẵn trên các hình học điểm

  • cursor: Con trỏ chuột sẽ xuất hiện khi di chuột.
  • icon: Biểu tượng sẽ xuất hiện cho hình học điểm.
  • shape: Xác định bản đồ hình ảnh dùng để phát hiện lượt truy cập.
  • title: Văn bản khi di chuột.

Có sẵn trên các hình học đường

  • strokeColor: Màu nét vẽ. Tất cả các màu CSS3 đều được hỗ trợ, ngoại trừ các màu có tên mở rộng.
  • strokeOpacity: Độ mờ của nét vẽ từ 0 đến 1.
  • strokeWeight: Độ rộng nét vẽ tính bằng pixel.

Có sẵn trên các hình học đa giác

  • fillColor: Màu nền. Tất cả các màu CSS3 đều được hỗ trợ, ngoại trừ các màu có tên mở rộng.
  • fillOpacity: Độ mờ của màu tô trong khoảng từ 0.0 đến 1.0.
  • strokeColor: Màu nét vẽ. Tất cả các màu CSS3 đều được hỗ trợ, ngoại trừ các màu có tên mở rộng.
  • strokeOpacity: Độ mờ của nét vẽ từ 0 đến 1.
  • strokeWeight: Độ rộng nét vẽ tính bằng pixel.

Thêm trình xử lý sự kiện

Các thành phần phản hồi các sự kiện, chẳng hạn như mouseup hoặc mousedown. Bạn có thể thêm trình nghe sự kiện để cho phép người dùng tương tác với dữ liệu trên bản đồ. Trong ví dụ bên dưới, chúng ta sẽ thêm một sự kiện di chuột, sự kiện này sẽ hiển thị thông tin về tính năng bên dưới con trỏ chuột.

// Set mouseover event for each feature.
map.data.addListener('mouseover', function(event) {
  document.getElementById('info-box').textContent =
      event.feature.getProperty('letter');
});

Sự kiện lớp dữ liệu

Các sự kiện sau đây là phổ biến đối với tất cả các đối tượng, bất kể loại hình học của chúng:

  • addfeature
  • click
  • dblclick
  • mousedown
  • mouseout
  • mouseover
  • mouseup
  • removefeature
  • removeproperty
  • rightclick
  • setgeometry
  • setproperty

Bạn có thể tìm thêm thông tin về các sự kiện này trong tài liệu tham khảo cho lớp google.maps.data.

Thay đổi giao diện một cách linh động

Bạn có thể đặt kiểu cho Lớp dữ liệu bằng cách truyền một hàm tính toán kiểu của từng đối tượng vào phương thức google.maps.data.setStyle(). Hàm này sẽ được gọi mỗi khi các thuộc tính của một đối tượng được cập nhật.

Trong ví dụ bên dưới, chúng ta sẽ thêm một trình nghe sự kiện cho sự kiện click để cập nhật thuộc tính isColorful của đối tượng. Kiểu dáng của tính năng sẽ được cập nhật để phản ánh thay đổi ngay khi thuộc tính được đặt.

// Color each letter gray. Change the color when the isColorful property
// is set to true.
map.data.setStyle(function(feature) {
  var color = 'gray';
  if (feature.getProperty('isColorful')) {
    color = feature.getProperty('color');
  }
  return /** @type {!google.maps.Data.StyleOptions} */({
    fillColor: color,
    strokeColor: color,
    strokeWeight: 2
  });
});

// When the user clicks, set 'isColorful', changing the color of the letters.
map.data.addListener('click', function(event) {
  event.feature.setProperty('isColorful', true);
});

// When the user hovers, tempt them to click by outlining the letters.
// Call revertStyle() to remove all overrides. This will use the style rules
// defined in the function passed to setStyle()
map.data.addListener('mouseover', function(event) {
  map.data.revertStyle();
  map.data.overrideStyle(event.feature, {strokeWeight: 8});
});

map.data.addListener('mouseout', function(event) {
  map.data.revertStyle();
});