タグ: GoogleMapsAPI を抽出しています。
Total: 4

Markerをsymbolで作成

ブログ | 2013/10/7 00:06
http://lab.9wash.com/gmap3/symbol/

何かの確認で、マーカーの色分けをしたいのだけれど、画像作るのは面倒だしという時に。マーカーの形は、svgで任意に作成可能。サイズや色などはJSで。

上記のsvgは、

iconが、
m 0,-29.705535 c -4.8022234,0 -8.7034854,3.8973 -8.7034854,8.6947 -0.128802,7.4171 5.759388,6.0108 8.7034854,20.71640045 C 2.9440976,-15.000035 8.8322896,-13.593735 8.7034876,-21.010835 c 0,-4.7974 -3.901264,-8.6947 -8.7034876,-8.6947 z

shadowが、
M 12.751543,-15 C 8.2734828,-15 2.9985488,-13.0123 0.98349175,-10.5655 -2.2520962,-6.7828 3.8292968,-7.5 0.39777875,0 9.3200238,-7.5 14.220077,-6.7828 17.215449,-10.5655 19.230509,-13.0123 17.229599,-15 12.751543,-15 z

久しぶりに、inkspaceをダウンロードして、描いてみました。

ff4,ff5で、OverlayView の fromLatLngToDivPixel とか。

ブログ | 2011/7/8 23:50
ff3.6なら問題ないのだけれど、
this.px = this.getProjection().fromLatLngToDivPixel(this.ll);
こういう値が、最初の読み込み時から、まったく変わってくれない。
ie6ですら動くのに。

検索したけれど、情報がこれしかなかった。
https://groups.google.com/group/google-maps-js-a...

・・・
もうひとつ下に、OverlayView のclassを作って、いちいちpxを拾って、なんとかゴリゴリ回避してみる予定。いまから。
▼追記 2011/7/9 04:11
getProjection()でのポイント取得は、挫折したので、必要な時に、座標の比率からx,yを計算することにした。
var bds = map.getBounds().toUrlValue().split(',');
var h = $('#map_canvas').height();
var w = $('#map_canvas').width();
var y = h * (bds[2]-this.ll.lat())/(bds[2] - bds[0]);
var x = w * (this.ll.lng()-bds[1])/(bds[3] - bds[1]);
this.px = new google.maps.Point(x,y);
▼追記 2011/7/9 15:49
ちょっと認識違いの気もしてきた。
ffでは、OverlayView内のdomの位置が取れないということだけかも。

googlemaps api v3 の fusion tables研究

ブログ | 2011/7/4 17:22
少し、やりたいことができるか研究してみた。
・オリジナルのマーカーはできないようだ。
・カラムに写真のURLを入れといて、それらをパッと表示させるようなこともできないようだ。

そりゃそうか、とも思うけれど、少し残念。
使い道はありそうだけれど、30mapsでは、使えないかな。

v3化のメモ

ブログ | 2011/4/21 01:05
  • blog☆ ...polyline系編集は、ひとまず廃止
  • Yahooとcyberjapanの調整☆
  • ff5での、吹き出しフォーム対応
  • 吹き出しのmouseover処理
  • nodeでのmap削除後の遷移
  • nodeで住所と愛称
  • wideマーカー維持チェック
  • map::icon_img
  • IE6 左下ボタン群
  • 初期、サイドバーを隠している時の処理
  • 30maps bookmarkletの修正
  • mappletコードの削除
  • _.marker.imageの30mapsタイプ分け
  • デフォルトのinfowindowは、地図に収まらないと、スクロールバーが強制的に出る。→オリジナルinfoBoxを作って対処。
  • 編集ができてない。
  • プロモード
  • ストリートビュー
  • topページ
  • nodeページ
  • listページのfloatマップ
  • 地図移動
  • ie6の切り分け。3.4~でマーカーが透過されない。もしくは非対応宣言。
  • 写真・時刻・番号・愛称の編集後、iw.sかな。
  • サイドバー
  • タグ抽出
  • wideマーカー
  • adsense
  • memoマーカー表示
  • 吹き出しの中を文字選択可能に
  • _.marker = {}
  • URLでのアクセス☆
  • ユーザーのMAP
  • IE9
  • IE8
  • IE7
  • IE6

v3化以外のメモ
  • memcache化 (top, user())
  • sidebar boxのcss3化
  • blogにプレビュー
  • タイトル承認、削除マッピングページの遅さをなんとかする
  • IE8以下の角丸どうする?
  • _.post2, _.get2 への移行
▼追記 2011/6/9 22:36
さて、せっせとやる。
だいぶん、メインのmapはv3化ができてきた。

  • オーバーレイの吹き出しの時、その下のマーカーをクリックできなくする。
▼追記 2011/6/23 01:48
あーあーあー、今日も進まない。
夏のせいにしとこ。
▼追記 2011/6/30 02:28
メインの地図は、あとちょっとだ。
▼追記 2011/7/3 16:35
IE6を切っていいものか、アクセス解析を見ると、まだ12%くらいを占めてる。safari,firefox,chromeより多い。

v3化していいものだろうかと、apiのサンプルをie6で見ると、動いてるから動くのかな?
v2を残しながらという進め方をしなかったので、もう遅いけど。

topもだいたい完了したので、大きいところは、個別ページとblogか。
▼追記 2011/7/5 03:40
IE対応、思いのほか、苦戦しなかった。
IE6も、v3.5で問題ないようだ。一点、markerのpngをスプライトしたのだけれど、shadowが表示されないので、shadowは分離した。アルファチャンネルpngでok.

ということで、とりあえずのゴールが見えてきた。(気がする)
▼追記 2011/7/9 14:50
さあ、この週末でのリリースを目指す。
▼追記 2011/7/11 19:04
吹き出しの影つけてみた。吹き出しを微妙に透過させてるあたりの処理との絡みにややこだわりを見せてみた。
前 | 1 | 次

Rottel内コンテンツ

ユーザー一覧

Rottelとは?
利用規約
開発飲料
利用者の声
ヘルプ
close