谷歌地图拖动ajax不起作用答案

【问题标题】：google maps drag ajax not working谷歌地图拖动ajax不起作用
【发布时间】：2014-04-23 19:57:53
【问题描述】：

我正在尝试获得像 http://www.yelp.com/ 这样的功能，当用户拖动地图时，它会调用 ajax 并收集 lat、lng 并填充地图标记。

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

  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);
      });
    }
  }

现在的问题是，当我拖动地图时，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 延迟来延迟此功能但不起作用。提前致谢。

【问题讨论】：

你能创建一个jsfiddle吗？ jsfiddle.net
我无法创建 jsfiddle，因为分离这部分 js 会很困难，但如果你愿意，我可以给你网站的网址，谢谢
我认为我无法访问您的网站，因为我有防火墙问题。 jsfiddle 是我可以妥协的东西。无论如何，您不必在那里加载完整的代码，只需展示您的问题的相关代码就足够了
@dreamweiver 此代码负责整个执行中断并生成 js 异常。如果您需要凭据，我可以为您提供。谢谢
是的，请提供所需的凭据，我会尝试

标签： javascript jquery ajax google-maps google-maps-api-3

【解决方案1】：

这是一个愚蠢的错误，我向 ajax 数据添加了 bounce 值，这会造成问题，因为当它为 @987654323 调用 toString 时@ value 发生错误 bounce value 不是必需的

  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);
      });
    }
  }

【讨论】：