谷歌融合表空间搜索可拖动边界

Google fusion table spatial search draggable bounds

本文关键字:拖动 边界 搜索 空间 融合 谷歌      更新时间:2023-09-26

我正在尝试调整此脚本 https://google-developers.appspot.com/maps/articles/mvcfun 以使用谷歌融合表实现空间搜索。第一步,默认搜索,工作正常,但是当我尝试根据标记位置扩展半径搜索时,问题出现了,拖动的标记永远不会"着陆"。我的目标是根据新中心和新边界更新查询。

感谢大家

    <script type="text/javascript">
    //geolocalizzo
    var pos;
    if (navigator.geolocation) {
       navigator.geolocation.getCurrentPosition(initialize);
        }else{
        alert('La geo-localizzazione NON è possibile');
        }
      function initialize(position) {
     var tableid ='XXXXXXXXXXXXX'
     pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
     map = new google.maps.Map(document.getElementById('map-canvas'), {
          center: pos,
          zoom: 11,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });
     var distanceWidget = new DistanceWidget(map);
     //recupero info su posizione etc etc
     google.maps.event.addListener(distanceWidget, 'distance_changed', function() {
      displayInfo(distanceWidget);
      extendsearch(distanceWidget);
     });
     google.maps.event.addListener(distanceWidget, 'position_changed', function() {
      displayInfo(distanceWidget);
     extendsearch(distanceWidget);
     });
     var layer = new google.maps.FusionTablesLayer({
         //setto gli infowindows
          query: {
            select: 'latitudine',
            from: tableid,
            where: 'ST_INTERSECTS(latitudine, CIRCLE(LATLNG('+ pos.lat()+', '+pos.lng()+'        ),2000))'
          },
          //setto gli stili
          styles: [{
            where: 'id=3',
            markerOptions: {
            iconName: "blu_blank"
                            }
    },
      {
          where: 'id=1',
          markerOptions: {
          iconName: "red_blank"
                            }
      }],
        });
        layer.setMap(map);
        google.maps.event.addListener(layer, 'click', function(e) {
          e.infoWindowHtml = '<div class="googft-info-window"'+
    'style="font-family: sans-serif; width: 350px; height: 20em; overflow-y: auto;">'+
    '<table><tr><td><img src="'+e.row['immagine'].value+'"'+ 
       'style="width: 100px; vertical-align: top; margin-left: .5em" /></td><td><h2   style="color: brown">'+e.row['Titolo'].value+'</h2></td></tr>'+ '<tr><td><h3 style="color: blue">'+e.row['descrizione'].value +'<br></h3></td></tr>' +
    //'<tr><td><b>il job è stato creato il :<br></b>'+e.row['dcreazione'].value+'<br></td> <td></td>' +
    '<tr><td colspan="2"><b>Candidati entro il :</b> '+e.row['dscadenza'].value+'<br></td>  </tr>'+
    '<tr><td><h3 style="color: red">Fai la tua offerta</h3></td><td></td><td>'+
    '<form action="'+e.row['joblink'].value+'">'+
    '<input type="submit" value="Offri"></form></td></tr></table>'+
    //'Offri </button>  <a href='''+e.row['joblink'].value+''' target=''_blank''>clicca     qui</a></td></tr></table>'+
'</div>';  
                                                                   });
      }
     /**
       * A distance widget that will display a circle that can be resized and will
       * provide the radius in km.
       *
       * @param {google.maps.Map} map The map to attach to.
       *
       * @constructor
       */
      function DistanceWidget(map) {
        this.set('map', map);
        this.set('position', map.getCenter());
        var marker = new google.maps.Marker({
          draggable: true,
          title: 'Move me!'
        });
        // Bind the marker map property to the DistanceWidget map property
        marker.bindTo('map', this);
        // Bind the marker position property to the DistanceWidget position
        // property
        marker.bindTo('position', this);
        //mostro infor di partenza
         var infowindow = new google.maps.InfoWindow();
        infowindow.setContent('Tu sei qui, spostami per farte altre ricerche');
        infowindow.open(map, marker);
        // Create a new radius widget
        var radiusWidget = new RadiusWidget();
        // Bind the radiusWidget map to the DistanceWidget map
        radiusWidget.bindTo('map', this);
        // Bind the radiusWidget center to the DistanceWidget position
        radiusWidget.bindTo('center', this, 'position');
        // Bind to the radiusWidgets' distance property
        this.bindTo('distance', radiusWidget);
        // Bind to the radiusWidgets' bounds property
        this.bindTo('bounds', radiusWidget);
      }
      DistanceWidget.prototype = new google.maps.MVCObject();

      /**
       * A radius widget that add a circle to a map and centers on a marker.
       *
       * @constructor
       */
      function RadiusWidget() {
        var circle = new google.maps.Circle({
          strokeWeight: 1,
          clickable:false
        });
        // Set the distance property value, default to 50km.
        this.set('distance', 2);
        // Bind the RadiusWidget bounds property to the circle bounds property.
        this.bindTo('bounds', circle);
        // Bind the circle center to the RadiusWidget center property
        circle.bindTo('center', this);
        // Bind the circle map to the RadiusWidget map
        circle.bindTo('map', this);
        // Bind the circle radius property to the RadiusWidget radius property
        circle.bindTo('radius', this);
        // Add the sizer marker
        this.addSizer_();
      }
      RadiusWidget.prototype = new google.maps.MVCObject();

      /**
       * Update the radius when the distance has changed.
       */
      RadiusWidget.prototype.distance_changed = function() {
        this.set('radius', this.get('distance') * 1000);
      };

      /**
       * Add the sizer marker to the map.
       *
       * @private
       */
      RadiusWidget.prototype.addSizer_ = function() {
        var sizer = new google.maps.Marker({
          draggable: true,
          title: 'Drag me!',
        });
        sizer.bindTo('map', this);
        sizer.bindTo('position', this, 'sizer_position');
        var me = this;
        google.maps.event.addListener(sizer, 'drag', function() {
        // Set the circle distance (radius)
         me.setDistance();
      });
      };

      /**
       * Update the center of the circle and position the sizer back on the line.
       *
       * Position is bound to the DistanceWidget so this is expected to change when
       * the position of the distance widget is changed.
       */

         RadiusWidget.prototype.center_changed = function() {
            var bounds = this.get('bounds');
            // Bounds might not always be set so check that it exists first.
            if (bounds) {
              var lng = bounds.getNorthEast().lng();
              // Put the sizer at center, right on the circle.
              var position = new google.maps.LatLng(this.get('center').lat(), lng);
              this.set('sizer_position', position);
            }
          };
        /**
        * Calculates the distance between two latlng locations in km.
        * @see http://www.movable-type.co.uk/scripts/latlong.html
        *
        * @param {google.maps.LatLng} p1 The first lat lng point.
        * @param {google.maps.LatLng} p2 The second lat lng point.
        * @return {number} The distance between the two points in km.
        * @private
         */
       RadiusWidget.prototype.distanceBetweenPoints_ = function(p1, p2) {
        if (!p1 || !p2) {
        return 0;
      }
      var R = 6371; // Radius of the Earth in km
      var dLat = (p2.lat() - p1.lat()) * Math.PI / 180;
      var dLon = (p2.lng() - p1.lng()) * Math.PI / 180;
      var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
        Math.cos(p1.lat() * Math.PI / 180) * Math.cos(p2.lat() * Math.PI / 180) *
        Math.sin(dLon / 2) * Math.sin(dLon / 2);
      var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
      var d = R * c;
      return d;
    };

    /**
     * Set the distance of the circle based on the position of the sizer.
     */
    RadiusWidget.prototype.setDistance = function() {
      // As the sizer is being dragged, its position changes.  Because the
      // RadiusWidget's sizer_position is bound to the sizer's position, it will
      // change as well.
      var pos = this.get('sizer_position');
      var center = this.get('center');
      var distance = this.distanceBetweenPoints_(center, pos);
      // Set the distance property for any objects that are bound to it
      this.set('distance', distance);
    };
    //display info
    function displayInfo(widget) {
      var info = document.getElementById('info');
      info.innerHTML = 'Position: ' + widget.get('position') + ', distance: ' +
        widget.get('distance');
    }
    function extendsearch(widget){
        layer.setOptions({
                    query: {
                      select: 'latitudine',
                      from: tableid,
                      where: 'ST_INTERSECTS(latitudine, CIRCLE(LATLNG('+ widget.get('position')+' ),'+ widget.get('distance')+'))'
                    },
                  });
        }

          google.maps.event.addDomListener(window, 'load', init);
        </script>

我解决了我的问题。这是我所做的:

  • 声明的图层尺寸器和标记全局
  • 摆脱了我的函数exentsearch
  • 分别为 addSizer_ 和 distanceWidget 中的 sizer 和 marker 添加 "dragend" 事件的侦听器
  • 在addSizer_中,我还绑定了尺寸器距离属性 sizer.bindTo('ndistance',this,'distance');

    google.maps.event.addListener(sizer, 'dragend', function() {
    layer.setOptions({
                 query: {
                      select: 'latitudine',
                      from: tableid,
                     where: 'ST_INTERSECTS(latitudine,      CIRCLE(LATLNG('+marker.getPosition().lat()+','+   marker.getPosition().lng()+'),'+sizer.get('ndistance')*1000+'))'
                    }
                    });
                    layer.setMap(map);
    });