谷歌地图自动完成与材料设计答案

【问题标题】：Google Maps autoComplete with material design谷歌地图自动完成与材料设计
【发布时间】：2015-07-28 06:29:15
【问题描述】：

我有一个关于在 Material Design 中实现谷歌地图自动完成功能的问题：

<md-autocomplete flex="" md-no-cache="ctrl.noCache" md-selected-item="ctrl.selectedItem" md-search-text="ctrl.searchText" md-items="item in ctrl.querySearch(ctrl.searchText)" md-item-text="item.display" md-floating-label="Favorite state">
    <span md-highlight-text="ctrl.searchText">{{item.display}}</span>
</md-autocomplete>

Angular Material autocomplete | Google Maps autocomplete

如何在谷歌地图自动完成（角度）中使用材料设计的自动完成？

提前致谢。

我找到了这个解决方案：我只覆盖 css 属性：

/*maps autocomplete*/
.pac-item{
    font-family:RobotoDraft,Roboto,'Helvetica Neue',sans-serif !important;
    font-weight: 300 !important;
    color: rgb(33,33,33) !important;
    line-height: 40px !important;
    /*font-weight: 800;*/
}

.pac-item-query{
    font-family:RobotoDraft,Roboto,'Helvetica Neue',sans-serif !important;
    font-size: 16px;
}

.pac-item:hover{
    background-color: #eeeeee !important;
    transition: background .15s linear;
}

.pac-container{
    color: rgb(33,33,33) !important;
    background-color: #fafafa;
    /*font-weight: 800;*/
}

.pac-icon, .pac-icon-marker{
    background: none !important;
    background-image: none !important;
}

【问题讨论】：

如果你想整合它们以获得复选框和/或单选按钮等元素，这里有一个很好的参考：plnkr.co/edit/GF3nM3XfYX9El2w11pGo?p=preview

标签： javascript css google-maps google-maps-api-3 material-design

【解决方案1】：

我们对我们的应用程序有完全相同的要求，并且我们确实设法以“正确”的方式做到这一点，所以在这里您可以使用 md-autocomplete 指令（使用 Angular Material），利用 @来自 Google 的 987654322@。

查看：

<md-autocomplete md-no-cache="true"
                 md-selected-item="vm.selectedItem"
                 md-search-text-change="vm.search(vm.searchText)"
                 md-search-text="vm.searchText"
                 md-items="item in vm.search(vm.searchText)"
                 md-item-text="item"
                 md-min-length="0"
                 placeholder="Type your address">
  <md-item-template>
    <span md-highlight-text="vm.searchText" md-highlight-flags="^i">{{item}}</span>
  </md-item-template>
  <md-not-found>
    No matches found for "{{vm.searchText}}".
  </md-not-found>
</md-autocomplete>

控制器：

vm.search = search;

function search(address) {
  var deferred = $q.defer();
  getResults(address).then(
    function (predictions) {
      var results = [];
      for (var i = 0, prediction; prediction = predictions[i]; i++) {
        results.push(prediction.description);
      }
      deferred.resolve(results);
    }
  );
 return deferred.promise;
}   

function getResults(address) {
  var deferred = $q.defer();
  vm.gmapsService.getQueryPredictions({input: address}, function (data) {
    deferred.resolve(data);
  });
  return deferred.promise;
}

请记住在您的控制器激活时创建服务：

vm.gmapsService = new google.maps.places.AutocompleteService();

并在您的主应用程序文件中添加 javascript 依赖项：

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KE‌Y&libraries=places"></script>

所有虚拟机。东西是因为我们使用John Papa Styleguide

希望它对你有用！

【讨论】：

vm.search = 搜索；您的帖子中缺少那一行。新手将花费大量时间来弄清楚这一点。
感谢您的解决方案。
如果有人正在努力让它工作并且不知道虚拟机 - 您必须将您的控制器指定为虚拟机...例如 autoCompleteController 作为虚拟机
伟大的贡献！请注意，现在 google 地方还需要一个 API 密钥 <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
@LeoLozes 在 Angular 4 中在控制器激活时创建服务意味着什么？我不熟悉 AngularJS 术语。什么是控制器？你能帮忙吗？

【解决方案2】：

是的，我认为你在做某事。谷歌自动完成在文档和绑定到它们的事件处理程序的顶部（或底部？抱歉我不记得）有自己的 DOMrendered。

最简单的方法是覆盖 css 规则以满足您的要求。但如果这不起作用，您可以随时使用 google geocode API

https://developers.google.com/maps/documentation/geocoding/ 与 Material design md-autocomplete 指令一起使用。您可以灵活地使用来自 restful API 的 json 格式的地理数据，并使用它做任何您想做的事情。但代价是您失去了一些能力（例如，您无法根据当前位置对匹配进行排序，您必须使用区域或城市手动限制它们）。

【讨论】：