融合表图层问题以显示区域

Question

我想通过创建用户单击地图的图层来突出显示区域。它不会创建图层。

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

这是完整代码的小提琴。

图层有什么问题？

Answer 1

1. 你的小提琴中有一个JavaScript错误
2. 您的表仅包含明尼苏达州的数据（因此小提琴仅适用于明尼苏达州）。

工作小提琴

工作代码片段：

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>