6

我有一个表单，它使用 Google 地方库（演示，顺便说一下，在 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's”）时，您会看到一组来自 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 Places Library 或 Google Maps API 中断的任何信息，更奇怪的是，这个完全相同的代码早在 2 周前（我写它的时候）就可以工作。关于如何至少隔离问题的任何想法？

4

2 回答 2

2

看来我想通了。似乎属性.jb并.kb已重命名。获取latand的正确方法是在对象上lng调用.lat()and 。我错误地遵循一个例子太紧了:).lng()places[0].geometry.location

于 2013-08-07T00:42:27.967 回答
1

您也可以查看缩放设置。如果您没有用于缩放设置的数字，则会出现此问题。

于 2014-10-24T03:22:32.000 回答