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!
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:
- Hồng:
pink-dot.png - màu vàng:
yellow-dot.png - 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.
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 latLng và color 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:
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
