Thêm Bản đồ Google có Điểm đánh dấu vào Trang web của Bạn – cách thêm bản đồ google trong html

Giới thiệu

Hướng dẫn này chỉ cho bạn cách thêm bản đồ Google đơn giản có điểm đánh dấu vào web
trang. Nó phù hợp với những người có kiến ​​thức mới bắt đầu hoặc trung cấp về HTML và CSS,
và một chút kiến ​​thức về JavaScript. Để có hướng dẫn nâng cao về cách tạo bản đồ,
đọc hướng dẫn của nhà phát triển .

Dưới đây là bản đồ bạn sẽ tạo bằng cách sử dụng hướng dẫn này. Điểm đánh dấu được đặt tại
Uluru (còn được gọi là Ayers Rock) trong
Vườn quốc gia Uluru-Kata Tjuta.

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

TypeScript

 // Khởi tạo và thêm bản đồ
function initMap (): void {
  // Vị trí của Uluru
  const uluru = {lat: -25.344, lng: 131.031};
  // Bản đồ, tập trung tại Uluru
  const map = new google.maps.Map (
    document.getElementById ("map") dưới dạng HTMLElement,
    {
      thu phóng: 4,
      trung tâm: uluru,
    }
  );

  // Điểm đánh dấu, được đặt tại Uluru
  const marker = new google.maps.Marker ({
    vị trí: uluru,
    map: bản đồ,
  });
}

khai báo toàn cầu {
  giao diện Cửa sổ {
    initMap: () = & gt; vô hiệu;
  }
}
window.initMap = initMap;  index.ts  

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

JavaScript

 // Khởi tạo và thêm bản đồ
function initMap () {
  // Vị trí của Uluru
  const uluru = {lat: -25.344, lng: 131.031};
  // Bản đồ, tập trung tại Uluru
  const map = new google.maps.Map (document.getElementById ("bản đồ"), {
    thu phóng: 4,
    trung tâm: uluru,
  });
  // Điểm đánh dấu, được đặt tại Uluru
  const marker = new google.maps.Marker ({
    vị trí: uluru,
    map: bản đồ,
  });
}

window.initMap = initMap;  index.js  

Lưu ý: JavaScript được biên dịch từ đoạn mã TypeScript.

CSS

 / * Đặt kích thước của phần tử div chứa bản đồ * /
#bản đồ {
  chiều cao: 400px;
  / * Chiều cao là 400 pixel * /
  chiều rộng: 100%;
  / * Chiều rộng là chiều rộng của trang web * /
}
 style.css  

HTML

 & lt; html & gt;
  & lt; đầu & gt;
    & lt; title & gt; Thêm Bản đồ & lt; / title & gt;
    & lt; script src = "https://polyfill.io/v3/polyfill.min.js?features=default" & gt; & lt; / script & gt;

    & lt; link rel = "stylesheet" type = "text / css" href = "./ style.css" / & gt;
    & lt; script type = "module" src = "./ index.js" & gt; & lt; / script & gt;
  & lt; / head & gt;
  & lt; body & gt;
    & lt; h3 & gt; Bản trình diễn Google Maps của tôi & lt; / h3 & gt;
    & lt;! - Phần tử div cho bản đồ - & gt;
    & lt; div id = "map" & gt; & lt; / div & gt;

    & lt;! -
     Thuộc tính `defer` khiến lệnh gọi lại thực thi sau HTML đầy đủ
     tài liệu đã được phân tích cú pháp. Đối với việc sử dụng không chặn, tránh các điều kiện chủng tộc,
     và hành vi nhất quán trên các trình duyệt, hãy cân nhắc tải bằng Promises
     với https://www.npmjs.com/package/@googlemaps/js-api-loader.
    - & gt;
    & lt; script
      src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      hoãn lại
    & gt; & lt; / script & gt;
  & lt; / body & gt;
& lt; / html & gt;  index.html  

Thử mẫu

Stackblitz.com
CodeSandbox.io
JSFiddle.net
GitPod.io
Google Cloud Shell

Bắt đầu

Có ba bước để tạo bản đồ Google với điểm đánh dấu trên trang web của bạn:

Bạn cần một trình duyệt web. Chọn một cái nổi tiếng như Google Chrome
(được khuyến nghị), Firefox, Safari hoặc Edge, dựa trên nền tảng của bạn từ
danh sách các trình duyệt được hỗ trợ .

Bước 1: Tạo trang HTML

Đây là mã cho một trang web HTML cơ bản:

 & lt;! DOCTYPE html & gt;
& lt;! -
 @giấy phép
 Bản quyền 2019 Google LLC. Đã đăng ký Bản quyền.
 SPDX-Giấy phép-Định danh: Apache-2.0
- & gt;
& lt; html & gt;
  & lt; đầu & gt;
    & lt; title & gt; Thêm Bản đồ & lt; / title & gt;
    & lt; script src = "https://polyfill.io/v3/polyfill.min.js?features=default" & gt; & lt; / script & gt;

    & lt; link rel = "stylesheet" type = "text / css" href = "./ style.css" / & gt;
    & lt; script type = "module" src = "./ index.js" & gt; & lt; / script & gt;
  & lt; / head & gt;
  & lt; body & gt;
    & lt; h3 & gt; Bản trình diễn Google Maps của tôi & lt; / h3 & gt;
    & lt;! - Phần tử div cho bản đồ - & gt;
    & lt; div id = "map" & gt; & lt; / div & gt;

    & lt;! -
     Thuộc tính `defer` khiến lệnh gọi lại thực thi sau HTML đầy đủ
     tài liệu đã được phân tích cú pháp. Đối với việc sử dụng không chặn, tránh các điều kiện chủng tộc,
     và hành vi nhất quán trên các trình duyệt, hãy cân nhắc tải bằng Promises
     với https://www.npmjs.com/package/@googlemaps/js-api-loader.
    - & gt;
    & lt; script
      src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      hoãn lại
    & gt; & lt; / script & gt;
  & lt; / body & gt;
& lt; / html & gt;
 index.html  

Lưu ý rằng đây là trang rất cơ bản với tiêu đề cấp ba ( h3 ) và
phần tử div duy nhất. Bạn có thể thêm bất kỳ nội dung nào bạn thích vào trang web.

Hiểu mã

Đoạn mã dưới đây tạo một trang HTML bao gồm phần đầu và phần thân.

& lt; html & gt;
 & lt; đầu & gt;
 & lt; / head & gt;
 & lt; body & gt;
 & lt; / body & gt;
& lt; / html & gt;

Bạn có thể thêm tiêu đề cấp ba phía trên bản đồ bằng mã bên dưới.

 & lt; h3 & gt; Bản trình diễn Google Maps của tôi & lt; / h3 & gt; 

Đoạn mã dưới đây xác định một khu vực trên trang cho bản đồ Google của bạn.

 & lt;! - Phần tử div cho bản đồ - & gt;
& lt; div id = "map" & gt; & lt; / div & gt; 

Ở giai đoạn này của hướng dẫn, div chỉ xuất hiện dưới dạng một khối màu xám, bởi vì
bạn vẫn chưa thêm một bản đồ. Đoạn mã dưới đây mô tả CSS đặt
kích thước và màu sắc của div .

 / **
 * @giấy phép
 * Bản quyền 2019 Google LLC. Đã đăng ký Bản quyền.
 * SPDX-Giấy phép-Định danh: Apache-2.0
 * /
/ * Đặt kích thước của phần tử div có chứa bản đồ * /
#bản đồ {
  chiều cao: 400px;
  / * Chiều cao là 400 pixel * /
  chiều rộng: 100%;
  / * Chiều rộng là chiều rộng của trang web * /
} 

Trong đoạn mã trên, phần tử style đặt kích thước div cho bản đồ của bạn. Đặt
div chiều rộng và chiều cao lớn hơn 0px để hiển thị bản đồ. Trong này
trường hợp, div được đặt thành chiều cao 400 pixel và chiều rộng 100% để hiển thị
trên toàn bộ chiều rộng của trang web của bạn.

Bước 2: Thêm bản đồ có điểm đánh dấu

Phần này cho bạn biết cách tải API JavaScript của Maps vào
trang web và cách viết JavaScript của riêng bạn sử dụng API để thêm bản đồ
với một điểm đánh dấu trên đó.

TypeScript

 // Khởi tạo và thêm bản đồ
function initMap (): void {
  // Vị trí của Uluru
  const uluru = {lat: -25.344, lng: 131.031};
  // Bản đồ, tập trung tại Uluru
  const map = new google.maps.Map (
    document.getElementById ("map") dưới dạng HTMLElement,
    {
      thu phóng: 4,
      trung tâm: uluru,
    }
  );

  // Điểm đánh dấu, được đặt tại Uluru
  const marker = new google.maps.Marker ({
    vị trí: uluru,
    map: bản đồ,
  });
}

khai báo toàn cầu {
  giao diện Cửa sổ {
    initMap: () = & gt; vô hiệu;
  }
}
window.initMap = initMap;  index.ts  

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

JavaScript

 // Khởi tạo và thêm bản đồ
function initMap () {
  // Vị trí của Uluru
  const uluru = {lat: -25.344, lng: 131.031};
  // Bản đồ, tập trung tại Uluru
  const map = new google.maps.Map (document.getElementById ("bản đồ"), {
    thu phóng: 4,
    trung tâm: uluru,
  });
  // Điểm đánh dấu, được đặt tại Uluru
  const marker = new google.maps.Marker ({
    vị trí: uluru,
    map: bản đồ,
  });
}

window.initMap = initMap;  index.js  

Lưu ý: JavaScript được biên dịch từ đoạn mã TypeScript.

CSS

 / * Đặt kích thước của phần tử div chứa bản đồ * /
#bản đồ {
  chiều cao: 400px;
  / * Chiều cao là 400 pixel * /
  chiều rộng: 100%;
  / * Chiều rộng là chiều rộng của trang web * /
}
 style.css  

HTML

 & lt; html & gt;
  & lt; đầu & gt;
    & lt; title & gt; Thêm Bản đồ & lt; / title & gt;
    & lt; script src = "https://polyfill.io/v3/polyfill.min.js?features=default" & gt; & lt; / script & gt;

    & lt; link rel = "stylesheet" type = "text / css" href = "./ style.css" / & gt;
    & lt; script type = "module" src = "./ index.js" & gt; & lt; / script & gt;
  & lt; / head & gt;
  & lt; body & gt;
    & lt; h3 & gt; Bản trình diễn Google Maps của tôi & lt; / h3 & gt;
    & lt;! - Phần tử div cho bản đồ - & gt;
    & lt; div id = "map" & gt; & lt; / div & gt;

    & lt;! -
     Thuộc tính `defer` khiến lệnh gọi lại thực thi sau HTML đầy đủ
     tài liệu đã được phân tích cú pháp. Đối với việc sử dụng không chặn, tránh các điều kiện chủng tộc,
     và hành vi nhất quán trên các trình duyệt, hãy cân nhắc tải bằng Promises
     với https://www.npmjs.com/package/@googlemaps/js-api-loader.
    - & gt;
    & lt; script
      src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      hoãn lại
    & gt; & lt; / script & gt;
  & lt; / body & gt;
& lt; / html & gt;  index.html  

Thử mẫu

Stackblitz.com
CodeSandbox.io
JSFiddle.net
GitPod.io
Google Cloud Shell

Hiểu mã

Trong đoạn mã dưới đây, script tải API từ URL được chỉ định.

& lt; tập lệnh không đồng bộ
    src = "https://maps.googleapis.com/maps/api/js?key=
 YOUR_API_KEY 
 & amp; callback = initMap" & gt;
& lt; / script & gt;

Trong đoạn mã trên, tham số callback thực thi hàm initMap
sau khi API tải. Thuộc tính async cho phép trình duyệt tiếp tục
phân tích cú pháp phần còn lại của trang của bạn trong khi API tải. Khi nó đã được tải,
trình duyệt sẽ tạm dừng và ngay lập tức thực thi tập lệnh. Tham số key
chứa khóa API của bạn.

Xem Bước 3: Nhận khóa API để biết hướng dẫn về cách nhận
khóa API của riêng mình sau này.

Đoạn mã dưới đây chứa hàm initMap để khởi tạo và thêm bản đồ
khi trang web tải. Sử dụng thẻ script để bao gồm JavaScript của riêng bạn
chứa hàm initMap .

  function initMap () {}

Thêm hàm document.getElementById () để tìm bản đồ div trên web
trang.

Đoạn mã dưới đây tạo một đối tượng Google maps mới và thêm các thuộc tính vào
bản đồ bao gồm trung tâm và mức thu phóng. Xem tài liệu cho
tài sản khác
tùy chọn .

TypeScript

 // Vị trí của Uluru
const uluru = {lat: -25.344, lng: 131.031};
// Bản đồ, tập trung tại Uluru
const map = new google.maps.Map (
  document.getElementById ("map") dưới dạng HTMLElement,
  {
    thu phóng: 4,
    trung tâm: uluru,
  }
);  index.ts  

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

JavaScript

 // Vị trí của Uluru
const uluru = {lat: -25.344, lng: 131.031};
// Bản đồ, tập trung tại Uluru
const map = new google.maps.Map (document.getElementById ("bản đồ"), {
  thu phóng: 4,
  trung tâm: uluru,
});  index.js  

Trong đoạn mã trên, new google.maps.Map () tạo một đối tượng Google maps mới. Các
Thuộc tính center cho API biết vị trí căn giữa bản đồ.

Tìm hiểu thêm về nhận tọa độ vĩ độ / kinh độ,
hoặc chuyển đổi một địa chỉ thành tọa độ địa lý.

Thu phóng Thuộc tính chỉ định mức thu phóng cho bản đồ. Thu phóng: 0 là mức thấp nhất
thu phóng và hiển thị toàn bộ trái đất. Đặt giá trị thu phóng cao hơn để phóng to
trái đất ở độ phân giải cao hơn.

Đoạn mã dưới đây đặt một điểm đánh dấu trên bản đồ. Thuộc tính position đặt
vị trí của điểm đánh dấu.

TypeScript

 // Điểm đánh dấu, được đặt tại Uluru
const marker = new google.maps.Marker ({
  vị trí: uluru,
  map: bản đồ,
});  index.ts  

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

JavaScript

 // Điểm đánh dấu, được đặt tại Uluru
const marker = new google.maps.Marker ({
  vị trí: uluru,
  map: bản đồ,
});  index.js  

Tìm hiểu thêm về điểm đánh dấu:

Bước 3: Nhận khóa API

Phần này giải thích cách xác thực ứng dụng của bạn với
API JavaScript của Maps sử dụng khóa API của riêng bạn.

Làm theo các bước sau để nhận khóa API:

1. Chuyển đến
   
   Google Cloud Console .

2. Tạo hoặc chọn một dự án.

3. Nhấp vào Tiếp tục để bật API và bất kỳ dịch vụ liên quan nào.

4. Trên trang Thông tin đăng nhập , nhận khóa API (và đặt khóa API
   những hạn chế). Lưu ý: Nếu bạn có khóa API không hạn chế hiện có hoặc khóa
   với các hạn chế của trình duyệt, bạn có thể sử dụng khóa đó.

5. Để ngăn chặn hành vi trộm cắp hạn ngạch và bảo mật khóa API của bạn, hãy xem
   Sử dụng khóa API .

6. Bật tính năng thanh toán. Xem Sử dụng và thanh toán
   để biết thêm thông tin.

7. Sao chép toàn bộ mã của hướng dẫn này từ trang này sang trình soạn thảo văn bản của bạn.

8. Thay thế giá trị của tham số key trong URL bằng khóa API của riêng bạn
   (đó là khóa API mà bạn vừa lấy được).

   & lt; tập lệnh không đồng bộ
       src = "https://maps.googleapis.com/maps/api/js?key=
    YOUR_API_KEY 
    & amp; callback = initMap" & gt;
   & lt; / script & gt;
   

9. Lưu tệp này với tên kết thúc bằng . html , như index.html .

10. Tải tệp HTML trong trình duyệt web bằng cách kéo tệp đó từ màn hình của bạn lên
    trình duyệt của bạn. Ngoài ra, nhấp đúp vào tệp hoạt động trên hầu hết các
    hệ điều hành.

Mẹo và khắc phục sự cố

Mẹo: Kiểm tra
Giải pháp định vị cửa hàng để xem thêm
các ví dụ toàn diện về việc sử dụng các điểm đánh dấu tùy chỉnh để trực quan hóa dữ liệu trên
bản đồ.

• Bạn có thể điều chỉnh các tùy chọn như kiểu và thuộc tính để tùy chỉnh bản đồ. Vì
  thêm thông tin về cách tùy chỉnh bản đồ, đọc hướng dẫn để
  tạo kiểu và
  vẽ trên bản đồ .
• Sử dụng Bảng điều khiển Công cụ dành cho Nhà phát triển trong trình duyệt web của bạn để kiểm tra và chạy
  viết mã, đọc báo cáo lỗi và giải quyết vấn đề với mã của bạn.
• Sử dụng các phím tắt sau để mở bảng điều khiển trong Chrome:
  Command + Option + J (trên Mac) hoặc Control + Shift + J (trên Windows).

• Làm theo các bước bên dưới để lấy vĩ độ và
  tọa độ kinh độ cho một vị trí trên Google Maps.

  1. Mở Google Maps trong trình duyệt.
  2. Nhấp chuột phải vào vị trí chính xác trên bản đồ mà bạn yêu cầu
     tọa độ.
  3. Chọn Đây là gì từ trình đơn ngữ cảnh xuất hiện.
     Bản đồ hiển thị một thẻ ở cuối màn hình. Tìm vĩ độ
     và tọa độ kinh độ ở hàng cuối cùng của thẻ.

• Bạn có thể chuyển đổi một địa chỉ thành vĩ độ và kinh độ bằng cách sử dụng
  Dịch vụ mã hóa địa lý. Hướng dẫn dành cho nhà phát triển cung cấp thông tin chi tiết về
  bắt đầu với dịch vụ Mã hóa địa lý .