Question

以下是我要做的事情：

使用google API对邮政编码或城市进行地理定位＆amp;州。地址参数的值来自表单字段。
将地理线插入同一表格中的隐藏字段
提交表格。

我玩过AMP-LIST和AMP-STATE以使google api url正常工作。我现在遇到的两个问题是将地理信息放入文本框然后提交。任何帮助将不胜感激。

这是我到目前为止所写的内容：

<amp-list id="geoCords" [src]="'https://maps.googleapis.com/maps/api/geocode/json?address=' + searchQuery +'&key=XXX'">
<form action-xhr="/locations/index.php" class="centered" id="locationSearch" method="get" target="_top">
    <h1>AMP-Locator Demo</h1>
    <input name="brand" value="ep" type="hidden" />
    <input name="mode" value="desktop" type="hidden" />
    <input name="pagesize" value="5" type="hidden" />
    <input name="latitude" value="{{geoCords.geometry.location.lat}}"  type="hidden" />
    <input name="longitude" value="{{geoCords.geometry.location.lng}}"  type="hidden" />
    <label for="q" hidden=""><span>Zip OR City &amp; State</span></label>
    <input id="q" name="q" placeholder="Zip OR City &amp; State" type="text"/>    
    <input class="" type="submit" value="GO" on="tap:setState(searchQuery:{{q}}"/>
</form>
</amp-list>

Answer 1

你非常接近。看起来您需要做的就是从放大器列表中取出<form>。

这是一个完全正常工作的演示（顺便说一下，有没有适用于放大器的jsfiddle？）：

<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
<script async src="https://cdn.ampproject.org/v0.js"></script>

  <amp-state id="geoState">
      <script type="application/json">
          {
              listSrc: "https://maps.googleapis.com/maps/api/geocode/json?key=AIzaSyA7HGfGmI5GHIsvQoLFSqf-Un6xfECk9CQ&address="
          }
      </script>
  </amp-state>

  <label for="q">Zip OR City &amp; State</label>
  <input id="q" name="q" placeholder="Zip OR City &amp; State" type="text" on="change:AMP.setState({geoState: { listSrc: 'https://maps.googleapis.com/maps/api/geocode/json?key=AIzaSyA7HGfGmI5GHIsvQoLFSqf-Un6xfECk9CQ&address=' + event.value}})" />

  <form action-xhr="//forms/blah" target="_top" id="geoform" method="post">
      <amp-list width="auto" height="50" src="https://maps.googleapis.com/maps/api/geocode/json?key=AIzaSyA7HGfGmI5GHIsvQoLFSqf-Un6xfECk9CQ&address=" [src]="geoState.listSrc" items="results" max-items="1">
          <template type="amp-mustache">
              <input name="latitude" value="{{geometry.location.lat}}" />
              <input name="longitude" value="{{geometry.location.lng}}" />
          </template>
      </amp-list>
      <input type="submit"/>
  </form>

AMP-LIST / AMP-BIND动态表格

1 个答案: