将鼠标悬停在谷歌地图中的 FusionTablesLayer 上答案

【问题标题】：Hover on FusionTablesLayer in google maps将鼠标悬停在谷歌地图中的 FusionTablesLayer 上
【发布时间】：2013-08-26 15:45:17
【问题描述】：

我的谷歌地图上有一个 FusionTablesLayer，它工作得很好，但现在我必须给它添加一个悬停，我可以确定它是否可能。我见过悬停在不同多边形上的示例，但我不能使用它。

我的图层：

layer = new google.maps.FusionTablesLayer({
    map: map,
    suppressInfoWindows: true,
    heatmap: { enabled: false },
    query: {
        select: "col0",
        from: key,
        where: CreateQuery(shownMunicipalities)
    },
    styles: [{
        polygonOptions: {
            fillColor: '#eeeeee',
            fillOpacity: 0.5,
            strokeColor: '#000000',
            strokeOpacity: 0.2,
            strokeWeight: 2
        }
    }, {
        where: CreateQuery(activeMunicipalities),
        polygonOptions: {
            fillColor: '#00FF00',
            fillOpacity: 0.3
        }
    }],
    options: {
        styleId: 2,
        templateId: 2
    }
});

我尝试添加鼠标悬停事件的侦听器，但这似乎没有任何作用。

google.maps.event.addListener(layer, 'mouseover', function (event) {
    alert('hover');
});

我是在尝试做不可能的事吗？

【问题讨论】：

查看fusiontips 的代码，它在鼠标悬停时显示一个工具提示。不幸的是，这些例子似乎不再起作用了。不过，FusionTables 文档中的This example 可能会对您有所帮助（它仍然有效）。

标签： google-maps google-maps-api-3 google-fusion-tables

【解决方案1】：

FusionTablesLayers 不支持 mouseover 事件，仅支持 click 事件。（见this enhancement request）

FusionTables 文档中的一些实现添加了鼠标悬停支持 (fusiontips) 和 this example。

代码 sn-p（来自文档的示例）：

      var colors = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00'];
      var map;

      function initialize() {
        var myOptions = {
          zoom: 2,
          center: new google.maps.LatLng(10, 0),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(document.getElementById('map-canvas'),
          myOptions);

        // Initialize JSONP request
        var script = document.createElement('script');
        var url = ['https://www.googleapis.com/fusiontables/v1/query?'];
        url.push('sql=');
        var query = 'SELECT name, kml_4326 FROM ' +
          '1foc3xO9DyfSIF6ofvN0kp2bxSfSeKog5FbdWdQ';
        var encodedQuery = encodeURIComponent(query);
        url.push(encodedQuery);
        url.push('&callback=drawMap');
        url.push('&key=AIzaSyAm9yWCV7JPCTHCJut8whOjARd7pwROFDQ');
        script.src = url.join('');
        var body = document.getElementsByTagName('body')[0];
        body.appendChild(script);
      }

      function drawMap(data) {
        var rows = data['rows'];
        for (var i in rows) {
          if (rows[i][0] != 'Antarctica') {
            var newCoordinates = [];
            var geometries = rows[i][1]['geometries'];
            if (geometries) {
              for (var j in geometries) {
                newCoordinates.push(constructNewCoordinates(geometries[j]));
              }
            } else {
              newCoordinates = constructNewCoordinates(rows[i][1]['geometry']);
            }
            var randomnumber = Math.floor(Math.random() * 4);
            var country = new google.maps.Polygon({
              paths: newCoordinates,
              strokeColor: colors[randomnumber],
              strokeOpacity: 0,
              strokeWeight: 1,
              fillColor: colors[randomnumber],
              fillOpacity: 0.3
            });
            google.maps.event.addListener(country, 'mouseover', function() {
              this.setOptions({
                fillOpacity: 1
              });
            });
            google.maps.event.addListener(country, 'mouseout', function() {
              this.setOptions({
                fillOpacity: 0.3
              });
            });

            country.setMap(map);
          }
        }
      }

      function constructNewCoordinates(polygon) {
        var newCoordinates = [];
        var coordinates = polygon['coordinates'][0];
        for (var i in coordinates) {
          newCoordinates.push(
            new google.maps.LatLng(coordinates[i][1], coordinates[i][0]));
        }
        return newCoordinates;
      }

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

#map-canvas {
  height: 500px;
  width: 600px;
}

<script src="https://maps.google.com/maps/api/js"></script>
<div id="map-canvas"></div>

【讨论】：