Thu phóng mượt mà trên maps.google.com hơn API Google Maps v3

Question

Tôi nhận thấy rằng zoom trên maps.google.com hoạt động khác (đọc: mượt mà) so với bản đồ tùy chỉnh của tôi sử dụng phiên bản 3 của api bản đồ google. Sau đó tôi phát hiện ra rằng điều này cũng áp dụng cho bản trình diễn từ Google here.

Có cách nào để có được cảm giác thu phóng mượt mà trên bản đồ bằng API Google Maps v3 không?

Tôi đã cố gắng tìm kiếm trên mạng để tìm giải pháp, nhưng tất cả những gì tôi có thể tìm là mọi người hỏi cách tạo hoạt ảnh thu phóng, không phải là những gì tôi đang tìm kiếm.

Answer 1

Trang web Google Maps gốc maps.google.com sử dụng phần tử canvas HTML5 để hiển thị bản đồ. API Google Maps phiên bản 3 không phải là. Hiện tại (vào cuối năm 2015) không thể có được hành vi thu phóng liên tục mượt mà bằng cách sử dụng API Google Maps.

Sau khi tìm kiếm tài liệu của Google và các trang web cho câu trả lời mà không kết quả, tôi mất một thời gian để hiểu làm thế nào v3 API và làm thế nào maps.google.com về cơ bản làm việc để đưa ra và hiển thị bản đồ. Có một sự khác biệt lớn mà làm cho rõ tại sao một zoom liên tục sẽ không hoạt động bằng cách sử dụng API:

1. Google Maps API v3 tạo một bản đồ làm bằng gạch hình ảnh từng hoá thân vào những đơn <div /> container với một kích thước mặc định cố định là 256 x 256 px. Khi chuyển đổi mức thu phóng, mỗi ô duy nhất phải được hiển thị lại với một hình ảnh mới (thuộc bất kỳ loại nào, có thể được tạo kiểu động với các lớp phủ tùy chỉnh, v.v.). Đây là một nhiệm vụ rất tốn kém, do đó, mọi bước thu phóng bổ sung đều bổ sung thêm tài nguyên để được tải và tính toán thêm chi phí để hiển thị lại toàn bộ khung cảnh thông qua thao tác DOM. Một trải nghiệm zoom chất lỏng gần như không thể, ngay cả với các trình duyệt hiện đại trên các máy CPU/bộ nhớ cao.

2. maps.google.com sử dụng HTML5 canvas đối tượng cho rendering cảnh bản đồ (Tôi chắc rằng có một API phong cách v3 dự phòng biến thể cho các trình duyệt cũ). Vẽ trong một đối tượng canvas được hỗ trợ nguyên bản là cách ít tốn kém hơn thay thế hình ảnh trong các phần tử DOM. Google sử dụng phương pháp tiếp cận dựa trên vector dựa trên cơ bản cho phép thực hiện phóng to liên tục chi tiết mà không cần tìm nạp thêm tài nguyên. Ngoài ra, thông tin cần thiết cho một mức thu phóng cụ thể mặc dù có thể được tìm nạp dưới dạng các đoạn dữ liệu nhỏ hơn và áp dụng cho các thường trình vẽ.

Tôi phải thừa nhận rằng tôi không biết cách này hoạt động chi tiết. Nó chỉ là những gì tôi phát hiện bằng cách kiểm tra nguồn và tôi hy vọng nó khá nhiều tiền lên lý do tại sao một "mịn zoom" là hiện không thể sử dụng API bản đồ. Dù sao, hãy chờ API Google Maps v4!

Answer 2

Có các thư viện lập bản đồ JavaScript khác cho phép thu phóng mượt mà, chẳng hạn như Mapbox-GL và Cesium. Cả hai đều sử dụng WebGL, giống như maps.google.com.

https://www.mapbox.com/mapbox-gl-js/example/fitbounds/

https://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Camera.html&label=Showcases

Answer 3

Tôi nghĩ rằng bây giờ phụ thuộc vào việc Google Maps là trong Lite Mode, mà có vẻ là tên của họ cho người cao tuổi đi học, bản đồ ngói dựa trên hình ảnh, như trái ngược với vải bản đồ dựa trên.

Theo tài liệu của Google Maps cho System and Browser requirements, Maps sẽ tắt 3D cho một số thẻ video nhất định và đối với một số thẻ video, nó vượt xa và chỉ cho phép bạn sử dụng Chế độ Lite.