Question

我正在搜索谷歌自动完成搜索地址聚合物元素，但我无法找到，所以我决定写我自己的。但是我把google.maps作为对象，但google.maps.places未定义在控制台下面是我的示例代码

<script src="http://maps.googleapis.com/maps/api/js?libraries=places"></script>
<polymer-element name="google-placesearch">
<link rel="import" href="../../bower_components/polymer/polymer.html">
    <template>
    <style>

   </style>
     <input id="autocomplete" placeholder="Enter your address"
            type="text"></input>
    </template>
    <script>
    Polymer('google-placesearch', {
    ready: function() {
      // this.autocomplete= new google.maps.places.Autocomplete(this.$.autocomplete)
      console.log(this.$.autocomplete);

       autocomplete=new google.maps.places.Autocomplete(this.$.autocomplete);
     // console.log(autocomplete);


      },

    });
    </script>
</polymer-element>

Answer 1

有一个google-map-search元素here，虽然它似乎没有使用google.maps.places.Autocomplete API。

您还要加载谷歌地图库，如下所示：https://github.com/GoogleWebComponents/google-map/blob/master/google-map-directions.html#L44。请注意，有一个google-maps-api组件用于加载库并使时间正确。

Answer 2

我使用maps api

创建了自己的google-location-search元素

<link rel="import" href="../../bower_components/polymer/polymer.html">
    <link rel="import" href="../../bower_components/google-apis/google-maps-api.html">
    <polymer-element name="google-place-search" attributes="location" >

    <template>
    <style>
 .form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555555;
background-color: #ffffff;
background-image: none;
border: 1px solid #cccccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
   </style>
   <google-maps-api apiKey="{{apiKey}}" version="{{version}}" on-api-load="{{mapApiLoaded}}" libraries="{{libraries}}"></google-maps-api>
     <input id="autocomplete" placeholder="Enter your address first time"
            type="text" class="form-control"></input>
    </template>
    <script>
    Polymer('google-place-search', {
    autocomplete:null,
    version: '3.exp',
    apiKey: null,
    libraries: "places",
    mapApiLoaded: function() {
    this.autocomplete= new google.maps.places.Autocomplete(this.$.autocomplete);
    google.maps.event.addListener(this.autocomplete, 'place_changed', function() {
     var place = this.autocomplete.getPlace();
     this.location=place.formatted_address
    }.bind(this));
    } 

    });
    </script>
</polymer-element>

Google自动填充地址和搜索字词Polymer元素

2 个答案: