今回は影付きマーカーの話です。
以前のバージョンだとMarkerOptionsにshadowプロパティがあって、
影用のpng画像を作って指定すれば出来たのですが、
バージョンが3.14辺りからマーカーに影を付ける機能が無くなってしまい、
でも影を付けたい時もあるので、
そんな時のための記事になります。
とは言え難しいことをやるわけではなく、
どちらかと言えば力技です。
マーカーに影を付ける機能がなくなってしまったので、
もともと影の付いたマーカーを使ってしまおうという考えです。
影付きマーカーは
ここで簡単に作れます
影を付けたいマーカーを「画像ファイルをドロップして下さい」の部分にドロップするだけです。
出来上がった画像を右クリックなどで保存すれば終了です。
そんな訳でサンプルです。
使用したマーカー画像は下記の画像です。
マーカーアイコンの設定ですが、
サイズとアンカーポイントが変わってきます。
元の画像は、
で
幅：３６ピクセル、縦：８６ピクセルだったのですが、
影付き画像は、
幅：７９ピクセル、縦：８６ピクセルと幅が少し大きくなります。
また、元の画像ではアンカーポイントの設定は必要なかったのですが、
左右非対称になってしまったのでアンカーポイントの設定が必要になってきます。
アンカーポイントの設定は通常、
縦はそのまま画像の縦の長さで、、
幅は元の画像の幅÷２の値で設定すれば大丈夫です。
※割り切れない場合は小数点以下切り捨てで。
もし良く分からない場合は
１）マーカー画像を右クリック。
２）「編集」をクリック（ペイントソフトが起動します）。
３）キーボードの「ctrl」ボタンを押しながらマウスホイールをコロコロやって目一杯まで拡大。
４）アンカーポイントにしたい場所にマウスを持って行くと、ペイント画面の左下あたりに座標が出てくるので、その数値をそのまま使用して下さい。
ではサンプルです。
<!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: 13,
center: latlng
};
var gmap = new google.maps.Map(map, mapOptions);
new google.maps.Marker({
position: latlng,
map: gmap,
icon: {
url: "http://goo.gl/mBMkEQ", // 画像のURL
size: new google.maps.Size(79, 86), // 画像のサイズ
anchor: new google.maps.Point(18, 86) // 画像のアンカー
}
});
});
</script>
</head>
<body>
<div id="map_canvas" style="width: 400px; height: 400px"></div>
</body>
</html>
0 件のコメント:
コメントを投稿