Nhập dữ liệu GeoJSON vào Maps

Tổng quan

Tìm hiểu cách nhập dữ liệu GeoJSON từ một nguồn cục bộ hoặc từ xa, và hiển thị dữ liệu đó trên bản đồ của bạn. Hướng dẫn này sử dụng bản đồ bên dưới để minh hoạ các kỹ thuật khác nhau để nhập dữ liệu vào bản đồ.

Phần dưới đây hiển thị toàn bộ mã bạn cần để tạo bản đồ trong hướng dẫn này.

TypeScript

let map: google.maps.Map;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    zoom: 2,
    center: new google.maps.LatLng(2.8, -187.3),
    mapTypeId: "terrain",
  });

  // Create a <script> tag and set the USGS URL as the source.
  const script = document.createElement("script");

  // This example uses a local copy of the GeoJSON stored at
  // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
  script.src =
    "https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js";
  document.getElementsByTagName("head")[0].appendChild(script);
}

// Loop through the results array and place a marker for each
// set of coordinates.
const eqfeed_callback = function (results: any) {
  for (let i = 0; i < results.features.length; i++) {
    const coords = results.features[i].geometry.coordinates;
    const latLng = new google.maps.LatLng(coords[1], coords[0]);

    new google.maps.Marker({
      position: latLng,
      map: map,
    });
  }
};

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

JavaScript

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 2,
    center: new google.maps.LatLng(2.8, -187.3),
    mapTypeId: "terrain",
  });

  // Create a <script> tag and set the USGS URL as the source.
  const script = document.createElement("script");

  // This example uses a local copy of the GeoJSON stored at
  // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
  script.src =
    "https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js";
  document.getElementsByTagName("head")[0].appendChild(script);
}

// Loop through the results array and place a marker for each
// set of coordinates.
const eqfeed_callback = function (results) {
  for (let i = 0; i < results.features.length; i++) {
    const coords = results.features[i].geometry.coordinates;
    const latLng = new google.maps.LatLng(coords[1], coords[0]);

    new google.maps.Marker({
      position: latLng,
      map: map,
    });
  }
};

window.initMap = initMap;
window.eqfeed_callback = eqfeed_callback;
index.js

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#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>Earthquake Markers</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html

Thử dùng mẫu

Đang tải dữ liệu

Phần này cho bạn biết cách tải dữ liệu từ cùng một miền với ứng dụng API JavaScript cho Maps hoặc từ một miền khác.

Đang tải dữ liệu từ cùng một miền

Lớp dữ liệu Google Maps cung cấp một vùng chứa cho dữ liệu không gian địa lý tuỳ ý (bao gồm cả GeoJSON). Nếu dữ liệu của bạn nằm trong một tệp được lưu trữ trên cùng một miền với ứng dụng API JavaScript cho Maps, thì bạn có thể tải tệp đó bằng phương thức map.data.loadGeoJson(). Tệp phải ở trên cùng một miền, nhưng bạn có thể lưu trữ tệp trong một miền con khác. Ví dụ: bạn có thể gửi yêu cầu tới files.example.com từ www.example.com.

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

Đang tải dữ liệu trên nhiều miền

Bạn cũng có thể yêu cầu dữ liệu từ một miền không phải của bạn, nếu cấu hình của miền cho phép yêu cầu như vậy. Tiêu chuẩn cho quyền này được gọi là Chia sẻ tài nguyên trên nhiều nguồn gốc (CORS). Nếu một miền cho phép các yêu cầu trên nhiều miền, thì tiêu đề phản hồi của miền đó phải bao gồm nội dung khai báo sau:

Access-Control-Allow-Origin: *

Sử dụng Công cụ cho nhà phát triển Chrome (DevTools) để tìm hiểu xem một miền đã bật CORS hay chưa.

Việc tải dữ liệu từ một miền như vậy cũng giống như tải JSON từ cùng một miền:

map.data.loadGeoJson('http://www.CORS-ENABLED-SITE.com/data.json');

Yêu cầu JSONP

Miền mục tiêu phải hỗ trợ các yêu cầu cho JSONP để sử dụng kỹ thuật này.

Để yêu cầu JSONP, hãy sử dụng createElement() để thêm thẻ script vào phần đầu của tài liệu.

var script = document.createElement('script');
script.src = 'http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp';
document.getElementsByTagName('head')[0].appendChild(script);

Khi tập lệnh chạy, miền đích sẽ truyền dữ liệu dưới dạng một đối số đến tập lệnh một tập lệnh khác, thường có tên là callback(). Miền đích xác định tên tập lệnh gọi lại. Đây là tên đầu tiên trên trang khi bạn tải URL mục tiêu trong trình duyệt.

Ví dụ: tải http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp trong cửa sổ trình duyệt để hiển thị tên lệnh gọi lại là eqfeed_callback.

Bạn phải xác định tập lệnh gọi lại trong mã của mình:

function eqfeed_callback(response) {
  map.data.addGeoJson(response);
}

Sử dụng phương thức addGeoJson() để đặt dữ liệu GeoJSON đã phân tích cú pháp trên bản đồ.

Tạo kiểu dữ liệu

Bạn có thể thay đổi giao diện của dữ liệu bằng cách thêm dữ liệu GeoJSON vào đối tượng Maps. Hãy đọc hướng dẫn của nhà phát triển để biết thêm thông tin về cách tạo kiểu cho dữ liệu.

Tìm hiểu thêm

  • GeoJSON là một định dạng mở được sử dụng rộng rãi để mã hoá dữ liệu địa lý, dựa trên JSON (Ký hiệu đối tượng JavaScript). Các công cụ và phương thức JavaScript được thiết kế cho dữ liệu JSON cũng hoạt động với GeoJSON. Đọc hướng dẫn dành cho nhà phát triển để biết thêm thông tin.
  • JSONP là viết tắt của JSON có đệm. Đây là một phương thức giao tiếp dùng trong các chương trình JavaScript chạy trong trình duyệt web để yêu cầu dữ liệu từ máy chủ ở một miền khác.