0

我试图让这个谷歌地图平移和缩放到选定的下拉选项。下拉查询本身正在工作，但我是编码新手，我无法弄清楚代码有什么问题以使地图平移和缩放到查询结果。谷歌融合表上的列标题是“查询”，所以我很困惑。

这是我希望地图执行的示例： http ://www.geocodezip.com/geoxml3_test/www_advocacy_ucla_edu_Assembly_MapC.html

这就是我从以下位置获得平移/缩放代码部分的地方： http ://www.geocodezip.com/geoxml3_test/v3_SO_FusionTables_pan2Marker.html

而且，这是我的代码：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">
    <!-- <link href="style.css" rel="stylesheet" /> -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  function initialize() {
   var tableId = '15wosKAeHC0gcpU_N6UPbxPL09RrEBKlQNEaCmnU';
   var locationColumn = 'Lat';
    map = new google.maps.Map(document.getElementById('googft-mapCanvas'), {
      center: new google.maps.LatLng(34.03,-111.9),
      zoom: 10,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend'));

    layer = new google.maps.FusionTablesLayer({
      map: map,
      heatmap: { enabled: false },
      query: {
            select: locationColumn,
            from: tableId
      },
      options: {
        styleId: 3,
        templateId: 3
      }
    });
            layer . setMap ( map ); 

            google.maps.event.addDomListener(document.getElementById('Query'),
            'change', function() {
              updateMap(layer, tableId, locationColumn);
        });
  }
   // Update the query sent to the Fusion Table Layer based on
      // the user selection in the select menu
      function updateMap(layer, tableId, locationColumn) {
        var query = document.getElementById('Query').value;
        if (query) {
          layer.setOptions({
            query: {
              select: locationColumn,
              from: tableId,
              where: "Query = '" + query + "'"
            }
          });
          panToMarker(Query, tableId, locationColumn);
        } else {
          layer.setOptions({
            query: {
              select: locationColumn,
              from: tableId
            }
          });
        }

      }

        function panToMarker(Query, tableId, locationColumn) {
    var queryStr = "SELECT "+locationColumn+" FROM "+tableId+" WHERE Query = "+Query+";";
    document.getElementById('query').innerHTML = queryStr;
    var queryText = encodeURIComponent(queryStr);
    var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq='  + queryText);

    query.send(panTo);
    }

    function panTo(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();
      var geoXml = new geoXML3.parser();
      var kml = FTresponse.getDataTable().getValue(0,0);
      geoXml.parseKmlString("<Placemark>"+kml+"</Placemark>");
      geoXml.docs[0].markers[0].setMap(null);
      map.setCenter(geoXml.docs[0].markers[0].getPosition());
      if (map.getZoom() < 10) map.setZoom(10);
    }


  google.maps.event.addDomListener(window, 'load', initialize);




</script>
</head>
  <body>
  <div id="wrapper">



<table>
<tr>
<td>
<div id="menu" style="background-color:#EFE0B9;height:500px;width:150px;float:left;">


<label><b>Select:</b></label>
    <select id="Query">
<option value="Bishop Creek">Bishop Creek</option>
<option value="Blue Spring">Blue Spring</option>
<option value="Blue Wash">Blue Wash</option>
<option value="Bronco Creek">Bronco Creek</option>
<option value="Camp Creek">Camp Creek</option>
<option value="Cave Creek">Cave Creek</option>
<option value="Columbine Spring">Columbine Spring</option>
<option value="Copper Creek">Copper Creek</option>
<option value="Cottonwood Creek">Cottonwood Creek</option>
<option value="Davenport Wash">Davenport Wash</option>
<option value="Deadman Creek">Deadman Creek</option>
<option value="Grapevine Canyon">Grapevine Canyon</option>
<option value="Holmes Canyon">Holmes Canyon</option>
<option value="Horse Creek">Horse Creek</option>
<option value="Jacks Gulch">Jacks Gulch</option>
<option value="Lime Creek upper">Lime Creek upper</option>
<option value="Lime Creek lower">Lime Creek lower</option>
<option value="Mud Spring">Mud Spring</option>
<option value="New River">New River</option>
<option value="Rackensack Canyon">Rackensack Canyon</option>
<option value="Red Creek">Red Creek</option>
<option value="Red Creek Middle">Red Creek Middle</option>
<option value="Round Tree Canyon">Round Tree Canyon</option>
<option value="Seven Springs">Seven Springs</option>
<option value="Silver Creek">Silver Creek</option>
<option value="Sheep Creek">Sheep Creek</option>
<option value="Squaw Creek">Squaw Creek</option>
<option value="Sycamore Creek">Sycamore Creek</option>
<option value="Sycamore Creek HK Ranch">Sycamore Creek HK Ranch</option>
<option value="Tangle Creek">Tangle Creek</option>
<option value="Two Mile Spring">Two Mile Spring</option>
<option value="Verde River">Verde River</option>
<option value="Walnut Spring">Walnut Spring</option>
<option value="Wet Bottom Creek">Wet Bottom Creek</option>
    </select>
    <br><br><br><br><br><br><br>

</td>
<td>
  <div id="googft-mapCanvas" style="width:700px; height:600px;">
</td>


 </div>
</body>
</html>

我不知道我做错了什么，如果有人能指出我正确的方向，我将不胜感激！=D

4

1 回答 1

0

  1. 该代码正在尝试使用 GViz 查询，但不包括该 API。添加：

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
 google.load('visualization', '1', {'packages':['corechart', 'table', 'geomap']});

  2. 该代码试图从 Lat 列解析 KML，但这不是 KML，它是 2 列位置。消除：

    var geoXml = new geoXML3.parser();
var kml = FTresponse.getDataTable().getValue(0,0);
geoXml.parseKmlString("<Placemark>"+kml+"</Placemark>");
geoXml.docs[0].markers[0].setMap(null);
map.setCenter(geoXml.docs[0].markers[0].getPosition());
if (map.getZoom() < 10) map.setZoom(10);

将其替换为：

    var bounds = new google.maps.LatLngBounds();
    for (var i=0; i<numRows; i++) {
      var lat = FTresponse.getDataTable().getValue(i,0);
      var lng = FTresponse.getDataTable().getValue(i,1);
      var point = new google.maps.LatLng(lat,lng);
      bounds.extend(point);
    }
    if (numRows == 1) map.setCenter(point);
    else map.fitBounds(bounds);
    if (map.getZoom() < 10) map.setZoom(10);

将您的 GViz 查询更改为：

    var queryStr = "SELECT Lat,Long FROM "+tableId+" WHERE Query = '"+Query+"';";

工作示例

于 2013-07-31T16:01:09.413 回答