0

我有改进代码的问题(我不知道这是否可以做到)。我根据 geocodezip 示例http://www.geocodezip.com/geoxml3_test//v3_FusionTables_CountryBrowser_encryptedID.html制作地图,现在我想当我单击侧边栏中的属性值(多边形名称)以在弹出窗口中获得结果时将显示地图(带有我之前在侧边栏中单击的多边形);就像在 JavaScript 窗口打开示例http://www.tizag.com/javascriptT/javascriptpopups.php一样。我没有对代码做任何事情,因为我不知道从哪里开始,我使用的代码如下。有没有人有什么建议。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>USA7</title>
<style type="text/css">
html, body, #map_canvas {
    width:   750px;
    height:  600px;
    margin:  0;
    padding: 0;
}
    .infowindow * {font-size: 90%; margin: 0}
.style1 {color: #FFFFFF}
</style>
<!--Load the AJAX API-->
<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
<script type="text/javascript" src="https://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script>

<!-- Initialize --> 
<script type="text/javascript"> 
// globals
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 = [];
var geocoder = null;

// Fusion Table data ID
var FT_TableID = '1GoqHJ9E9Ff_rfl_CLTGNlgXF3ssEaywN4_lVNUA'; // original '1-bZhRr6OMbj4NWZcY8XnVjpijvV97yNgSXSf_mE';
var CountryName = "USA"; // "United States of America";

  google.load('visualization', '1', {'packages':['corechart', 'table', 'geomap']});

function  createSidebar() {
  // set the query using the parameters
document.getElementById('sidebar').innerHTML = "querying for data";
var FT_Query2 = "SELECT 'STATEFP', 'name', 'geometry' FROM "+FT_TableID+" WHERE 'STATEFP' = '"+CountryName+"' ORDER by 'name'";
document.getElementById("FTquery2").innerHTML = FT_Query2; 
  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);

function getCountryNames() {
  // set the query using the parameters
var FT_Query_CountryName = "SELECT 'STATEFP', count() FROM "+FT_TableID+" GROUP by 'STATEFP' ORDER by 'STATEFP'";
document.getElementById("FTquery4").innerHTML = FT_Query_CountryName; 
  var queryText = encodeURIComponent(FT_Query_CountryName);
  var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq='  + queryText);

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

function createCountryDropdown(response) {
if (!response) {
  alert('no response');
  return;
}
if (response.isError()) {
  alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
  return;
} 
  //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();

  var countryNames = {};
  for (var i = 0; i < numRows; i++) {
    var countryName = response.getDataTable().getValue(i,0);
    // countryName = countryName.substring(0,countryName.indexOf('('));
    countryNames[countryName] = countryName;
  }
  var countryNameDropdown = "<select name='country_select' onchange='handleSelected(this)'>"
  countryNameDropdown += '<option selected> - Select a State by ID - <\/option>';
  for (countryName in countryNames) {
    countryNameDropdown += "<option value='"+countryName+"'>"+countryName+"</option>"
//    document.getElementById('country_list').innerHTML += countryName+"<br>";
  }
  countryNameDropdown += "</select>"
  document.getElementById('dropdown_menu').innerHTML = countryNameDropdown;
}

      // ======= This function handles selections from the select box ====
      function handleSelected(opt) {
        if (opt.selectedIndex > 0) {
          CountryName = geoXML3.nodeValue(opt[opt.selectedIndex]);
          DisplayCountry();
        } else { 
          alert("Please pick a country");
        }
      }

function DisplayCountry() {
      // geocode the country
      var addressStr = CountryName;
      if (addressStr != "Baikonur Cosmodrome") addressStr += " Country";
      geocoder.geocode( { 'address': addressStr}, 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);
        }
      });
   FT_Query = "SELECT 'geometry' FROM "+FT_TableID+" WHERE 'STATEFP' = '"+CountryName+"';";
   gpolygons = [];
   layer.setQuery({select:'geometry',from:FT_TableID,where:"'STATEFP' = '"+CountryName+"'"});
   document.getElementById("FTquery").innerHTML = FT_Query; 
   createSidebar();
}

</script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
 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 there are any parameters at eh end of the URL, they will be in  location.search
      // looking something like  "?marker=3"

      // skip the first character, we are not interested in the "?"
      var query = location.search.substring(1);

      // split the rest at each "&" character to give a list of  "argname=value"  pairs
      var pairs = query.split("&");
      for (var i=0; i<pairs.length; i++) {
        // break each pair at the first "=" to obtain the argname and value
    var pos = pairs[i].indexOf("=");
    var argname = pairs[i].substring(0,pos).toLowerCase();
    var value = pairs[i].substring(pos+1);
        if (argname == "country") {CountryName = unescape(value);}
    value = pairs[i].substring(pos+1).toLowerCase();

        // process each possible argname  -  use unescape() if theres any chance of spaces
    if (argname == "geocode") {geocodeTheCountry = (value != "false");}
        if (argname == "id") {id = unescape(value);}
        if (argname == "filename") {filename = unescape(value);}
        if (argname == "marker") {index = parseFloat(value);}
        if (argname == "lat") {lat = parseFloat(value);}
        if (argname == "lng") {lng = parseFloat(value);}
        if (argname == "zoom") {
      zoom = parseInt(value);
      myGeoXml3Zoom = false;
    }
        if (argname == "type") {
// from the v3 documentation 8/24/2010
// HYBRID This map type displays a transparent layer of major streets on satellite images. 
// ROADMAP This map type displays a normal street map. 
// SATELLITE This map type displays satellite images. 
// TERRAIN This map type displays maps with physical features such as terrain and vegetation. 
          if (value == "m") {maptype = google.maps.MapTypeId.ROADMAP;}
          if (value == "k") {maptype = google.maps.MapTypeId.SATELLITE;}
          if (value == "h") {maptype = google.maps.MapTypeId.HYBRID;}
          if (value == "t") {maptype = google.maps.MapTypeId.TERRAIN;}

        }
      }
      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();
  if (numRows <= 1) {
    document.getElementById('sidebar').innerHTML = "no data";
    return;
  }

  //concatenate the results into a string, you can build a table here
  fusiontabledata = "<table><tr>";
//  for(i = 0; i < numCols; i++) {
    fusiontabledata += "<th colspan='2'>" + response.getDataTable().getValue(1,0) + "</th>";
//   }
  fusiontabledata += "</tr><tr>";
  fusiontabledata += "<tr><td colspan='2' align='left'><a href='javascript:showAll();'>Display all polygons in selected State</a></td></tr>";
  for(i = 0; i < numRows; i++) {
//    for(j = 0; j < numCols; j++) {
   /*
   var kml =  response.getDataTable().getValue(i,2);
   geoXml.parseKmlString("<Placemark>"+kml+"</Placemark>");
   */    
      fusiontabledata += "<td><a href='javascript:myFTclick("+i+")'>"+response.getDataTable().getValue(i, 1) + "</a></td><td><a href='javascript:zoomTo("+i+")'>show</a></td>";
//    }
    fusiontabledata += "</tr><tr>";
  }
  fusiontabledata += "</table>"  
  //display the results on the page
  document.getElementById('sidebar').innerHTML = fusiontabledata;


}

function infoWindowContent(name, description, id) {
   content =   '<div class="FT_infowindow"><h3>' + name + 
               '</h3><div>' + description + '</div>';
   if (typeof id != "undefined") {
     content += '<a href="javascript:zoomTo('+id+');">zoom to</a>';
   }
   content += '</div>';
   return content;
}

function zoomTo(id) {
  loadRow(id);
  if (gpolygons[id] && gpolygons[id].bounds) {
    map.fitBounds(gpolygons[id].bounds);
    var queryStr = "SELECT 'geometry' FROM "+FT_TableID+" WHERE 'STATEFP' = '"+CountryName+"' AND 'name' = '"+gpolygons[id].name+"';"
    layer.setQuery({select:'geometry',from:FT_TableID,where:"'STATEFP' = '"+CountryName+"' AND 'name' = '"+gpolygons[id].name+"'"});    
    document.getElementById("FTquery3").innerHTML = queryStr; 
  }
}

function showAll() {
  layer.setQuery({select: 'geometry', from:FT_TableID, where:"'STATEFP' = '"+CountryName+"'"});
}

function loadRow(row) {
   if (!gpolygons[row]) {
     var name = FTresponse.getDataTable().getValue(row,1);
     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] = new Object();
     gpolygons[row].position = geoXml.docs[0].gpolygons[0].bounds.getCenter();
     gpolygons[row].bounds = geoXml.docs[0].gpolygons[0].bounds;
     gpolygons[row].name = name;
   }
}
function myFTclick(row) {
   var description = FTresponse.getDataTable().getValue(row,0);
   var name = FTresponse.getDataTable().getValue(row,1);
   loadRow(row);
   var position = gpolygons[row].position;

   // Set up and create the infowindow
   if (!infoWindow) infoWindow = new google.maps.InfoWindow({});
   infoWindow.setOptions({
      content: infoWindowContent(name, description, row),
      pixelOffset: new google.maps.Size(0, 2),
      position: position
    });
    // Infowindow-opening event handler
    infoWindow.open(map);
}

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

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

  google.maps.event.addListener(map, "click", function(event) {
    infoWindow.close();
    var FT_click_query="SELECT 'STATEFP' FROM "+FT_TableID+" WHERE ST_INTERSECTS('geometry',CIRCLE(LATLNG"+event.latLng+", 1));";
    // alert(event.latLng+"query="+FT_click_query);
    // set the query using the parameters
    var queryText = encodeURIComponent(FT_click_query);
    var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq='  + queryText);
document.getElementById("FTquery5").innerHTML = FT_click_query; 

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



  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 'geometry' FROM "+FT_TableID+" WHERE 'STATEFP' = '"+CountryName+"';";
var FT_Options = { suppressInfoWindows: true, query: {from:FT_TableID, select: "geometry", where: "'STATEFP' = '"+CountryName+"'"}};
// https://www.google.com/fusiontables/embedviz?q=select+col18+from+1-bZhRr6OMbj4NWZcY8XnVjpijvV97yNgSXSf_mE+where+col19+%3D+'USA'&viz=MAP&h=false&lat=34.56204535683132&lng=-86.65887199999997&t=1&z=9&l=col18&y=2&tmplt=2
document.getElementById("FTquery").innerHTML = FT_Query; 
  layer = new google.maps.FusionTablesLayer(/*FT_TableID, */ FT_Options);
  layer.setMap(map);

  google.maps.event.addListener(layer, "click", function(event) {
    infoWindow.close();
    infoWindow.setContent(infoWindowContent(event.row.name.value,event.row.STATEFP.value));
    infoWindow.setPosition(event.latLng);
    infoWindow.open(map);
  });

  getCountryNames();
}

  function getCountryFromClick(response) {
if (!response) {
  alert('no response');
  return;
}
if (response.isError()) {
  alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
  return;
} 
  //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();
  if (numRows <= 1) {
    return;
  }

  CountryName = response.getDataTable().getValue(1, 0);
  // alert("CountryName="+CountryName);
  DisplayCountry();  

}    


</script>
</head>
<body onload="initialize()">
<table style="width:100%;">
<tr><td colspan="2"><h4>USA States ID<div id="dropdown_menu">
</div></h4></td></tr>
<tr>
 <td><div id="map_canvas" style="border-style:solid; border-width:1px; border-color:#333333"></div></td>
 <td><div id="sidebar" style="width:300px;height:600px; border-style:solid; border-width:1px; border-color:#333333; overflow:auto"></div></td>
</tr>
<tr><td colspan="2"><span class="style1"><div id="FTquery"></div></td></tr>
<tr><td colspan="2"><span class="style1"><div id="FTquery2"></div></td></tr>
<tr><td colspan="2"><span class="style1"></td></tr>
<tr><td colspan="2"><span class="style1"><div id="FTquery4"></div></td></tr>
<tr><td colspan="2"><span class="style1"><div id="FTquery5"></div></td></tr>
</table>
<div id="country_list"></div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> 
</script> 
<script type="text/javascript"> 
_uacct = "UA-162157-1";
urchinTracker();
</script> 
</body>
</html>
4

0 回答 0