0

我的谷歌地图上有一个 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');
});

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

4

1 回答 1

1

FusionTablesLayers 不支持 mouseover 事件，只支持 click 事件。（请参阅此增强请求）

有一些实现添加了鼠标悬停支持（fusiontips）和FusionTables 文档中的这个示例。

代码片段（来自文档的示例）：

      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>

于 2013-08-26T17:50:47.157 回答