时间戳

首页 > 解决方案 > 如何使用 javascript 谷歌地图以 HTML 格式显示学校的长度

angular - 如何使用 javascript 谷歌地图以 HTML 格式显示学校的长度

问题描述

我有以下代码，我在其中使用 Places Service 显示与当前位置相关的附近学校。我也有学校的数量，在下面的代码中给出了 20。现在我需要知道如何在 HTML 中显示这 20 个。

HTML 代码：

<div #map id="map"></div>
{{lengthOfSchools}}

JS代码：

 getSchoolsList() {
    var markers = [];
    let service = new google.maps.places.PlacesService(map);
    let originLat, originLng;
    if ('geolocation' in navigator) {
      navigator.geolocation.getCurrentPosition((position) => {
        originLat = position.coords.latitude;
        originLng = position.coords.longitude;
        this.getlocation = {
          origin: { latitude: originLat, longitude: originLng }
        };
        this.srcOriginLatitude = this.getlocation.origin.latitude;
        this.srcOriginLongitude = this.getlocation.origin.longitude;
        service.nearbySearch({
          location: { lat: this.srcOriginLatitude, lng: this.srcOriginLongitude },
          radius: 10000,
          type: ['school']
        }, (results, status) => {
          this.lengthOfSchools = results.length;
          console.log(this.lengthOfSchools); // displays 20
          if (status === google.maps.places.PlacesServiceStatus.OK) {


            for (var i = 0; i < results.length; i++) {
              var place = results[i];
              console.log(" Places... ", place);
              var placeLoc = place.geometry.location;
              var marker = new google.maps.Marker({
                map: map,
                position: place.geometry.location,
                icon: './assets/images/marker_active.png',
              });
              marker.setMap(map);

            }
          }
        });
      });

    }
  }

标签： angulargoogle-mapsgoogle-places-api

解决方案

抱歉，这是ngZones的问题。当我们在“外部”角度调用函数时，Angular 不知道何时必须重新绘制。

我想你需要做一些喜欢

constructor(private zone: NgZone) {} //inject ngZone

...
service.nearbySearch({
  ...
}(results, status) => {
   //replace the line
   //   this.lengthOfSchools = results.length;
   //by
   this.zone.run(() => {
     this.lengthOfSchools = results.length;
   });

推荐阅读