2010-04-26 9 views
7

Tôi cần tạo bản đồ thế giới tương tác trên trang đầu của trang web, cổng xem sẽ có kích thước khoảng 650x200 pixel. Sự tương tác sẽ bao gồm những điều sau, di chuột qua một quốc gia sẽ làm nổi bật (các quốc gia theo nghĩa đen sẽ được điền bằng "màu đỏ" chẳng hạn) quốc gia đó và hiển thị tên quốc gia (tốt nhất là văn bản trong div), tôi cũng sẽ liên kết sự kiện làm nổi bật với sự kiện sẽ đánh dấu một quốc gia khi được chọn.Bản đồ thế giới tương tác, các quốc gia nổi bật khi di chuột qua

Tôi đang gặp khó khăn khi tìm một giải pháp phù hợp, tôi từ chối sử dụng hoặc học một công nghệ sở hữu chẳng hạn như đèn flash để nó không phải là một lựa chọn. Tôi đã tạo một mô hình đơn giản bằng cách sử dụng các trình mở và một hình ảnh bản đồ tùy chỉnh nhưng các điểm đánh dấu của các quốc gia tải quá chậm trong IE6.

Cũng svg dường như quá lớn, như tôi đã cố gắng sử dụng RaphaelJS, nhưng abondoned nó khi tôi nhận ra dữ liệu bản đồ thế giới là 1,2 MB mà là hoàn toàn chấp nhận được un cho trang bìa của một trang web ..

Tôi thực sự thua lỗ về cách tôi sẽ làm điều này, khu nghỉ mát cuối cùng của tôi là tự tạo 250+ (tuy nhiên nhiều quốc gia có) png và áp dụng các sự kiện di chuột tới các điểm nóng trong hình ảnh ... nhưng điều này có lẽ sẽ là kết thúc chết quá .. tuyệt vọng tìm kiếm một giải pháp, bất kỳ ý kiến ​​hữu ích sẽ được đánh giá cao!

Trả lời

5

Tôi quyết định chung cuộc với RaphaelJS, nhập tất cả các đường dẫn từ svg trong inkscape, hoạt động rất tốt!

6

Tại sao lại phát minh bánh xe. Google Charts đã thực hiện điều này.

+0

Bạn có chắc chắn? tôi nhớ đã nhìn vào nó và không bị thuyết phục, bản đồ là tĩnh, tôi không nghĩ rằng tôi có thể đính kèm các sự kiện JS? – BrenGG

+0

Có một ví dụ ngay trên trang tôi đã liên kết để hiển thị bản đồ thế giới tương tác đầy đủ. –

+0

hmmm. ok ja tôi nhớ nhìn thấy điều này một tuần trước đây, không thể nhớ tại sao tôi bỏ nó, bệnh mất một cái nhìn sâu hơn vào buổi sáng ... cảm ơn một lần nữa – BrenGG

0

Bạn có dữ liệu tọa độ quốc gia được lưu trữ ở đâu đó không?

Nếu vậy việc thiết lập chức năng phân tích cú pháp thông qua dữ liệu được chuyển vào và tạo 250+ đường dẫn không được là rằng lớn.

+0

tôi có các tọa độ của tất cả các thủ đô, tôi đã tạo ra các dấu nhỏ trong phần mở rộng nhưng nó quá chậm trong IE6 (20% khách truy cập trang web) Tôi lý tưởng muốn gắn bó với OpenLayers như một giải pháp như tôi đã phát triển thực sự thích nó trong một hoặc hai tuần trước ... – BrenGG

+0

VML có thể hoạt động cho những gì bạn muốn. Vì có vẻ như bạn đang lo lắng nhất về IE6 – Shaunwithanau

19

Tôi đã phát triển jVectorMap cho mục đích đó.

+1

Bạn thưa bạn, là vị cứu tinh của tôi. – Griffin

0

Chúng tôi đã phát triển Highmaps, liên quan đến Highcharts, để dễ dàng giải quyết vấn đề hiển thị dữ liệu như thế này. Chúng tôi cũng cung cấp map collection trên 350 bản đồ, được tối ưu hóa cho kích thước để giữ cho mọi thứ gọn nhẹ.

Để biết ví dụ chi tiết (tải bản đồ chi tiết hơn về nhấp chuột), hãy xem this demo.

Bản đồ cao cấp là miễn phí cho mục đích phi thương mại.

Population history by country Drainage basin of the Meuse river