javascript - 谷歌地图拖动ajax不工作

Question

我正在尝试获得类似 http://www.yelp.com/ 的功能当用户拖动 map 时，它将调用 ajax 并收集 lat、lng 并填充 map 标记。

这是我尝试过的一些示例代码

  function initialize() {

    var mapOptions = {
      zoom: 12,
      center: new google.maps.LatLng(32.1594, -80.7614),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('mymap-screenwrap'), mapOptions);
    google.maps.event.addListener(map, 'dragend', getPinsToMapBound);
    google.maps.event.addListener(map, 'zoom_changed', getPinsToMapBound);

    var start =(document.getElementById('cr-start-point'));

    var end=(document.getElementById('cr-end-point'));

    var autocompleteA = new google.maps.places.Autocomplete(start);

    var autocompleteB = new google.maps.places.Autocomplete(end);               

    directionsDisplay.setMap(map);

    directionsDisplay.setOptions( { suppressMarkers: true } );

    directionsDisplay.setPanel(document.getElementById('panel-direction-content'));
    if(start.value != '') {
      routehelper();
    }

  }

  function getPinsToMapBound(ev) {
    var ids;
    if(ids = $$('.mymaps_topmenu a.pressed').get('id')) {
      var bounds = map.getBounds();
      var ne = [bounds.getNorthEast().lat(), bounds.getNorthEast().lng()];
      var sw = [bounds.getSouthWest().lat(), bounds.getSouthWest().lng()];
      jQuery.ajax({
        url: '/rvillage/maps/get-data-within-lat-lng',
        data: {bounds : bounds, ne : ne, sw : sw, format : 'json'},
        dataType: 'json'
      }).done(function( data ) {
        console.log(data);
      });
    }
  }

现在的问题是，当我拖动 map 时，ajax 部分不起作用，它会抛出错误 - TypeError: this is undefined https://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/16/3/%7Bmain,places%7D.js第 28 行。如果我关闭ajax，它不会抛出错误。谁能指出我哪里错了？ 我结合使用了mootools和jQuery，当我评论ajax部分时没有错误，我已经使用mootools延迟来延迟这个功能但没有工作。提前致谢。

Answer 1

这是一个愚蠢的错误，我将bounce值添加到ajax数据中，这会产生问题，因为当它调用toString时 对于 bounce 值，发生错误 bounce 值不是必需的

  function initialize() {

    var mapOptions = {
      zoom: 12,
      center: new google.maps.LatLng(32.1594, -80.7614),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('mymap-screenwrap'), mapOptions);
    google.maps.event.addListener(map, 'dragend', getPinsToMapBound);
    google.maps.event.addListener(map, 'zoom_changed', getPinsToMapBound);

    var start =(document.getElementById('cr-start-point'));

    var end=(document.getElementById('cr-end-point'));

    var autocompleteA = new google.maps.places.Autocomplete(start);

    var autocompleteB = new google.maps.places.Autocomplete(end);               

    directionsDisplay.setMap(map);

    directionsDisplay.setOptions( { suppressMarkers: true } );

    directionsDisplay.setPanel(document.getElementById('panel-direction-content'));
    if(start.value != '') {
      routehelper();
    }

  }

  function getPinsToMapBound(ev) {
    var ids;
    if(ids = $$('.mymaps_topmenu a.pressed').get('id')) {
      var bounds = map.getBounds();
      var ne = [bounds.getNorthEast().lat(), bounds.getNorthEast().lng()];
      var sw = [bounds.getSouthWest().lat(), bounds.getSouthWest().lng()];
      jQuery.ajax({
        url: '/rvillage/maps/get-data-within-lat-lng',
        data: {ids : ids, ne : ne, sw : sw, format : 'json'},//removed bounds as it wasn't needed
        dataType: 'json'
      }).done(function( data ) {
        console.log(data);
      });
    }
  }