使用Google地图+地点库获取“太多递归”错误

时间:2013-08-07 00:36:34

标签: javascript google-maps-api-3

我有一个用Google地方库(demo实现谷歌地图的表格,作为一个旁边,在JSFiddle,如果我添加gmaps.js作为脚本参考它将无法工作,但如果我添加它作为HTML部分中的脚本元素,完全相同的脚本工作正常),如下所示:

<form action="#" method="post">
  <table class='Information table table-bordered'>
    <caption>Information</caption>
    <colgroup>
      <col width='100' />
      <col/>
    </colgroup>
    <tbody>
      <tr>
        <th>Location</th>
        <td>
          <div class="input-append">
            <input type="text" name="Lat" value="37.771424" />
            <span class="add-on">lat.</span>
          </div>
          <div class="input-append">
            <input type="text" name="Lng" value="-122.41332799999998" />
            <span class="add-on">lng.</span>
          </div>
        </td>
      </tr>
      <tr>
        <th>Map</th>
        <td>
          <div id="panel">
            <form class="form-search">
              <input type="text" class="input-medium search-query" autocomplete="off" id="target" placeholder="Search Box"/>
            </form>
          </div>
         <div id="ScavengerMap"></div>
        </td>
      </tr>
    </tbody>
  </table>
</form>

使用以下JavaScript:

var input = document.getElementById('target'),
  searchBox = new google.maps.places.SearchBox(input),
  map = new GMaps({
    div: '#ScavengerMap',
    lat: 37.771424,
    lng: -122.41332799999998
  });
google.maps.event.addListener(searchBox, 'places_changed', function () {
  var places = searchBox.getPlaces(),
    location;
  if (places.length > 0) {
    location = places[0].geometry.location;
    map.removeMarkers();
    map.setCenter(location.jb, location.kb);
    map.addMarker({
      lat: location.jb,
      lng: location.kb,
      title: "Slim\'s",
      draggable: true,
      dragend: function (e) {
          var point = e.latLng;
          $('input[name=Lat]').val(point.lat());
          $('input[name=Lng]').val(point.lng());
      }
    });
    $('input[name=Lat]').val(location.jb);
    $('input[name=Lng]').val(location.kb);
  }
});

map.addMarker({
  lat: 37.771424,
  lng: -122.41332799999998,
  title: "Slim\'s",
  draggable: true,
  dragend: function (e) {
    var point = e.latLng;
    $('input[name=Lat]').val(point.lat());
    $('input[name=Lng]').val(point.lng());
  }
});

当您在搜索框中输入内容时(例如“Slim”),您会看到Google商家信息库中的一系列建议。如果你选择一个,它应该在那个位置绘制一个标记,但我得到这两个错误:

too much recursion
[Break On This Error]   

...))};sa(fg[E],function(a){var b=this.ua,c=Sf(a);b[c]&&(delete b[c],O[m](this,vf,a...

{main,places}.js (line 26)
too much recursion
[Break On This Error]   

....route=function(a,b){Mf("directions",function(c){c.pi(a,b,!0)})};function P(a,b,...

我正在努力解决的问题是为什么。此演示中的代码是我项目中代码的子集,但两者都存在相同的问题。我找不到任何有关Google地方信息库或Google Maps API中断的信息,而且我们仍然会在2周前(我写这篇文章的时候)完成相同的代码。关于我如何能够至少解决问题的任何想法?

2 个答案:

答案 0 :(得分:2)

看起来我想通了。似乎已重命名属性.jb.kb。获取latlng的正确方法是在.lat()对象上调用.lng()places[0].geometry.location。我错误地过于密切关注一个例子:)

答案 1 :(得分:1)

您也可以查看有关缩放设置的信息。 如果您没有缩放设置编号,则会出现此问题。