2012-01-12 31 views
3

私は、Googleマップjavascript api V3を使用して私のマーカーのカスタム画像を使用しています。誰かがそれらの上に数字をスーパーインポーズする方法を知っているのだろうかと思っていました。私はボックスイメージを持っており、ボックスに数字を動的に配置する必要があります。私はこれを行うスタイルの方法があるかどうか、または誰かが私にjavascriptを介してそれを行う方法を教えることができるかどうかはわかりません。GoogleマップJavascript APIカスタムマーカー番号

答えて

4

マップユーティリティライブラリ(http://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries)を使用できます。 RichMarker & styledMarker(ページをスクロールダウン)はおそらくあなたにとって最も便利です。

オプション2 - 独自の実装オーバーレイクラス(作業が必要)をロールバックすることができます。例はここにあるhttp://gmaps-samples-v3.googlecode.com/svn/trunk/overlayview/custommarker.html

オプション3 - (より面倒なことに)数字でカスタムマーカー画像を作成することです。

+0

素晴らしいポスト!あなたの最初のリンクは素晴らしいです:) – Ron

+0

2番目のリンクが壊れています。 – KOB

1

3.21(2015年8月)では、1文字のマーカーラベルのサポートはadded to Google Mapsでした。 new marker label APIを参照してください。残念ながら、これはlimited to single digitsなので、2桁以上の数字が必要な場合は、RichMarkerのような追加ライブラリを使用する必要があります。

あなたは今、このようなあなたのラベルマーカーを作成することができます。

var marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(latitude, longitude), 
    icon: markerIcon, 
    label: { 
    text: '1' 
    } 
}); 
本当に
関連する問題