Angular 9 Google Maps API Place自动完成 [英] Angular 9 Google Maps API Place Autocomplete

问题描述

我有一个Angular 9(刚从8迁移过来)，我需要使用Google Places API(我有一个API密钥)来实现地址自动填充，我可以使用@ angular/googlemaps库显示地图，但是我可以不能使自动填充功能正常工作...

I have a Angular 9 (just migrated from 8), I need to use the Google Places API (I have a API key) for a Address Autocomplete, I can show the map with the @angular/googlemaps library but I can't make the Autocomplete work...

我尝试使用 https://developers.google. com/maps/documentation/javascript/examples/places-autocomplete 代码，但我无法使用javascript ...或尝试使用@agm/core和@angular-material-extensions/google-maps-autocomplete，但也无法正常工作. ..

I tried to use the https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete code, but I can't make angular to use the javascript... or try to use the @agm/core and @angular-material-extensions/google-maps-autocomplete, also not working...

我最好的选择是尽可能使用其本机，但是我不知道如何在Angular中仅使用javascript ...有一个像地图一样的本机角组件? o如何实现Google在演示中使用的javascript方法?

My best bet is to use it as native as possible, but I don't know how to use just javascript in Angular... there is a angular native component like the maps? o how can I implement the javascript way that Google uses in the demos?

推荐答案

我发布了一个针对angular 8+(经过测试)应用程序的小型angular指令.如果您不想使用google提供的默认下拉菜单，它将以编程方式包装google place API以提供完整的集成.它还处理输入"消息.键，以自动选择下拉的第一个结果.

I have released a small angular directive for angular 8+ (tested) applications. It wraps google place API programmatically to provide complete integration if you don't want to use the default dropdown provided by google. It also handle "Enter" key to select first result of dropdown automatically.

您可以在此处进行演示: https://github.com/vlafranca/ngxAutocomPlace然后在这里安装npm: https://www.npmjs.com/package/ngx -autocom-place

You can check it out here for demo : https://github.com/vlafranca/ngxAutocomPlace And npm here for install : https://www.npmjs.com/package/ngx-autocom-place

这篇关于Angular 9 Google Maps API Place自动完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！