2011-12-28 31 views
6

Tôi muốn có một con trỏ tùy chỉnh trong khi được so khớp trên thành phần bản đồ google trên trang. Tôi muốn có thể thay đổi chương trình con trỏ thành hình ảnh tùy chỉnh, sau đó thay đổi nó trở lại con trỏ mặc định.Làm cách nào để đặt hình ảnh tùy chỉnh cho con trỏ chuột trong bản đồ google api v3

Tôi tin rằng đây là cách bạn thiết lập con trỏ mặc định trên của bạn 'bản đồ' đối tượng

map.setOptions({ draggableCursor: 'default' }); 

Sau khi một số nghiên cứu và thử nghiệm, tôi thấy cách tốt nhất để làm điều này là như sau:

map.setOptions({ draggableCursor: 'url(path/to/your/image.png), crosshair' }); 

trong css, chỉ webkit hỗ trợ giá trị url cho thuộc tính con trỏ, vì vậy các trình duyệt khác nhận giá trị 'crosshair' trong trường hợp này đã giải quyết được vấn đề của tôi về việc cần thông báo cho người dùng rằng họ cần nhấp vào bản đồ.

để biết thêm thông tin về các thuộc tính draggableCursor, vui lòng xem bản đồ google api tài liệu v3 đây: http://code.google.com/apis/maps/documentation/javascript/reference.html#MapOptions

Hy vọng điều này giúp một người đang gặp khó khăn trong việc thiết một con trỏ tùy chỉnh trên bản đồ google.

Trả lời

10

Trên máy Mac hoạt động hoàn hảo trên chrome, safari và firefox.

tôi chỉ đơn giản sử dụng này:

map.setOptions({ draggableCursor : "url(http://s3.amazonaws.com/besport.com_images/status-pin.png), auto" }) 

ps: Tôi đọc ở đâu đó rằng bạn cần hình ảnh của bạn phải được theo 64x64 trên trình duyệt nhất định. Không bao giờ phải thử nhưng có lẽ vấn đề của bạn đến từ đó.

+0

Vâng, đây là giải pháp tương tự mà tôi đã đăng. Vấn đề của tôi là thiết lập nó trở lại con trỏ mặc định sau đó. Sau khi nghiên cứu thêm, tôi thấy rằng để thay đổi con trỏ về mặc định, bạn phải sử dụng cùng một hình con trỏ tùy chỉnh mà google sử dụng: url 'map.setOptions ({draggableCursor: '(http://maps.google.com/mapfiles) /openhand.cur), di chuyển '}) ' – nomis

+0

Khi tôi gọi điều này, tôi gặp lỗi' Lỗi Loại Không bắt buộc: Không thể gọi phương thức 'setOptions' của null. –

2

Để sao để con trỏ mặc định bạn có thể assing undefinded để biến draggableCursor:

map.setOptions({draggableCursor: undefined}) 
0

Đối với những người đang tìm kiếm để thiết lập SVG như draggableCursor của bạn. Các giải pháp chúng tôi dưới đây.

map.setOptions({ draggableCursor : "url(PATH_TO_YOUR_SVG.svg), pointer" }); 

Hãy tin tôi là có thể.

Các vấn đề liên quan