2015-11-19 58 views
0

我想國家的座標(緯度,經度)在一個國家 我與谷歌的融合表試圖 https://www.google.com/fusiontables/DataSource?dsrcid=420419#rows:id=1 但是當我嘗試獲取數據結果不正確融合表值不正確返回

代碼,我想是在這裏:

var map = null; 
 
var infoWindow = null; 
 
var geoXml = null; 
 
var geoXmlDoc = null; 
 
var myLatLng = null; 
 
var myOptions = null; 
 
var mapCenter = null; 
 
var geocodeTheCountry = true; 
 
var gpolygons = []; 
 

 
// Fusion Table data ID 
 
var FT_TableID = "19lLpgsKdJRHL2O4fNmJ406ri9JtpIIk8a-AchA"; // 420419; 
 
//var CountryName = "Saudi Arabia"; 
 
var CountryName = "India"; 
 
google.load('visualization', '1', { 
 
    'packages': ['corechart', 'table', 'geomap'] 
 
}); 
 

 
function createSidebar() { 
 
    // set the query using the parameters 
 
    var FT_Query2 = "SELECT 'name_0', 'name_1', 'kml_4326','json_4326' FROM " + FT_TableID + " WHERE name_0 = '" + CountryName + "' ORDER by 'name_1'"; 
 
    var queryText = encodeURIComponent(FT_Query2); 
 
    // alert("createSidebar query="+FT_Query2); 
 
    var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText); 
 

 
    //set the callback function 
 
    query.send(getData); 
 
} 
 

 
// Set a callback to run when the Google Visualization API is loaded. 
 
google.setOnLoadCallback(createSidebar); 
 

 
var FTresponse = null; 
 

 
myLatLng = new google.maps.LatLng(37.422104808, -122.0838851); 
 
// these set the initial center, zoom and maptype for the map 
 
// if it is not specified in the query string 
 
var lat = 37.422104808; 
 
var lng = -122.0838851; 
 
var zoom = 18; 
 
var maptype = google.maps.MapTypeId.ROADMAP; 
 
if (!isNaN(lat) && !isNaN(lng)) { 
 
    myLatLng = new google.maps.LatLng(lat, lng); 
 
} 
 
infoWindow = new google.maps.InfoWindow(); 
 
//define callback function, this is called when the results are returned 
 
function getData(response) { 
 
    if (!response) { 
 
     alert('no response'); 
 
     return; 
 
    } 
 
    if (response.isError()) { 
 
     alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); 
 
     return; 
 
    } 
 
    FTresponse = response; 
 
    //for more information on the response object, see the documentation 
 
    //http://code.google.com/apis/visualization/documentation/reference.html#QueryResponse 
 
    numRows = response.getDataTable().getNumberOfRows(); 
 
    numCols = response.getDataTable().getNumberOfColumns(); 
 

 
    fusiontabledata = "<table>"; 
 
    fusiontabledata += "<th>Region</th>"; 
 
    //fusiontabledata += "<th>" + response.getDataTable().getColumnLabel(1) + "</th>"; 
 
    // } 
 
    fusiontabledata += "<tr></tr><tr>"; 
 

 
    for (i = 0; i < numRows; i++) { 
 
     
 
     fusiontabledata += "<td><div onclick='javascript:myFTclick(" + i + ");getGeocodeList(" + response.getDataTable().getValue(i, 4) + ")'>" + response.getDataTable().getValue(i, 1) + "</div></td>"; 
 
     // } 
 
     fusiontabledata += "</tr><tr>"; 
 
    } 
 
    fusiontabledata += "</table>"; 
 
    //display the results on the page 
 
    document.getElementById('sidebar').innerHTML = fusiontabledata; 
 
} 
 

 
function infoWindowContent(name, description) { 
 
    content = '<div><h3>' + name + 
 
      '</h3><div>' + description + '</div></div>'; 
 
    return content; 
 
} 
 

 
function myFTclick(row) { 
 
    var description = FTresponse.getDataTable().getValue(row, 0); 
 
    var name = FTresponse.getDataTable().getValue(row, 1); 
 
    if (!gpolygons[row]) { 
 
     var kml = FTresponse.getDataTable().getValue(row, 2); 
 
     // create a geoXml3 parser for the click handlers 
 
     var geoXml = new geoXML3.parser({ 
 
      map: map, 
 
      zoom: false, 
 
      infoWindow: infoWindow, 
 
      singleInfoWindow: true 
 
     }); 
 

 
     geoXml.parseKmlString("<Placemark>" + kml + "</Placemark>"); 
 
     geoXml.docs[0].gpolygons[0].setMap(null); 
 
     gpolygons[row] = geoXml.docs[0].gpolygons[0].bounds.getCenter(); 
 
    } 
 
    var position = gpolygons[row]; 
 
    if (!infoWindow) 
 
     infoWindow = new google.maps.InfoWindow({}); 
 
    infoWindow.setOptions({ 
 
     content: infoWindowContent(name, description), 
 
     pixelOffset: new google.maps.Size(0, 2), 
 
     position: position 
 
    }); 
 
    infoWindow.open(map); 
 
} 
 

 
function getGeocodeList(row) { 
 
    alert(row.coordinates); 
 
} 
 

 
function initialize() { 
 
    myOptions = { 
 
     zoom: zoom, 
 
     center: myLatLng, 
 
     mapTypeId: maptype 
 
    }; 
 

 
    map = new google.maps.Map(document.getElementById("map_canvas"), 
 
      myOptions); 
 

 
    var geocoder = new google.maps.Geocoder(); 
 
    if (geocoder && geocodeTheCountry) { 
 
     geocoder.geocode({ 
 
      'address': CountryName + " Country" 
 
     }, function (results, status) { 
 
      if (status == google.maps.GeocoderStatus.OK) { 
 
       if (status != google.maps.GeocoderStatus.ZERO_RESULTS) { 
 
        map.setCenter(results[0].geometry.location); 
 
        map.fitBounds(results[0].geometry.viewport); 
 
       } else { 
 
        alert("No results found"); 
 
       } 
 
      } else { 
 
       alert("Geocode was not successful for the following reason: " + status); 
 
      } 
 
     }); 
 
    } 
 

 
    var FT_Query = "SELECT 'kml_4326' FROM " + FT_TableID + " WHERE 'name_0' = '" + CountryName + "';"; 
 
    var FT_Options = { 
 
     suppressInfoWindows: true, 
 
     query: { 
 
      from: FT_TableID, 
 
      select: 'kml_4326', 
 
      where: "'name_0' = '" + CountryName + "';" 
 
     }, 
 
     styles: [{ 
 
       polygonOptions: { 
 
        fillColor: "green", 
 
        fillOpacity: 0.05 
 
       } 
 
      }] 
 
    }; 
 
    layer = new google.maps.FusionTablesLayer(FT_Options); 
 
    layer.setMap(map); 
 

 
    google.maps.event.addListener(layer, "click", function (event) { 
 
     infoWindow.close(); 
 
     infoWindow.setContent(infoWindowContent(event.row.name_1.value, event.row.name_0.value)); 
 
     infoWindow.setPosition(event.latLng); 
 
     infoWindow.open(map); 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);

的getGeocodeList功能VA內列出的代碼不正確

+0

我得到一個JavaScript錯誤與您的代碼:'未捕獲的錯誤:無效的列索引4.應該是範圍[0-3]中的整數.' – geocodezip

回答

1

我的代碼得到一個javascript錯誤:Uncaught Error: Invalid column index 4. Should be an integer in the range [0-3].可視化查詢只有4個成員,0-3;你所要求的成員4.更改:

getGeocodeList(" + response.getDataTable().getValue(i, 4) + ")'>" 

到:

getGeocodeList(" + response.getDataTable().getValue(i, 3) + ")'>" 

working fiddle

代碼片段:

var map = null; 
 
var infoWindow = null; 
 
var geoXml = null; 
 
var geoXmlDoc = null; 
 
var myLatLng = null; 
 
var myOptions = null; 
 
var mapCenter = null; 
 
var geocodeTheCountry = true; 
 
var gpolygons = []; 
 

 
// Fusion Table data ID 
 
var FT_TableID = "19lLpgsKdJRHL2O4fNmJ406ri9JtpIIk8a-AchA"; // 420419; 
 
var CountryName = "India"; 
 
google.load('visualization', '1', { 
 
    'packages': ['corechart', 'table', 'geomap'] 
 
}); 
 

 
function createSidebar() { 
 
    // set the query using the parameters 
 
    var FT_Query2 = "SELECT 'name_0', 'name_1', 'kml_4326','json_4326' FROM " + FT_TableID + " WHERE name_0 = '" + CountryName + "' ORDER by 'name_1'"; 
 
    var queryText = encodeURIComponent(FT_Query2); 
 
    var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText); 
 
    //set the callback function 
 
    query.send(getData); 
 
} 
 

 
// Set a callback to run when the Google Visualization API is loaded. 
 
google.setOnLoadCallback(createSidebar); 
 

 
var FTresponse = null; 
 

 
myLatLng = new google.maps.LatLng(37.422104808, -122.0838851); 
 
// these set the initial center, zoom and maptype for the map 
 
// if it is not specified in the query string 
 
var lat = 37.422104808; 
 
var lng = -122.0838851; 
 
var zoom = 18; 
 
var maptype = google.maps.MapTypeId.ROADMAP; 
 
if (!isNaN(lat) && !isNaN(lng)) { 
 
    myLatLng = new google.maps.LatLng(lat, lng); 
 
} 
 
infoWindow = new google.maps.InfoWindow(); 
 
//define callback function, this is called when the results are returned 
 
function getData(response) { 
 
    if (!response) { 
 
    alert('no response'); 
 
    return; 
 
    } 
 
    if (response.isError()) { 
 
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); 
 
    return; 
 
    } 
 
    FTresponse = response; 
 
    //for more information on the response object, see the documentation 
 
    //http://code.google.com/apis/visualization/documentation/reference.html#QueryResponse 
 
    numRows = response.getDataTable().getNumberOfRows(); 
 
    numCols = response.getDataTable().getNumberOfColumns(); 
 

 
    fusiontabledata = "<table>"; 
 
    fusiontabledata += "<th>Region</th>"; 
 
    fusiontabledata += "<tr></tr><tr>"; 
 

 
    for (i = 0; i < numRows; i++) { 
 
    fusiontabledata += "<td><div onclick='javascript:myFTclick(" + i + "); getGeocodeList(" + response.getDataTable().getValue(i, 3) + ")'>" + response.getDataTable().getValue(i, 1) + "</div></td>"; 
 
    fusiontabledata += "</tr><tr>"; 
 
    } 
 
    fusiontabledata += "</table>"; 
 
    //display the results on the page 
 
    document.getElementById('sidebar').innerHTML = fusiontabledata; 
 
} 
 

 
function infoWindowContent(name, description) { 
 
    content = '<div><h3>' + name + 
 
    '</h3><div>' + description + '</div></div>'; 
 
    return content; 
 
} 
 

 
function myFTclick(row) { 
 
    var description = FTresponse.getDataTable().getValue(row, 0); 
 
    var name = FTresponse.getDataTable().getValue(row, 1); 
 
    if (!gpolygons[row]) { 
 
    var kml = FTresponse.getDataTable().getValue(row, 2); 
 
    // create a geoXml3 parser for the click handlers 
 
    var geoXml = new geoXML3.parser({ 
 
     map: map, 
 
     zoom: false, 
 
     infoWindow: infoWindow, 
 
     singleInfoWindow: true 
 
    }); 
 

 
    geoXml.parseKmlString("<Placemark>" + kml + "</Placemark>"); 
 
    geoXml.docs[0].gpolygons[0].setMap(null); 
 
    gpolygons[row] = geoXml.docs[0].gpolygons[0].bounds.getCenter(); 
 
    } 
 
    var position = gpolygons[row]; 
 
    if (!infoWindow) 
 
    infoWindow = new google.maps.InfoWindow({}); 
 
    infoWindow.setOptions({ 
 
    content: infoWindowContent(name, description), 
 
    pixelOffset: new google.maps.Size(0, 2), 
 
    position: position 
 
    }); 
 
    infoWindow.open(map); 
 
} 
 

 
function getGeocodeList(row) { 
 
    document.getElementById('info').innerHTML = row.coordinates; 
 
} 
 

 
function initialize() { 
 
    myOptions = { 
 
    zoom: zoom, 
 
    center: myLatLng, 
 
    mapTypeId: maptype 
 
    }; 
 

 
    map = new google.maps.Map(document.getElementById("map_canvas"), 
 
    myOptions); 
 

 
    var geocoder = new google.maps.Geocoder(); 
 
    if (geocoder && geocodeTheCountry) { 
 
    geocoder.geocode({ 
 
     'address': CountryName + " Country" 
 
    }, function(results, status) { 
 
     if (status == google.maps.GeocoderStatus.OK) { 
 
     if (status != google.maps.GeocoderStatus.ZERO_RESULTS) { 
 
      map.setCenter(results[0].geometry.location); 
 
      map.fitBounds(results[0].geometry.viewport); 
 
     } else { 
 
      alert("No results found"); 
 
     } 
 
     } else { 
 
     alert("Geocode was not successful for the following reason: " + status); 
 
     } 
 
    }); 
 
    } 
 

 
    var FT_Query = "SELECT 'kml_4326' FROM " + FT_TableID + " WHERE 'name_0' = '" + CountryName + "';"; 
 
    var FT_Options = { 
 
    suppressInfoWindows: true, 
 
    query: { 
 
     from: FT_TableID, 
 
     select: 'kml_4326', 
 
     where: "'name_0' = '" + CountryName + "';" 
 
    }, 
 
    styles: [{ 
 
     polygonOptions: { 
 
     fillColor: "green", 
 
     fillOpacity: 0.05 
 
     } 
 
    }] 
 
    }; 
 
    layer = new google.maps.FusionTablesLayer(FT_Options); 
 
    layer.setMap(map); 
 

 
    google.maps.event.addListener(layer, "click", function(event) { 
 
    infoWindow.close(); 
 
    infoWindow.setContent(infoWindowContent(event.row.name_1.value, event.row.name_0.value)); 
 
    infoWindow.setPosition(event.latLng); 
 
    infoWindow.open(map); 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);
html, 
 
body, 
 
{ 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
} 
 
#map_canvas { 
 
    height: 500px; 
 
    width: 400px; 
 
    float: left; 
 
} 
 
#sidebar { 
 
    float: right; 
 
    width: 200px; 
 
}
<script src="https://www.google.com/jsapi"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script src="https://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script> 
 
<div id="map_canvas"></div> 
 
<div id="sidebar"></div> 
 
<div id="info"></div>

+0

問題是經度和緯度中的負值沒有得到結果 –

+0

https://www.google.com/fusiontables/DataSource?dsrcid=420419#rows:id=1結果與表中的結果不一致 –

+0

指向任何你想要的表,我只是基於我的代碼示例你提供。 – geocodezip