javascript - Google マップ マーカー — 背景色の設定

Question

透明な PNG をマーカーとして使用していますが、透明な領域を特定の色で塗りつぶしたいと考えています。以前はマーカー シャドウを使用してこれを実現していましたが、それらはビジュアル リフレッシュ (v3.14) では機能しません。

ありがとう！

Answer 1

マーカーの -option を false に設定するoptimizedと、セレクターを使用してカスタム css を marker-img に適用できます。

img[src="path/to/custom/marker.png"]

<編集/>

同じ画像を複数の色で使用できるようにするには、色を URI フラグメントとして追加するだけで、同じ画像でも一意のセレクターを取得できます。

JS:

new google.maps.Marker({
  optimized: false,
  icon: 'path/to/custom/marker.png#red'
  //other properties
});

CSS:

#map-canvas img[src="path/to/custom/marker.png#red"]{
 background-color:red;
}

もちろん、CSS ルールをハードコーディングしたくない場合は、JS を介して動的に設定することもできます。以下を参照してください。styleSheet.insertRule()

同じ画像に複数の背景色を使用したデモ (動的ルール挿入を含む):

http://jsfiddle.net/doktormolle/vngp1hdr/

Answer 2

私は非常によく似た問題に遭遇しました。代わりに、アイコンの背景を透明に変換したいと考えています。

最も簡単な方法は、背景を透明にして既存のアイコン (png、jpg、ビットマップ) を gif 形式に変換することだと思います。次のオンライン ツールを使用して、それを行うことができます。とても簡単です。

以下は、Google マップで透明な出力を持つアイコンの例です。それが役に立てば幸い。

Answer 3

わかりました、どこが難しいですか？半透明の色が必要な場合は、アイコンで作成するだけです。ここでは、50% の透明な緑があります。

そして、それを地図に載せます：

http://jsfiddle.net/Qrj2n/

var marker = new google.maps.Marker({
      position: new google.maps.LatLng(-34.397, 150.644),
      map: map,
      icon: "http://i.stack.imgur.com/su8w5.png"
});