Как установить пользовательское изображение для курсора мыши на карте Google api v3 map

Question

Я хочу, чтобы пользовательский курсор находился над компонентом карты Google на странице.Я хотел бы иметь возможность программно изменить курсор на собственное изображение, а затем изменить его на курсор по умолчанию.

Я полагаю, что именно так вы устанавливаете курсор по умолчанию на объекте 'map'

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

После некоторых исследований и экспериментов я нашел лучший способ сделать это следующим образом:

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

в css, только webkit поддерживает значение url для атрибута курсора, поэтому в этом случае другие браузеры получают значение 'crosshair', что решило мою проблему необходимости информировать пользователей, что им нужно нажатьна карте.

Для получения дополнительной информации об атрибуте draggableCursor, пожалуйста, смотрите документацию по API карт Google v3 здесь: http://code.google.com/apis/maps/documentation/javascript/reference.html#MapOptions

Надеюсь, это поможет кому-то, у кого возникли проблемы с установкой пользовательского курсоракарта Google.

Answer 1

На Mac он отлично работает на Chrome, Safari и Firefox.

Я просто использую это:

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

ps: я где-то читал, что ваше изображение должно быть под 64x64 в определенном браузере. Никогда не пытайся, но, возможно, твоя проблема в этом.

Answer 2

Чтобы вернуться к курсору по умолчанию, вы можете присвоить undefinded переменной draggableCursor:

map.setOptions({draggableCursor: undefined})

Answer 3

Для тех, кто хочет установить SVG в качестве вашего draggableCursor. Решение нам ниже.

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

Поверь мне, это возможно.