0
次の例を使用して、Fusionテーブルでマウスオーバーイベントを使用できます。それは実際には機能しています。しかし、私が好きなクリックイベントが動作しない（それはdrawMap関数内です）Google Fusion Tablesから個別にポリゴン情報を取得する
問題は、次のコード行で発生します。
infowindow.setContent(rows[i][7]);
私は列8の情報を取得したいですクリックするとポリゴンごとに「Nome_Reg」（インデックス7）と呼ばれます。
各ポリゴンは、この列に対して異なる属性を持ちます。しかし、私がやっているやり方は、最後に描画されたポリゴンの情報だけで、ポリゴンからは個別には戻されません。
なぜ機能していないのでしょうか？あなたがポリゴンに、ではないFusionTablesLayerにclick -listenerを追加
<!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>