Как отобразить длину школ в HTML, используя JavaScript карты Google - PullRequest
Новая
       30

Как отобразить длину школ в HTML, используя JavaScript карты Google

0 голосов
/ 01 марта 2019

У меня есть код ниже, где я показываю близлежащие школы относительно текущего местоположения, используя Службу мест.У меня есть счет школ, который дает 20 в приведенном ниже коде.Теперь мне нужно знать, как отображать эти 20 в HTML.

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);

            }
          }
        });
      });

    }
  }

1 Ответ

0 голосов
/ 01 марта 2019

Извините, это проблема 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;
   });
...