jquery - 如何从下拉列表或链接访问谷歌地图多边形

Question

我用它们的名字创建了一些多边形和一个 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
   })
}

Answer 1

非常复杂的例子

关键：

• 允许从全局上下文访问的多边形数组。

在侧边栏 HTML 中使用类似的内容（数组中的每个多边形一个）。当用户将鼠标悬停在元素上时，它会修改多边形的属性，将属性放回鼠标移出：

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);
  });
}