我正在使用以下示例，以便能够在Fusion表中使用（false）鼠标悬停事件。实际上它正在工作。但是，click事件无法正常工作（它位于drawMap函数内）
问题出现在以下代码行中：
infowindow.setContent(rows[i][7]);
我希望在点击每个多边形时检索名为“Nome_Reg”（索引7）的第8列的信息。
每个多边形对此列都有不同的属性。但是，我这样做的方式只返回最后绘制多边形的信息，而不是单独返回多边形。
你有提示为什么它不起作用？
<!DOCTYPE html>
<html>
<head>
<title>Regions</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
#info-box {
background-color: white;
border: 1px solid black;
bottom: 30px;
height: 20px;
padding: 10px;
position: absolute;
left: 30px;
}
</style>
<!-- loading Jquery file -->
<script src="https://dl.dropboxusercontent.com/u/39041929/site/MapaTravessia/Includes/jquery-1.12.3.min.js"></script>
<script>
//Loading JQuery
$(document).ready(function(){
var map;
var infowindow;
var Regions;
});
function initMap() {
map = new google.maps.Map(document.getElementById('map'), { zoom: 10, center: {lat: -18.92990560776172 , lng: -43.4406814550781},});
infowindow = new google.maps.InfoWindow({maxWidth: 300});
// Initialize JSONP request
var script = document.createElement('script');
var url = ['https://www.googleapis.com/fusiontables/v2/query?'];
url.push('sql=');
var query = 'SELECT * FROM ' +
'16lyNB62unqHuH3fh94lHGDrGEwQVTztRIzm_DWsf';
var encodedQuery = encodeURIComponent(query);
url.push(encodedQuery);
url.push('&callback=drawMap'); //Calls the drawMap function
url.push('&key=AIzaSyCoC9A3WgFneccRufbysInygnWrhCie-T0');
script.src = url.join('');
var body = document.getElementsByTagName('body')[0];
body.appendChild(script);
}
function drawMap(data) {
console.log(data);
var rows = data['rows'];
for (var i in rows) {
var newCoordinates = [];
var geometries = data['rows'][i][0]['geometries'];
if (geometries) {
for (var j in geometries) {
newCoordinates.push(constructNewCoordinates(geometries[j]));
}
} else {
newCoordinates = constructNewCoordinates(rows[i][0]['geometry']);
}
var colors = ['#AF4604', '#AF8A04', '#037158'];
var ColorReceived;
if (rows[i][5] == 'CMD') ColorReceived = 0;
if (rows[i][5] == 'AM') ColorReceived = 1;
if (rows[i][5] == 'DJ') ColorReceived = 2;
Regions = new google.maps.Polygon({
paths: newCoordinates,
strokeColor: colors[ColorReceived],
strokeOpacity: 1,
strokeWeight: 1,
fillColor: colors[ColorReceived],
fillOpacity: 0.5
});
//Working Mouseover event
google.maps.event.addListener(Regions, 'mouseover', function() {
this.setOptions({strokeWeight: 3});
});
//Working Mouseout event
google.maps.event.addListener(Regions, 'mouseout', function() {
this.setOptions({strokeWeight: 1});
});
//NOT WORKING CLICK EVENT
google.maps.event.addListener(Regions, 'click', function (event) {
infowindow.setPosition(event.latLng);
infowindow.setContent(rows[i][7]);
infowindow.open(map);
});
Regions.setMap(map);
}
}
//access the lat and long for each node and return a array containing those values, extracted from fusion table.
function constructNewCoordinates(polygon) {
var newCoordinates = [];
var coordinates = polygon['coordinates'][0];
for (var i in coordinates) {
newCoordinates.push(
// write the lat and long respectively
new google.maps.LatLng(coordinates[i][1], coordinates[i][0]));
}
return newCoordinates;
}
</script>
</head>
<body>
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBFYwb6-B6u2cs5oknTRwtfBng2kgdDMgk&callback=initMap">
</script>
</body>
</html>
答案 0 :(得分：0)
您将click - 侦听器添加到Polygon，而不是添加到FusionTablesLayer（只有event.row可用）。
可能的解决方案：
在循环中创建Polygon属性，您可以在其中存储特定行并在单击处理程序中访问此属性
//Loading JQuery
$(document).ready(function(){
var map;
var infowindow;
var Regions;
});
function initMap() {
map = new google.maps.Map(document.getElementById('map'), { zoom: 9, center: {lat: -18.92990560776172 , lng: -43.4406814550781},});
infowindow = new google.maps.InfoWindow({maxWidth: 300});
// Initialize JSONP request
var script = document.createElement('script');
var url = ['https://www.googleapis.com/fusiontables/v2/query?'];
url.push('sql=');
var query = 'SELECT * FROM ' +
'16lyNB62unqHuH3fh94lHGDrGEwQVTztRIzm_DWsf';
var encodedQuery = encodeURIComponent(query);
url.push(encodedQuery);
url.push('&callback=drawMap'); //Calls the drawMap function
url.push('&key=AIzaSyCoC9A3WgFneccRufbysInygnWrhCie-T0');
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) {
var newCoordinates = [];
var geometries = data['rows'][i][0]['geometries'];
if (geometries) {
for (var j in geometries) {
newCoordinates.push(constructNewCoordinates(geometries[j]));
}
} else {
newCoordinates = constructNewCoordinates(rows[i][0]['geometry']);
}
var colors = ['#AF4604', '#AF8A04', '#037158'];
var ColorReceived;
if (rows[i][5] == 'CMD') ColorReceived = 0;
if (rows[i][5] == 'AM') ColorReceived = 1;
if (rows[i][5] == 'DJ') ColorReceived = 2;
Regions = new google.maps.Polygon({
paths: newCoordinates,
strokeColor: colors[ColorReceived],
strokeOpacity: 1,
strokeWeight: 1,
fillColor: colors[ColorReceived],
fillOpacity: 0.5,
row: (function(index){
var row={};
for(var j=0;j<data['rows'][index].length;++j){
row[data.columns[j]]=data['rows'][index][j];
}
return row;
})(i)
});
//Working Mouseover event
google.maps.event.addListener(Regions, 'mouseover', function() {
this.setOptions({strokeWeight: 3});
});
//Working Mouseout event
google.maps.event.addListener(Regions, 'mouseout', function() {
this.setOptions({strokeWeight: 1});
});
// Working click event
google.maps.event.addListener(Regions, 'click', function (event) {
var Content = this.row['Nome_Reg'];
infowindow.setPosition(event.latLng);
infowindow.setContent(Content);
infowindow.open(map);
});
Regions.setMap(map);
}
}
//access the lat and long for each node and return a array containing those values, extracted from fusion table.
function constructNewCoordinates(polygon) {
var newCoordinates = [];
var coordinates = polygon['coordinates'][0];
for (var i in coordinates) {
newCoordinates.push(
// write the lat and long respectively
new google.maps.LatLng(coordinates[i][1], coordinates[i][0]));
}
return newCoordinates;
}html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
#info-box {
background-color: white;
border: 1px solid black;
bottom: 30px;
height: 20px;
padding: 10px;
position: absolute;
left: 30px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>