web-dev-qa-db-ja.com

CSS-ClassをGoogleマップマーカーに追加する方法

GoogleMapsアプリケーション（Web）でマーカーをアニメーション（フェードイン、フェードアウト）したい。

Cssクラスをマーカーに割り当てるにはどうすればよいですか？

または、特定のマーカーにアクセスするにはどうすればよいですか？ ：afterなどのセレクターはありますか？

そうでない場合、アニメーションを適用する最も簡単な方法は何ですか？

google-mapsgoogle-maps-api-3google-maps-markers
18
Bastian Gruber

マーカーに使用される画像を含むDOMNodeは、APIを介して利用できません。

さらに、デフォルトではマーカーは単一のDOMNodeではなく、キャンバスを介して描画されます。

ただし、マーカーごとに一意のアイコンURLを使用すると、CSSを介してマーカー画像にアクセスできる場合があります。

サンプル（jQueryを使用）：

<style type="text/css">
img[src^='http://www.google.com/mapfiles/marker.png?i=']{
  opacity: 0.5
}
</style>
<script  type="text/javascript">
      function initialize() {
        var index=0;
        var mapOptions = {
          zoom: 14,
          center: new google.maps.LatLng(52.5498783, 13.425209099999961),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map_canvas'),
            mapOptions);

        marker=new google.maps.Marker({position:map.getCenter(),
                 map:map,optimized:false,
                 icon:'http://www.google.com/mapfiles/marker.png?i='+(index++)});

        google.maps.event.addListener(marker,'mouseover',function(){
          $('img[src="'+this.icon+'"]').stop().animate({opacity:1});
        });

        google.maps.event.addListener(marker,'mouseout',function(){
          $('img[src="'+this.icon+'"]').stop().animate({opacity:.5});
        });
      }

      google.maps.event.addDomListener(window, 'load', initialize);

</script>

istの仕組み：

サンプルでは、​​マーカーアイコンとして単一の画像を使用しています（ http://www.google.com/mapfiles/marker.png ）

cSSを使用して、不透明度を適用します。 URL内にiパラメータがあることに気付くかもしれません。このパラメーターは、img-srcを一意にするために使用されます。

一意のimg-srcを取得するために増分される変数を使用します。

var index=0;

//a few lines later:
icon:'http://www.google.com/mapfiles/marker.png?i='+(index++)

これで、<img/>-マーカーに使用される要素、例えば属性セレクタを介したonmouseover/onmouseout。

Vanilla javascriptを使用したくない場合は、document.querySelector画像にアクセスします。

注：マーカーのoptimized-オプションをfalseに設定する必要があります（これによりAPIが強制的にレンダリングされます単一の要素としてのマーカー）
デモ：http://jsfiddle.net/doktormolle/nBsh4/

17
Dr.Molle

たとえば、マーカーのカーソルを変更する場合に機能するトリックがあります。これを追加します。

google.maps.event.addListener(YOURMARKER,'mouseover',function(){$(".gm-style   div").addClass("markerClass")});                        
google.maps.event.addListener(YOURMARKER,'mouseout',function(){$(".gm-style div").removeClass("markerClass")});

そして

#YOUR-CANVAS .gm-style div {cursor: default !important;}
#YOUR-CANVAS .gm-style div.markerClass{cursor:pointer !important}

魅力のように働く

0
Hendrik Eppinga