FusionTablesLayer问题显示区域

时间:2015-01-08 13:00:45

标签: jquery google-maps-api-3

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

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

图层有什么问题?

1 个答案:

答案 0 :(得分:0)

  1. 你的小提琴中有一个javascript错误
  2. 你的桌子只包含明尼苏达州的数据(所以小提琴只适用于明尼苏达州。)
  3. 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>
    &#13;
    &#13;
    &#13;