2015-01-08 42 views
-1

我想通过创建图层来突出显示区域,其中用户点击map.It不创建图层。FusionTablesLayer问题展示区域

layer = new google.maps.FusionTablesLayer({ 
      query: { 
      select: 'geometry', 
      from: tableId, 
      where: 'ST_INTERSECTS(geometry, CIRCLE(LATLNG(' + latitude + ', ' + longitude + '),1))', 
      limit: 1 
      } 
     }); 
     layer.setMap(map); 

这是Fiddle的完整代码。

图层有什么问题?

+0

我得到一个JavaScript错误在你的提琴:'未捕获的ReferenceError:标记不defined' – geocodezip

+0

我更新了小提琴,我从工作文件中提取此代码以简化提取 – user3913117

+0

您的[表格只有明尼苏达州的数据](https:// ww w.google.com/fusiontables/embedviz?q=select+col51+from+16TsGfelZ4TXk5i9ZJt5HpJTNSP2D4x5M1nx0a78&viz=MAP&h=false&lat=46.521464870509895&lng=-93.3612905&t=1&z=6&l=col51)。 – geocodezip

回答

0
  1. 你在你的提琴
  2. 表格只包含数据明尼苏达州有一个JavaScript错误(所以小提琴仅在明尼苏达州的工作)。

working fiddle

工作代码片段:

var marker = null; 
 
var layer = null; 
 

 
function initialize() { 
 
    var tableId = "16TsGfelZ4TXk5i9ZJt5HpJTNSP2D4x5M1nx0a78"; 
 
    var myLatlng = new google.maps.LatLng(25.0813500, 55.1440750); 
 
    var mapOptions = { 
 
     zoom: 8, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
     center: new google.maps.LatLng(25.0813500, 55.1440750) 
 
    }; 
 
    
 
    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 
 
layer = new google.maps.FusionTablesLayer({ 
 
      query: { 
 
       select: 'geometry', 
 
       from: tableId, 
 
      } 
 
     }); 
 
    
 
    var geocoder = new google.maps.Geocoder(); 
 
    geocoder.geocode({ 'address': "Minnesota"}, function(results, status) { 
 
    if (status == google.maps.GeocoderStatus.OK) { 
 
     map.fitBounds(results[0].geometry.viewport); 
 
     
 
    } else { 
 
     alert('Geocode was not successful for the following reason: ' + status); 
 
    } 
 
    }); 
 
    google.maps.event.addListener(map, "click", function (event) { 
 
     var latitude = event.latLng.lat(); 
 
     var longitude = event.latLng.lng(); 
 
     // Center of map 
 
     map.panTo(new google.maps.LatLng(latitude, longitude)); 
 
     if (!marker || !marker.setPosition) { 
 
      marker = new google.maps.Marker({ 
 
       position: new google.maps.LatLng(latitude, longitude), 
 
       map: map 
 
      }); 
 
     } else { 
 
      marker.setPosition(new google.maps.LatLng(latitude, longitude)); 
 
     } 
 
     if (!layer || !layer.setQuery || !layer.getMap || (layer.getMap() == null)) { 
 
     layer = new google.maps.FusionTablesLayer({ 
 
      query: { 
 
       select: 'geometry', 
 
       from: tableId, 
 
       where: 'ST_INTERSECTS(geometry, CIRCLE(LATLNG(' + latitude + ', ' + longitude + '),1))', 
 
       limit: 1 
 
      }, 
 
      map: map 
 
     }); 
 
     layer.setMap(map); 
 
     } else { 
 
      layer.setQuery({ 
 
       select: 'geometry', 
 
       from: tableId, 
 
       where: 'ST_INTERSECTS(geometry, CIRCLE(LATLNG(' + latitude + ', ' + longitude + '),1))', 
 
       limit: 1 
 
      }); 
 
     } 
 

 
    }); //end addListener 
 
} 
 

 
initialize();
#map-canvas { 
 
    height: 400px; 
 
}
<script src="http://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map-canvas"></div>