Googleマップ：マウスオーバー時にマーカーを効率的に変更する方法

Googleマップのマーカーの色やテキストを動的に変更したい。Googleマップ：マウスオーバー時にマーカーを効率的に変更する方法

実行コード：http://jsbin.com/odimop/edit#javascript,html,live

あなたは性質が、この場合のmarker4とmarker5で、同じようにその変数振る舞いを使用して、すべてのマーカーを変更したときに、変数（VARのstyloo）を使用しての問題がある見ることができるように。各マーカーには1つのスタイル付き変数が必要なため、マップに多すぎるマーカーがあると、この方法は面倒で退屈です。

this.styleIcon.color = "00ff00";のようなものを使用するソリューションを探しています。しかし、これまでは機能していません。

お願いします！

 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
     <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/styledmarker/src/StyledMarker.js"></script> 
     <script type="text/javascript"> 
      var styleIcon; 

      function initialize() { 
       var myLatLng = new google.maps.LatLng(37.313477473067, -121.880502070713); 
       var myOptions = { 
        zoom: 10, 
        center: myLatLng, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       }; 

       var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

       var marker2 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.BUBBLE,{color:"00ffff",text:"Hover Me, this doesn't work"}),position:new google.maps.LatLng(37.5, -121.880502070713),map:map}); 
       var marker3 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.BUBBLE,{color:"ff0000",text:"Just a Marker"}),position:new google.maps.LatLng(37.4, -121.880502070713),map:map}); 

       google.maps.event.addDomListener(marker2,"mouseover", function(o){ 
        this.setAnimation(google.maps.Animation.BOUNCE); 
        this.styleIcon.color = "00ff00"; 
        this.styleIcon.text = "it does not change :("; 
       }); 

       styloo = new StyledIcon(StyledIconTypes.BUBBLE,{color:"#95AA7B",text:"click me!",fore:"#ffffff"}); 
       var marker4 = new StyledMarker({styleIcon: styloo,position:new google.maps.LatLng(37.2, -121.88),map:map}); 
       var marker5 = new StyledMarker({styleIcon: styloo,position:new google.maps.LatLng(37.1, -121.88),map:map}); 
       google.maps.event.addDomListener(marker4,"click", function(o){ 
        this.setAnimation(google.maps.Animation.BOUNCE); 
        styloo.set("fore","#ffffff");//test color 
        styloo.set("color","#C2554D");// background color 
        styloo.set("text","color changed"); 
       }); 

      } 
     </script> 

    </head> 
    <body style="margin:0px; padding:0px;" onload="initialize()"> 
     <div id="map_canvas" style="width: 600px; height: 600px;"></div> 
    </body>

出典

2012-02-08 lito

StyledMarker例1として、あなたはこのように、set(property, value)メソッドを使用する必要があります。

あなたのケースでは

styleIcon.set("text","Elevation: " + results[0].elevation + "m");

が、これにマウスオーバーハンドラーを変更：については

this.styleIcon.set('color', '00ff00'); 
this.styleIcon.set('text', 'it does not change :(');

もう1つの問題は、両方が一度に変更される場合は、StyledMarkerごとにStyledIconを作成する必要があります。私はたびに新しいアイコンを返す関数を追加するだけです。

function createStyle() { return new StyledIcon(StyledIconTypes.BUBBLE,{color:"#95AA7B",text:"click me!",fore:"#ffffff"}); } 

var marker4 = new StyledMarker({styleIcon: createStyle(),position:new google.maps.LatLng(37.2, -121.88),map:map}); 
var marker5 = new StyledMarker({styleIcon: createStyle(),position:new google.maps.LatLng(37.1, -121.88),map:map}); 

google.maps.event.addDomListener(marker4,"click", function(o){ 
    this.setAnimation(google.maps.Animation.BOUNCE); 
    this.styleIcon.set("fore","#ffffff");//test color 
    this.styleIcon.set("color","#C2554D");// background color 
    this.styleIcon.set("text","color changed"); 
});

出典

2012-02-08 22:39:14

テスト済みです！ありがとう！私はこのウェブサイトを愛しています。このコミュニティの効率的な開発者の何人か – lito

Broady、 "mouseout"のときにどうしたら最初の状態に戻ってきますか？ – lito

ええと、2つの異なる州の間を切り替えるだけの場合は、おそらく2つの異なるstyleIconを作成し、それらの間で交互に切り替えることになります。 –

Googleマップ：マウスオーバー時にマーカーを効率的に変更する方法

答えて

関連する問題