谷歌地图 v3 API 鼠标悬停与多边形。不工作答案

【问题标题】：google maps v3 API mouseover with polygons. Not working谷歌地图 v3 API 鼠标悬停与多边形。不工作
【发布时间】：2011-05-01 21:47:11
【问题描述】：

我试图让鼠标悬停在谷歌地图 api v3 中工作多边形。我已经尝试过这篇文章中提供的答案： google maps v3 API mouseover with polygons?

这个答案应该有效，但它不适合我。谁能发现我辐条上的棍子？

这是我的代码：

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<style type="text/css"> 
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style> 
<title>Google Maps</title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript">
function initialize() {

    var myLatlng = new google.maps.LatLng(28, -81);
    var myOptions = {
        zoom: 6,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.HYBRID
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var coords = "-81.182206004858,24.1854100227356 -81.0702140033245,24.7389860153198 -80.8464170098305,25.8438450098038 -80.6222470104694,26.9482280015945 -80.3975859880447,28.0521240234375 -80.1723110079765,29.1555219888687 -80.7749719917774,29.21175801754 -80.9939419925213,28.1075259447098 -81.212574005127,27.0034509897232 -81.4309749901295,25.8995419740677 -81.6492510139942,24.7958129644394 -81.7585659921169,24.243047952652 -81.182206004858,24.1854100227356";


    coords = coords.split(" ");
    var path = [];

    for (var i = 0; i < coords.length; i++) {
        var coord = coords[i].split(",");
        path.push(new google.maps.LatLng(coord[1], coord[0]));
    }

    //polygon options
    var options = {
        clickable: false,
        fillColor: '#FFF',
        fillOpacity: 0,
        geodesic: true,
        map: map,
        paths: new google.maps.MVCArray(path),
        strokeColor: '#FFF',
        strokeOpacity: 1,
        strokeWeight: 1,
        zIndex: 99
    }

    var polygon = new google.maps.Polygon(options);

    var listener = google.maps.event.addListener(polygon, "mouseover", function () { this.setOptions({ strokeColor: '#000' }); });

 }
</script> 
</head> 
<body onload="initialize()"> 
  <div id="map_canvas"></div> 
</body> 
</html>

【问题讨论】：

标签： javascript google-maps gis google-maps-api-3 polygon

【解决方案1】：

好的，我想通了。非常简单，但不是很直观。

您需要在多边形选项中设置“clickable:true”。

文档中关于 clickable 属性的内容如下： “指示此 Polygon 是否处理点击事件。默认为 true。”

它应该说：“这个 Polygon 是否处理 (ANY) 事件。” （例如鼠标悬停）。

Google 文档失败！

【讨论】：