加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

使用Angular为Google地方信息自动填充指定起始位置

发布时间:2020-12-17 18:11:32 所属栏目:安全 来源:网络整理
导读:我正在使用 AGM提供的带有Angular的Google Places Autocomplete API.它运行良好,但我无法手动设置我的起始位置.这意味着,如果我坐在洛杉矶的电脑前,我希望能够告诉API返回结果,就像我在波士顿一样.我认为这可以在谷歌的基础上实现,基于 their documentation,
我正在使用 AGM提供的带有Angular的Google Places Autocomplete API.它运行良好,但我无法手动设置我的起始位置.这意味着,如果我坐在洛杉矶的电脑前,我希望能够告诉API返回结果,就像我在波士顿一样.我认为这可以在谷歌的基础上实现,基于 their documentation,但我还没有弄清楚如何在我正在使用的Angular组件中做到这一点.

任何人都有一个提示如何让这个工作?以下是我的组件的相关部分.谢谢!

setGoogleMapsAutocomplete() {
    this.mapsAPILoader.load().then(() => {
      let autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement,{
        types: ["address"]
      });
      autocomplete.addListener("place_changed",() => {
        this.ngZone.run(() => {
          let place = autocomplete.getPlace();

          this.address = '';

          for (var i = 0; i < place.address_components.length; i++)
          {
            var addressType = place.address_components[i].types[0];

            if (this.hasOwnProperty(addressType)) {
              let nameLength = addressType == 'administrative_area_level_1' ? 'short_name' : 'long_name';

              this[addressType] = place.address_components[i][nameLength];
            }
          }
          this.error = false;
        });
      });
    });
  }

解决方法

显然你一直在使用这个例子 https://brianflove.com/2016/10/18/angular-2-google-maps-places-autocomplete/中的代码

您是否尝试添加位置键并将lat,lon作为值传递给您传递的对象作为google.maps.places.Autocomplete的第二个参数.所以应该是这样的:

let autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement,{
        types: ["address"],radius: 50000,location: `${this.latitude},${this.longitude}`
    });

我为你创建了一个stackblitz沙箱https://stackblitz.com/edit/angular-google-maps-demo-qwrngk

随意玩,但不要忘记更改API密钥,因为似乎超出了我的配额.

UPDATE

您还需要设置要返回位置结果的半径.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读