Question

我使用下面的代码，在这些地方，我将使用地方信息服务针对当前位置显示附近的学校。我也有学校的数目，在下面的代码中给出了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);

            }
          }
        });
      });

    }
  }

Answer 1

对不起，这是ngZones的问题。当我们将函数称为“外部” angular时，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;
   });

如何使用JavaScript谷歌地图以HTML显示学校的长度

1 个答案: