悬停在Google地图上的FusionTablesLayer中

我在我的谷歌地图上有一个FusionTablesLayer，它效果很好，但现在我必须添加一个悬停在它上面，我可以确定它是否可能。我已经看到了在不同多边形上悬停的示例，但我无法使用它。悬停在Google地图上的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'); 
});

我想要做不可能的事情吗？

来源

2013-08-26 Mark

看为[fusiontips]的代码（http://code.google.com/p/gmaps-utility-gis/source/browse/trunk/fusiontips /），它会在鼠标悬停上显示一个工具提示。不幸的是，这些例子似乎不再适用。 [本示例]（https://developers.google.com/fusiontables/docs/samples/mouseover_map_styles）来自FusionTables文档虽然（它仍然有效）可能会对您有所帮助。 – geocodezip

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>

来源

2013-08-26 17:50:47 geocodezip

悬停在Google地图上的FusionTablesLayer中

回答

相关问题