我正在尝试使用http://www.yelp.com/之类的功能,当用户拖动地图时,它将调用ajax并收集经纬度,经纬度并填充地图标记。

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

  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,并且在评论ajax part时没有错误,并且我已经使用mootools delay来延迟此功能,但是没有用。提前致谢。

最佳答案

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

关于javascript - 谷歌 map 拖动ajax无法正常工作,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/22474248/

10-12 00:20
查看更多