0
Ich verwende das folgende Beispiel, um ein (falsches) Mouseover-Ereignis in Fusion-Tabellen verwenden zu können. Es funktioniert tatsächlich so wie es ist. Doch das Click-Ereignis funktioniert nicht wie Ich mag würde (es ist in der drawMap Funktion)Abrufen einzelner Polygoninformationen aus Google Fusion-Tabellen
Das Problem in der folgenden Codezeile auftritt:
infowindow.setContent(rows[i][7]);
Ich möchte die Informationen der Spalte 8 abrufen "Nome_Reg" (Index 7) für jedes Polygon, wenn darauf geklickt wird.
Jedes Polygon hat ein anderes Attribut für diese Spalte. Wie auch immer ich es mache, es gibt nur die Informationen für das letzte Polygon und nicht einzeln aus den Polygonen zurück.
Haben Sie einen Hinweis warum funktioniert es nicht?
<!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>