FusionTablesLayer where where clause not&几何不显示谷歌地图javascript api

时间:2017-09-16 01:01:11

标签: javascript google-maps

在我脑海里:

<script type="text/javascript">
window._initHomeMap = function(){
    if( document.getElementById('map') !== null ){
        var map = new google.maps.Map(document.getElementById('map'), {
            center: new google.maps.LatLng(30,0),
            zoom: 2,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            disableDefaultUI: true,
            scrollwheel: false,
            draggable: false,
        });

        var world_geometry = new google.maps.FusionTablesLayer({
            query: {
                select: 'geometry',
                from: '1N2LBk4JHwWpOY4d9fobIn27lfnZ5MDy-NoqqRpk',
                where: 'ISO_2DIGIT IN ("US", "CA", "AF")',
            },
            heatmap: {
              enabled: false
            },
            suppressInfoWindows: true,
            map: map,
            options: {
              styleId: 2,
              templateId: 2
            },
            styles: [{ //included because geometry not showing up
                polygonOptions: {
                    fillColor: '#FF0000',
                    fillOpacity: 0.4
                }
            }],
        });
    }
}
</script>

在我的身上:

<div id="map"></div>

在关闭正文标记之前:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBrRJwJFfNCdVLJwa6yhR8UBZR1m2A018Q&amp;callback=window._initHomeMap"></script>

结果:Screencap

我想从其中包含国家/地区几何图形的FusionTable中提取并在Google地图上显示国家/地区边界。但由于某种原因几何图形没有显示(除非我使用那个样式属性)并且查询中的where子句不起作用。我一直在搜索和其他地方,我找不到我做错了什么。在这几个小时。任何帮助/指导赞赏!

1 个答案:

答案 0 :(得分:0)

如果我使用FusionTables UI生成查询,我会(对我有用):

  query: {
    select: 'geometry',
    from: '1N2LBk4JHwWpOY4d9fobIn27lfnZ5MDy-NoqqRpk',
    where: "ISO_2DIGIT IN ('US', 'CA', 'AF')",
  },

(注意"中交换的'&amp; where:

proof of concept fiddle

screen shot

代码段

&#13;
&#13;
window._initHomeMap = function() {
  if (document.getElementById('map') !== null) {
    var map = new google.maps.Map(document.getElementById('map'), {
      center: new google.maps.LatLng(30, 0),
      zoom: 2,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      disableDefaultUI: true,
      scrollwheel: false,
      draggable: false,
    });

    var world_geometry = new google.maps.FusionTablesLayer({
      query: {
        select: 'geometry',
        from: '1N2LBk4JHwWpOY4d9fobIn27lfnZ5MDy-NoqqRpk',
        where: "ISO_2DIGIT IN ('US', 'CA', 'AF')",
      },
      heatmap: {
        enabled: false
      },
      suppressInfoWindows: true,
      map: map,
      options: {
        styleId: 2,
        templateId: 2
      },
      styles: [{ //included because geometry not showing up
        polygonOptions: {
          fillColor: '#FF0000',
          fillOpacity: 0.4
        }
      }],
    });
  }
}
google.maps.event.addDomListener(window, "load", window._initHomeMap);
&#13;
html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
&#13;
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
&#13;
&#13;
&#13;