谷歌地图拖动ajax无法正常工作

时间:2014-03-18 08:46:52

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

我正在尝试获取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:这是未定义的 https://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/16/3/%7Bmain,places%7D.js 第28行。如果我关闭ajax,它不会抛出错误。谁能指出我错在哪里? 我正在使用mootools& jQuery in combination&当我评论ajax part& amp时没有错误我使用mootools延迟来延迟这个功能但没有用。提前谢谢。

1 个答案:

答案 0 :(得分:0)

我向ajax数据添加 bounce 值是一个愚蠢的错误,这会产生问题,因为它在为 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);
      });
    }
  }