Thêm Bản đồ Google có Điểm đánh dấu vào Trang web của Bạn – html google maps vị trí

Bạn đang xem : vị trí html google maps

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.

Xem Thêm  Các mẫu trang web HTML miễn phí - mẫu web html miễn phí

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

Xem Thêm  Tạo bản sao lưu cơ sở dữ liệu đầy đủ - SQL Server - tạo máy chủ sql sao lưu cơ sở dữ liệu

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ẽ 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ý .


Xem thêm những thông tin liên quan đến chủ đề html google maps vị trí

JavaScript 36 – Js Geo Location (Lấy vị trí hiện tại) cho bản đồ – Trung Tâm Java Master

  • Tác giả: JMaster Trung Tâm Java
  • Ngày đăng: 2020-08-24
  • Đánh giá: 4 ⭐ ( 6634 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Sử dụng navigator hỗ trợ geo location để lấy vị trí hiện tại show lên trên bản đồ toạ độ vị trí đó.

Định vị vị trí (Geolocation) trong HTML5

  • Tác giả: hocjavascript.net
  • Đánh giá: 3 ⭐ ( 2499 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Geolocation được sử dụng để định vị vị trí người dùng trong HTML5. Để bảo vệ quyền riêng tư, việc xác định vị trí chỉ được thực hiện khi người dùng đồng ý.

Mua vị trí trên Google map.

  • Tác giả: seodiadiem.com
  • Đánh giá: 4 ⭐ ( 6655 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Cách Đặt Tên Vị Trí Trên Google Map S, Gắn Nhãn Riêng Tư Cho Địa Điểm

  • Tác giả: caodangykhoatphcm.edu.vn
  • Đánh giá: 3 ⭐ ( 9474 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Đưa địa chỉ lên Google Maps sẽ giúp khách hàng tìm được bạn một cách dễ dàng, Nếu như bạn kinh doanh lĩnh vực nhà hàng, khách sạn, quán ăn, quán cafe… thì việc đưa địa điểm lên bản đồ của Google được coi là một lợi thế cạnh tranh

Nhúng bản đồ google map cho website từ a-z

  • Tác giả: www.hoangweb.com
  • Đánh giá: 3 ⭐ ( 1082 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Cách tạo nhiều bản đồ địa điểm đơn giản với Google Maps API

  • Tác giả: lamvt.vn
  • Đánh giá: 4 ⭐ ( 5504 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tôi đã từng tạo trang địa điểm cho một nhà hàng có nhiều vị trí. Đây là một xu hướng áp đảo, một bản đồ Google mà với mỗi vị trí có một điểm đánh dấu riêng.

Chia sẻ bản đồ hoặc chỉ đường với người khác

  • Tác giả: support.google.com
  • Đánh giá: 3 ⭐ ( 4529 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bạn có thể chia sẻ vị trí, chỉ đường hoặc bản đồ. Bạn có thể chia sẻ: Địa điểm, doanh nghiệp hoặc địa chỉ Tìm kiếm chỉ đường Hình ảnh C

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  The Panopticon Is Already Here - amazon ses là gì