在Google Maps API中确定FusionTablesLayer的中心/边界框 [英] Determine center/bounding box of FusionTablesLayer in Google Maps API

查看:175
本文介绍了在Google Maps API中确定FusionTablesLayer的中心/边界框的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

有没有什么办法可以确定FusionTablesLayer的中心点?



谢谢!

解决方案以下代码显示了如何使用Chart Tools API从Fusion Table中检索数据,然后使用该数据将映射范围与Fusion Table中的数据相匹配。这将有希望给你一些关于如何找到中心的想法!

 <!DOCTYPE html> 
< html>
< head>
< meta http-equiv =content-typecontent =text / html; charset = UTF-8/>

< style type =text / css>
body {height:100%; margin:0px;填充:10px; }
#map-canvas {height:600px;宽度:700px; }
< / style>

< script type =text / javascript
src =http://maps.google.com/maps/api/js?sensor=false>< /脚本>
< script type =text / javascriptsrc =http://www.google.com/jsapi>< / script>

< script>
google.load('visualization','1');

函数initialize(){
var queryText = encodeURIComponent(
SELECT Latitude,Longitude FROM 345328);
var query = new google.visualization.Query(
'http://www.google.com/fusiontables/gvizdata?tq='+ queryText);

query.send(函数(响应){
var numRows = response.getDataTable()。getNumberOfRows();

//创建纬度/ (i = 0; i var lat = response.getDataTable()。getValue(i,0);长坐标
var coordinates = [];
;
var lng = response.getDataTable()。getValue(i,1);
coordinates.push(new google.maps.LatLng(lat,lng));
}

var map = new google.maps.Map(document.getElementById('map-canvas'),{
mapTypeId:google.maps.MapTypeId.ROADMAP
});
var bounds = new google.maps.LatLngBounds();
for(var i = 0; i< coordinates.length; i ++){
bounds.extend(coordinates [i]);
}
map.fitBounds(bounds);

var layer = new google.maps.FusionTablesLayer({
query:{
选择:'Latitude',
从:345328
}
});
layer.setMap(map);
});
}
google.maps.event.addDomListener(window,'load',initialize);
< / script>

< / head>
< body>
< div id =map-canvas>< / div>
< / body>
< / html>


is there any way I can determine central point of FusionTablesLayer? I was thinking about using some event to handle the layer rendering but without any luck.

Thanks!

解决方案

The following code shows how to retrieve data from a Fusion Table using the Chart Tools API, then use that data to fit the bounds of the map to the data in the Fusion Table. This will hopefully give you some ideas for how to find the center!

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

    <style type="text/css">
      body { height: 100%; margin: 0px; padding: 10px; }
      #map-canvas { height: 600px; width: 700px; }
    </style>

    <script type="text/javascript"
        src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>

    <script>
      google.load('visualization', '1');

      function initialize() {
        var queryText = encodeURIComponent(
            "SELECT Latitude,Longitude FROM 345328");
        var query = new google.visualization.Query(
            'http://www.google.com/fusiontables/gvizdata?tq='  + queryText);

        query.send(function(response) {
          var numRows = response.getDataTable().getNumberOfRows();

          //create the list of lat/long coordinates
          var coordinates = [];
          for(i = 0; i < numRows; i++) {
            var lat = response.getDataTable().getValue(i, 0);
            var lng = response.getDataTable().getValue(i, 1);
            coordinates.push(new google.maps.LatLng(lat, lng));
          }  

          var map = new google.maps.Map(document.getElementById('map-canvas'), {
            mapTypeId: google.maps.MapTypeId.ROADMAP
          });
          var bounds = new google.maps.LatLngBounds();
          for (var i = 0; i < coordinates.length; i++) {
            bounds.extend(coordinates[i]);
          }
          map.fitBounds(bounds);

          var layer = new google.maps.FusionTablesLayer({
            query: {
              select: 'Latitude',
              from: 345328
            }
          });
          layer.setMap(map);
        });
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>

  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

这篇关于在Google Maps API中确定FusionTablesLayer的中心/边界框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆