Question

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

我已经尝试添加了mouseover事件的监听器，但这似乎没有做任何事情。

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

我是否想要做不可能的事？

Answer 1

FusionTablesLayers不支持鼠标悬停事件，只支持单击事件。（见this enhancement request）

有一些实现可以从FusionTables文档中添加鼠标悬停支持（fusiontips）和this example。

代码段（文档中的示例）：

      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>

将鼠标悬停在Google地图中的FusionTablesLayer上

1 个答案: