微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

我正在使用 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

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐