【发布时间】：2015-01-09 13:06:31
【问题描述】：
我正在从事一个涉及使用 google map API 创建地图的项目。 这是一张法国及其地区的地图。我创建了一个融合表，您可以看到here。 我在我的测试站点上实现了这张地图，但我有一个问题，我想在区域上创建一个悬停效果，为此我需要将 pylygons 存储在一个变量中以使用它：
google.maps.event.addListener(country, 'mouseover', function() {
this.setOptions({fillOpacity: 1});
});
google.maps.event.addListener(country, 'mouseout', function() {
this.setOptions({fillOpacity: 0.3});
});
正如 google API 文档here 在此示例代码中所建议的那样，您可以这样做，但我不明白如何在此代码中实现我的融合表。 据我了解
var query = 'SELECT name, kml_4326 FROM ' +
'1foc3xO9DyfSIF6ofvN0kp2bxSfSeKog5FbdWdQ';
kml_4326 是融合表的名称，1foc3xO9DyfSIF6ofvN0kp2bxSfSeKog5FbdWdQ 是我的表融合 ID，但我不明白的是：
url.push('&key=AIzaSyAm9yWCV7JPCTHCJut8whOjARd7pwROFDQ');
最后也是var geometries = rows[i][1]['geometries'];，其中['geometries'] 是包含每个区域坐标的列，在我的例子中是“几何”。
这是我当前的代码：
<html>
<head>
<title></title>
<style>
#map-canvas{width: 800px; height:600px;}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialise() {
/*Markers coordinates*/
var center = new google.maps.LatLng(46.9,1.8);
/*end markers coordinates*/
//var myLatlng = new google.maps.LatLng(47.456751,-0.488409); // Add the coordinates
var mapOptions = {
zoom: 6, // The initial zoom level when your map loads (0-20)
minZoom: 5, // Minimum zoom level allowed (0-20)
maxZoom: 8, // Maximum soom level allowed (0-20)
zoomControl:true, // Set to true if using zoomControlOptions below, or false to remove all zoom controls.
zoomControlOptions: {
style:google.maps.ZoomControlStyle.DEFAULT // Change to SMALL to force just the + and - buttons.
},
center: center, // Centre the Map to our coordinates variable
//mapTypeId: google.maps.MapTypeId.ROADMAP, // Set the type of Map
scrollwheel: false, // Disable Mouse Scroll zooming (Essential for responsive sites!)
// All of the below are set to true by default, so simply remove if set to true:
panControl:false, // Set to false to disable
mapTypeControl:false, // Disable Map/Satellite switch
scaleControl:false, // Set to false to hide scale
streetViewControl:false, // Set to disable to hide street view
overviewMapControl:false, // Set to false to remove overview control
rotateControl:false // Set to false to disable rotate control
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var infowindow = new google.maps.InfoWindow({disableAutoPan: true});
var location = {};
/*hide world*/
var style = [{
featureType: 'all',
elementType: 'all',
stylers: [
{ "visibility": "simplified" },
{ "color": "#f2f2f2" }
]
},];
var styledMapType = new google.maps.StyledMapType(style, {
map: map,
name: 'Styled Map'
});
map.mapTypes.set('map-style', styledMapType);
map.setMapTypeId('map-style');
/*end hide world*/
layer_0 = new google.maps.FusionTablesLayer({
query: {
select: "geometry",
from: "1i9RSWkvXnjhKWploEY2pqr0q5eahLE4g9y5Egi84"
},
styles: [{
polygonOptions: {
fillOpacity: '0.7',
}
}],
options : {suppressInfoWindows:true},/*disable info window*/
clickable:false,/*disable click*/
map: map,
styleId: 2,
templateId: 2,
});
//Set event for layer
google.maps.event.addListener(layer_0, 'mouseover', function(e) {
console.log('ok');
});
google.maps.event.addDomListener(window, 'resize', function() { map.setCenter(center); }); // Keeps the Pin Central when resizing the browser on responsive sites
}
google.maps.event.addDomListener(window, 'load', initialise); // Execute our 'initialise' function once the page has loaded.
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
编辑 12/01/2014 ：我在图层上添加了 mouseover 事件，但它仍然不起作用
如果有人对此事有见解，我真的很感激任何帮助:)
【问题讨论】：
-
你在用你的表实现这个例子时遇到了什么问题？你能发布你的代码版本吗？
-
我编辑了我的代码，按照 Hai Nguyen 的建议，我在图层上添加了一个可以为我工作的事件，但什么也没发生。