HomeLập trìnhJavaScriptCách thay đổi...

Cách thay đổi màu đánh dấu Google Maps bằng JavaScript


của Tân Lệ Thiên

Làm cho chúng có màu hồng, xanh dương, xanh lá cây, vàng hoặc tím!

1*d635FJj7G3ZEAZdyLUaeSg

Theo mặc định, điểm đánh dấu Google Maps có màu đỏ. Bài viết này sẽ hướng dẫn cách thêm các điểm đánh dấu màu khác nhau vào Google Maps. Vậy hãy bắt đầu. ?

1. Tải Google Maps

Tạo một tệp HTML tải Google Maps bằng cách làm theo các tài liệu chính thức của Google Maps API: Hello World.

Mã của bạn sẽ trông giống như đoạn mã bên dưới.

Ghi chú: Nhớ thay đổi YOUR_API_KEY vào khóa API Google Maps thực tế của bạn.

2. Thêm các điểm đánh dấu màu khác nhau

Để thêm điểm đánh dấu màu xanh, chúng ta cần thay đổi biểu tượng của điểm đánh dấu. Điều này được thực hiện bằng cách thêm thuộc tính biểu tượng và chỉ định URL cho thuộc tính đó như bên dưới.

icon: {                               url: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png"                           }

Lưu ý rằng chúng tôi chỉ định blue-dot.png ở cuối URL để lấy điểm đánh dấu màu xanh lam. Để thêm một điểm đánh dấu màu xanh lá cây, chỉ cần thay đổi nó thành green-dot.png để URL sẽ là http://maps.google.com/mapfiles/ms/icons/green-dot.png .

Một số màu sắc khác có sẵn:

  1. Hồng: pink-dot.png
  2. màu vàng: yellow-dot.png
  3. màu tím: purple-dot.png

Để có được URL của nhiều biểu tượng đánh dấu hơn, vui lòng tham khảo trang web này.

Đọc thêm  Curso JS miễn phí cho người học chính

3. Gói vào chức năng thêm điểm đánh dấu

Để làm cho mã sạch hơn, chúng ta có thể định nghĩa một addMarker chức năng đưa vào latLngcolor của điểm đánh dấu. Lưu ý rằng chúng tôi lưu trữ các điểm đánh dấu được thêm vào một toàn cầu markersArray trong trường hợp chúng ta cần thực hiện bất kỳ thao tác nào trên các điểm đánh dấu sau này.

Mở tệp HTML trong trình duyệt. Nó sẽ giống như thế này:

1*vkqPZHbgS4iz9zOtVKvf6g

Bạn có thể lấy phiên bản cuối cùng đầy đủ của mã từ đây. Xin vui lòng cho tôi biết làm thế nào nó đi trong các ý kiến ​​​​dưới đây.

Vui lòng xem một hướng dẫn khác về Google Maps mà tôi đã viết:
Triển khai nhấp vào JavaScript Google Map để thêm các điểm đánh dấu có thể kéo bằng đa tuyến



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status