谷歌地图从fusiontable获取kml并显示它们

Google Maps getting kml from fusiontable and display them

本文关键字：显示 kml fusiontable 获取 谷歌地图      更新时间：2023-09-26

我想为荷兰建造这样的东西。我有省份的名字，你点击其中一个，就会大声显示它的边界，所以设置正确的边界。这是我的代码：

var FT_TableID = "19lLpgsKdJRHL2O4fNmJ406ri9JtpIIk8a-AchA";
var CountryName = "Netherlands";
google.load('visualization', '1', {
  'packages': ['corechart', 'table', 'geomap']
});
jQuery(document).ready(function() {
  var mapProp = {
    center: new google.maps.LatLng(52.24730, 5.36449),
    zoom: 7,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
  jQuery("span").click(function() {
    var name = jQuery(this).text();
    //map.fitBounds(gpolygons[id].bounds);
    var queryStr = {
      select: 'kml_4326',
      from: FT_TableID,
      where: "'name_0' = '" + CountryName + "' AND 'name_1' = '" + name + "'"
    };
    var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryStr);
    var FT_Options = {
      suppressInfoWindows: true,
      query: query
    };
    layer = new google.maps.FusionTablesLayer(FT_TableID, FT_Options);
    layer.setMap(map);
  });
});

代码笔上还有一个工作示例：http://codepen.io/anon/pen/JXvXjb

我的问题是：它显示了视图端口中所有内容的边界和kml数据，而不仅仅是所选省份。查询有问题吗？此外，我希望像地理编码zip的示例一样，将视图端口设置为所选省份。为此，我需要边界数据，并用 bounds.extend()和map.fitBounds(bounds)设置它。但是我可以从哪里获得这些数据？

您的FusionTableLayer没有按预期工作，因为您使用了错误的语法（"旧"语法，而不是当前记录的语法）。"旧"语法不适用于加密的id。当查询语法不正确，但您为其提供了一个有效的表时，它会显示所有数据。

"旧"语法：

layer = new google.maps.FusionTablesLayer(FT_TableID, FT_Options);

这是（目前）记录的语法：

var FT_Options = {
  suppressInfoWindows: true,
  query: {
    select: 'kml_4326',
    from: FT_TableID,
    where: "'name_0' = '" + CountryName + "'"
  },
  styles: [{
    polygonOptions: {
      strokeColor: "#FF0000",
      strokeWeight: 3
    }
  }]
};
layer = new google.maps.FusionTablesLayer(FT_Options);

您的省份查询也有问题（省份名称拼写错误（或者至少与表中的不同），因此查询与任何行都不匹配。

代码片段：

var FT_TableID = "19lLpgsKdJRHL2O4fNmJ406ri9JtpIIk8a-AchA";
var CountryName = "Netherlands";
google.load('visualization', '1', {
  'packages': ['corechart', 'table', 'geomap']
});
jQuery(document).ready(function() {
  var mapProp = {
    center: new google.maps.LatLng(52.24730, 5.36449),
    zoom: 7,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
  var queryStr = {
    select: 'kml_4326',
    from: FT_TableID,
    where: "'name_0' = '" + CountryName + "'"
  };
  var FT_Options = {
    suppressInfoWindows: true,
    query: queryStr,
    styles: [{
      polygonOptions: {
        strokeColor: "#FF0000",
        strokeWeight: 3
      }
    }]
  };
  layer = new google.maps.FusionTablesLayer(FT_Options);
  layer.setMap(map);
  jQuery("span").click(function() {
    var name = jQuery(this).text();
    var queryStr = {
      select: 'kml_4326',
      from: FT_TableID,
      where: "'name_0' = '" + CountryName + "' AND 'name_1' = '" + name + "'"
    };
    var FT_Options = {
      query: queryStr,
      styles: [{
        polygonOptions: {
          strokeColor: "#FF0000",
          strokeWeight: 3
        }
      }]
    };
    layer.setOptions(FT_Options);
  });
});
html,
body,
#googleMap {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://www.google.com/jsapi"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Zeeland</span>
<span>Drenthe</span>
<br>
<div id="googleMap"></div>

相关文章：