0

いくつかのポリゴンとその名前のHTMLリストを作成しました。リスト内の名前の上にマウスを置いたときに、ポリゴンの不透明度を変更したいと思います。

...
<li><a href="#" data-poly="polyID" class="hoverPoly">City</a></a>
...
$('.hoverPoly').live('onmouseover',function(){
    var polyName = $(this).attr('data-poly');
    // var gmap is reference to google map
    // I want find polygon with polyName
})

として設定されたポリゴン

function initialize(){
...
   var poly_444555 = new google.maps.Polygon({
       ...
       name:'polyID', // this is id for external access
   })
}
4

1 に答える 1

0

非常に複雑な例

キーポイント：

  • グローバルコンテキストからのアクセスを可能にするポリゴンの配列。

サイドバーのHTMLでこのようなものを使用します（配列内のポリゴンごとに1つ）。ユーザーが要素の上にマウスを置くと、ポリゴンのプロパティが変更され、プロパティがマウスアウトに戻ります。

sidebarHtml += '<tr id="row'+i+'"><td onmouseover="kmlHighlightPoly('+i+');" onmouseout="kmlUnHighlightPoly('+i+');"><a href="javascript:kmlPlClick('+i+');">'+name+'</a> - <a href="javascript:kmlShowPlacemark('+i+');">show</a></td></tr>';

kmlHighlightPolyメソッドは現在、ポリゴンの色を変更しますが、不透明度も同じように簡単に変更できます。

function highlightPoly(poly, polynum) {
  google.maps.event.addListener(poly,"mouseover",function() {
    var rowElem = document.getElementById('row'+polynum);
    if (rowElem) rowElem.style.backgroundColor = "#FFFA5E";
    poly.setOptions(highlightOptions);
  });
  google.maps.event.addListener(poly,"mouseout",function() {
    var rowElem = document.getElementById('row'+polynum);
    if (rowElem) rowElem.style.backgroundColor = "#FFFFFF";
    poly.setOptions(poly.normalStyle);
  });
}
于 2012-12-07T07:26:23.940 に答える