Brian F爱
从专注于角图,Web技术以yobet英雄联盟及波特兰的Node.js的Google开发人员专家中学习。
广告 ·ultimatecourses.com.
用终极课程学习角度正确的方式

Angular 2 + yobet英雄联盟Google地图放置自动完成

在这篇简短的教程中,我将向您展示快速构建Angular 2 + Google地图放置自动完成应用程序。yobet英雄联盟

通过谷歌地图放置自动填充物yobet英雄联盟非常有用,因为它允许用户搜索地址或特定位置。我将使用Aggular Google地图(AGM)模块将AutoComplete API与Gooyobet英雄联盟gle Map相结合。

TL;博士

看看普利克:https://plnkr.co/edit/ldkdsj?p=preview.

入门

第一件事是安装Agulage Gyobet英雄联盟oogle地图模块以及yobet英雄联盟谷歌地图类型签字声明使用节点包管理器(NPM)文件:

$NPM.安装@ agm / core --save $NPM.安装@类型/ goyobet英雄联盟oglemaps --save-dev

接下来,修改你的@ngmodule.装饰者:

进口{agmcoremodule.}'@ agm / core';@ngmodule.{进口[agmcoremodule.托管{apikey.“你的钥匙在这里”图书馆[“地方”]}浏览器FormsModule.反应omformodule]宣言[应用程序]引导[应用程序]}出口appmodule.{}

审查上面的代码:

  • 首先,我们进口agmcoremodule.来自@ AGM /核心模块的类。
  • 在我们的这一点进口财产我们使用agmcoremodule.forrot()方法并指定位置库。
  • 你会注意到我也使用反应omformodule对于角度的新模型驱动的形式。

创建模板

对于本教程,我将在我的情况下设置样式和模板属性@零件装饰器配置。我建议您有一个外部SASS文件和外部HTML模板。让我们来看看@零件组态:

@零件{选择器'我的app'风格[`AGM-MAP {高度:300px;}`]模板` 

角2 +谷歌地图放置自动完成 <输入placeholder =“搜索位置”autocapitalize =“关闭”autocapitalize =“关闭“spellcheck =”关闭“type =”text“class =”form-control“#search [formcontrol] =”searchcontrol“> `}出口应用程序实施oninit.{}

几件事要注意:

  • 别忘了你必须为地图元素定义高度。在这种情况下,我将它设置为300px。
  • 对于模板,我正在使用一些最小的Bootstrap CSS样式来让事情看起来很好。
  • 我的输入元素使用命名的本地模板变量搜索。这是使用哈希符号(#)声明的,或者我本可以使用裁判前缀如ref-search.
  • 我的输入元素有单向数据绑定formcontrol.指导到searchControl.我的控制器中公开可用变量。我们会在片刻看这个。
  • 接下来,我正在实施agm-map.按照指令指令Angular Google地图模块的文档yobet英雄联盟。我将纬度绑定到我的控制器中名为的公共变量纬度,我对经度做同样的事情。我也在设置滚轮选择错误。然后我将缩放值绑定到我的放大我的控制器中的财产。
  • 我还包括一个标记,它将使用与地图的中心点相同的经度和纬度。

实施控制器

接下来,我们需要实施我们的控制器。让我们看看:

进口{Elementref.ngzone.oninit.viewchild.}'@ Angular / Core';进口{formcontrol.}'@ Angular / Forms';进口{}'yobet英雄联盟谷歌地图';进口{mapsapiloader.}'@ agm / core';出口应用程序实施oninit.{上市纬度;上市经度;上市searchControl.formcontrol.;上市放大;@viewchild.“搜索”上市searchelementref.Elementref.;构造函数私人的mapsapiloader.mapsapiloader.私人的ngzone.ngzone.{}ngoninit.{//设置谷歌yobet英雄联盟地图默认值这个放大=4.;这个纬度=39.8282;这个经度=-98.5795.;//创建搜索FormControl这个searchControl.=formcontrol.;//设置当前位置这个setCurrentPosition.;//加载自动完成这个mapsapiloader.加载然后=>{自动完成=yobet英雄联盟地图地点自动完成这个searchelementref.母语{类型[“地址”]};自动完成addListener.“place_changed”=>{这个ngzone.=>{//获得地点结果地点yobet英雄联盟地图地点placeresult=自动完成Gotelpace.;//验证结果如果地点几何===.未定义||地点几何===.空值{返回;}//设置纬度,经度和缩放这个纬度=地点几何位置拉特;这个经度=地点几何位置LNG.;这个放大=12.;};};};}私人的setCurrentPosition.{如果“地理位置”航海家{航海家地理位置GetCurrentPosition.位置=>{这个纬度=位置伙计纬度;这个经度=位置伙计经度;这个放大=12.;};}}}

首先,我导入必要的类:ngzone.oninit.viewchild.formcontrol.mapsapiloader.

在课程内,我们首先定义我们的公共变量来存储纬度经度放大和我们的searchControl.。接下来,我正在使用@viewchild.装饰人可以访问DOM输入元件。该@ViewChild.装饰器接受一个单个字符串,该字符串是元素或指令的选择器。在这种情况下,我参考本地模板变量#搜索。它装饰了变量searchelementref.,这是一个Elementref.到搜索输入。

接下来,我使用依赖注入(di)来注入mapsapiloader.ngzone.依赖关系。我们将使用它mapsapiloader.后来在里面ngoninit()加载Google地点API的方法。yobet英雄联盟该ngzone.服务使我们能够在角区或在我们的情况下执行异步操作,以在角区中显式运行功能。Angular的区域修补浏览器中的大部分异步API,在完成异步代码时调用更改检测。正如您所希望的角区域未修补Google Place自动完成的异步行为。yobet英雄联盟

现在,在里面ngoninit()方法我为此设置了一些初始值纬度经度放大。然后,我创建一个新formControl()实例为searchControl.。接下来我举行援助setCurrentPosition()方法,只需尝试在浏览器中使用地理定位API来将地图设置为用户的当前位置。如果你愿意,你可以忽略这个。

然后我使用加载()方法中的方法mapsapiloader.加载Google地点APyobet英雄联盟I。这返回一个promise对象,因此当这已经解决时,我们可以启动我们的谷歌上的自动完成。yobet英雄联盟此处的代码应该看起来熟悉Google可用的代码样本。yobet英雄联盟

注意:我是限制谷歌的结果,以使用yobet英雄联盟类型选项。如果要显示所有结果,只需删除此结果,或指定备用类型。

最后,我们在类型签字中使用胖箭头函数将事件处理程序附加到地点改变了我们的自动完成的事件。然后我们将我们的异步代码包装在内ngzone.run()方法。

文件对于ngzone.表示:

通过RUN运行函数允许您从角区外部执行的任务重新输入角区

在这内跑()方法我们将存储来自Google地图的数据返回,包括更新我们的地图的纬度和经度。yobet英雄联盟没有使用ngzone.run()方法对我们的变化纬度经度放大在另一个事件或异步操作触发更改检测之前,不会触发。

演示

这里有一个在亵渎的演示

Brian F爱

嗨,我是布莱恩。我对类型名称,Angular和node.js感兴趣我嫁给了我最好的朋友邦妮,我住在波特兰和我滑雪(很多)。