このプロパティは地図上でのマウスの形状を設定します。
設定のしかたは簡単で
draggableCursor: waitなどと設定するだけです。
設定の種類はcssのcursorに設定するのと一緒です。
auto: ブラウザが自動的に選択したカーソル
default: 矢印型など利用環境の標準カーソル
pointer: リンクカーソル
crosshair: 十字カーソル
move: 移動カーソル
text: テキスト編集カーソル
help: ヘルプカーソル
wait: 待機・処理中カーソル
等などです。
詳しくは
http://www.htmq.com/style/cursor.shtml
など参考にして下さい。
また、画像も設定出来ます。
ブラウザがChromeの場合はpngでも大丈夫そうなのですが、
IEの場合はcur形式のカーソル画像でないとダメみたいです。
せっかくなのでサンプルは画像カーソルを設定してみます。
以下サンプルです。
使用したカーソルは下記の画像です。
下記のサンプルのurl(mycur.cur)
の部分は適宜書き換えて下さい。
draggableCursor: "url(mycur.cur), auto"としているのは、画像が読み込まれなかった場合のカーソル形状を指定するためです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title> google maps api v3</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<script type="text/javascript">
google.maps.event.addDomListener(window, "load", function () {
var map = document.getElementById("map_canvas");
var latlng = new google.maps.LatLng(35.658580, 139.745433);
var mapOptions = {
zoom: 18,
center: latlng,
draggableCursor: "url(mycur.cur), auto"
};
var gmap = new google.maps.Map(map, mapOptions);
});
</script>
</head>
<body>
<div id="map_canvas" style="width: 400px; height: 400px"> </div>
</body>
</html>
0 件のコメント:
コメントを投稿