Fatal编程技术网
  • javascript/
  • Javascript 谷歌地图API V3&；融合表-在侧边栏中显示选定的多边形名称（作为innerHTML）

Javascript 谷歌地图API V3&；融合表-在侧边栏中显示选定的多边形名称（作为innerHTML）

javascript dom google-maps-api-3

Javascript 谷歌地图API V3&；融合表-在侧边栏中显示选定的多边形名称（作为innerHTML）,javascript,dom,google-maps-api-3,google-fusion-tables,Javascript,Dom,Google Maps Api 3,Google Fusion Tables,我选择查找位于特定半径内的多边形（存储在融合表中），并在地图上显示这些多边形。 现在我试图在侧边栏中显示这个多边形的名称（使用innerHTML），但侧边栏中只有检索“[object object]”消息 我试着做： document.getElementById('layer').innerHTML = layer; 整个代码如下： <!DOCTYPE html> <html> <head> <title>USA</title

我选择查找位于特定半径内的多边形（存储在融合表中），并在地图上显示这些多边形。 现在我试图在侧边栏中显示这个多边形的名称（使用innerHTML），但侧边栏中只有检索“[object object]”消息

我试着做：

document.getElementById('layer').innerHTML = layer;
整个代码如下：

<!DOCTYPE html>
<html>
  <head>
    <title>USA</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">

<link href="/apis/fusiontables/docs/samples/style/default.css"
rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">
var geocoder;
var map;
var infowindow = new google.maps.InfoWindow();
var marker;

function initialize() {

  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(37.857507,-101.000978);

  var mapOptions = {
    zoom: 4,
    center: latlng,
    mapTypeId: 'roadmap'
  }
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}

//Reverse Geocode
function codeLatLng() {
  var input = document.getElementById('latlng').value;
  var latlngStr = input.split(',', 2);
  var lat = parseFloat(latlngStr[0]);
  var lng = parseFloat(latlngStr[1]);
  var latlng = new google.maps.LatLng(lat, lng);
  geocoder.geocode({'latLng': latlng}, function(layers, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      if (layers[1]) {
        map.setZoom(10);
        marker = new google.maps.Marker({
            position: latlng,
            map: map
        });
        infowindow.setContent(layers[1].formatted_address);
        infowindow.open(map, marker);
      } else {
        alert('No layers found');
      }
    } else {
      alert('Geocoder failed due to: ' + status);
    }
  });
//Reverse Geocode

        var tableid = '15Dce-frPm_D_5gTTG2gKwlWTElkgL7NC1RqDzuY';

        var layer = new google.maps.FusionTablesLayer({
          query: {
            select: 'geometry, name',
            from: tableid,
            where: 'ST_INTERSECTS(geometry, CIRCLE(LATLNG ' + latlng + ', 1))'
          },
        });

        document.getElementById('layer').innerHTML = layer;
        layer.setMap(map);

        // Create a map circle object to visually show the radius.
        var circle = new google.maps.Circle({
          center: latlng,
          radius: 1,
          map: map,
          fillOpacity: 0.2,
          strokeOpacity: 0.5,
          strokeWeight: 1
        });

        // Update the radius when the user makes a selection.
        google.maps.event.addDomListener(document.getElementById('radius'),
            'change', function() {
              var meters = parseInt(this.value, 10);
              layer.setOptions({
                query: {
                  select: 'geometry, name',
                  from: tableid,
                  where: 'ST_INTERSECTS(geometry, ' +
                      'CIRCLE(LATLNG ' + latlng + ', ' + meters + '))'
                }
              });

              circle.setRadius(meters);
            });
    }

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

  </script>

<style>
      #panel {
        position: absolute;
        top: 20px;
        left: 20px;

        width: 300px;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #333333;
      }
      #latlng {
        width: 150px;
      }
    .style1 {
    font-size: 14px;
    font-weight: bold;
}
</style>

  </head>
  <body>

      <div id="panel">
      <input id="latlng" type="text" value="40.714224,-73.961452">
      <input type="button" value="Reverse Geocode" onclick="codeLatLng()">
    </div>


    <div id="map-canvas" style="position:absolute; left:350px; top:20px; width:900px; height:700px; z-index:1; "></div>
    <div id="panel2" style="position:absolute; padding: 5px; left:20px; top:60px; width:200px; height:200px; border-style:solid; border-width:1px; border-color:#333333; z-index:3; ">
      <p class="style1">Select radius:</p>

        <select name="select" id="radius">
          <option value="1">0 meters</option>
          <option value="5000">5000 meters</option>
          <option value="10000">10,000 meters</option>
          <option value="15000">15,000 meters</option>
          <option value="20000">20,000 meters</option>
          <option value="25000">25,000 meters</option>
        </select>   
      </p>
    </div>
    <div id="layer" style="position:absolute; padding: 5px; left:20px; top:300px; width:200px; height:200px; border-style:solid; border-width:1px; border-color:#333333; z-index:3; ">
      <p class="style1">Radius polygons</p>
      <p>&nbsp; </p>
    </div>

  </body>
</html>


美国
var地理编码器；
var映射；
var infowindow=new google.maps.infowindow（）；
var标记；
函数初始化（）{
geocoder=新的google.maps.geocoder（）；
var latlng=新的google.maps.latlng（37.857507，-101.000978）；
变量映射选项={
缩放：4，
中心：拉特林，
mapTypeId:“路线图”
}
map=new google.maps.map（document.getElementById（'map-canvas'），mapOptions）；
}
//反向地理编码
函数codeLatLng（）{
var输入=document.getElementById（'latlng'）。值；
var latlngStr=input.split（'，'，2）；
var lat=parseFloat（latlngStr[0]）；
var lng=parseFloat（latlngStr[1]）；
var latlng=新的google.maps.latlng（lat，lng）；
geocoder.geocode（{'latLng'：latLng}，函数（层，状态）{
if（status==google.maps.GeocoderStatus.OK）{
如果（层[1]）{
map.setZoom（10）；
marker=新的google.maps.marker({
位置：latlng，
地图：地图
});
infowindow.setContent（层[1]。格式化的\u地址）；
信息窗口。打开（地图、标记）；
}否则{
警报（“未找到图层”）；
}
}否则{
警报（'地理编码器因：'+状态而失败）；
}
});
//反向地理编码
变量表ID='15Dce-frPm_D_5gTTG2gKwlWTElkgL7NC1RqDzuY'；
var layer=new google.maps.FusionTablesLayer({
查询：{
选择：“几何体，名称”，
发件人：tableid，
式中：'ST_相交（几何体，圆（LATLNG'+LATLNG+'，1））'
},
});
document.getElementById（'layer'）。innerHTML=layer；
图层设置图（map）；
//创建地图圆对象以直观地显示半径。
var circle=new google.maps.circle({
中心：拉特林，
半径：1，
地图：地图，
填充不透明度：0.2，
笔划不透明度：0.5，
冲程重量：1
});
//当用户进行选择时更新半径。
google.maps.event.addDomListener（document.getElementById（'radius'），
'change'，function（）{
var meters=parseInt（该值为10）；
layer.setOptions({
查询：{
选择：“几何体，名称”，
发件人：tableid，
式中：'ST_相交（几何，'+
“圆（LATLNG'+LATLNG+'，'+米+）”
}
});
圆半径（米）；
});
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
#面板{
位置：绝对位置；
顶部：20px；
左：20px；
宽度：300px；
z指数：5；
背景色：#fff；
填充物：5px；
边框：1px实心#333333；
}
#板条{
宽度：150px；
}
.style1{
字体大小：14px；
字体大小：粗体；
}

选择半径：

0米
5000米
一万米
15000米
20000米
25000米


半径多边形
我将感激任何帮助

最好的，
Darko层是一个FusionTablesLayer对象。如果需要地理编码操作结果中的数据，即“层”对象中的数据，这是一个对象

如果您想要查询FusionTablesLayer对象无法提供的表的结果，则需要使用GViz（google.visualization库）或FusionTables API v1.0单独查询。请注意，GViz对返回的行数有限制

函数createSidebar（查询）{
// https://www.google.com/fusiontables/api/query?sql=SELECT%20ROWID，%20%2A%20FROM%20564705
//使用参数设置查询
var queryText=encodeURIComponent（查询）；
var query=new google.visualization.query（'http://www.google.com/fusiontables/gvizdata?tq=“+queryText）；
//设置回调函数
query.send（getData）；
}
var-FTresponse=null；
//定义回调函数，返回结果时调用该函数
函数getData（响应）{
如果（！响应）{
警报（“无响应”）；
返回；
}
if（response.isError（））{
警报（'查询中的错误：'+response.getMessage（）+'+response.getDetailedMessage（））；
返回；
} 
FTresponse=响应；
//有关响应对象的更多信息，请参阅文档
//http://code.google.com/apis/visualization/documentation/reference.html#QueryResponse
numRows=response.getDataTable（）.getNumberOfRows（）；
numCols=response.getDataTable（）.getNumberOfColumns（）；
//将结果连接成字符串，您可以在此处构建一个表
fusiontabledata=“”；
fusiontabledata+=“”+response.getDataTable（）.getColumnLabel（0）+“”；
fusiontabledata+=“”；
对于（i=0；i

再次感谢geocodezip提供的帮助，此代码工作非常完美。 
function  createSidebar(query) {
  // https://www.google.com/fusiontables/api/query?sql=SELECT%20ROWID,%20%2A%20FROM%20564705

  //set the query using the parameter
  var queryText = encodeURIComponent(query);
  var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq='  + queryText);

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

var FTresponse = null;
//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();

  //concatenate the results into a string, you can build a table here
  fusiontabledata = "<table><tr>";
  fusiontabledata += "<th>" + response.getDataTable().getColumnLabel(0) + "</th>";
  fusiontabledata += "</tr><tr>";

  for(i = 0; i < numRows; i++) {
    fusiontabledata += "<td>"+response.getDataTable().getValue(i, 0) + "</a></td>";
    fusiontabledata += "</tr><tr>";
  }
  fusiontabledata += "</table>"  
  //display the results on the page
  document.getElementById('sidebar').innerHTML = fusiontabledata;
}