2017-01-13 2 views
0

セバスチャンの例を使ってGoogleマップを作成しました。マップを読み込むことができます。しかし、私の必要条件は、検索ボックスに入力した場所を検索してから、地図にマーカーを置くことです。私もその場所を検索することはできますが、それを地図で見つけることはできませんでした。スクロールすると地図が自動的に表示されます。以下は私のコードです。他の方法や他の例を知っているなら、私に提案してください。角度2のGoogleマップで直面する

  <div class="fieldMap"> 
        <sebm-google-map 
        [latitude]="lat" 
        [longitude]="lng" 
        [zoom]="zoom" 
        [disableDefaultUI]="true" 
        [zoomControl]="true" 
        [disableDefaultUI]="false" 
        (mapClick)="mapClicked($event)"> 

        <sebm-google-map-marker 
        *ngFor="let m of markers; let i = index" 
        [latitude]="m.lat" 
        [longitude]="m.lng" 
        [label]="m.label"> 
        </sebm-google-map-marker>     
      </sebm-google-map> 

、スクリプトの一部

getAddress(place:Object) { 
    this.markers = []; 
    var address = this.step1Data.map_address; 
    if (!address) return false; 
    var geocoder = new google.maps.Geocoder(); 
    var that = this; 

    geocoder.geocode({ 'address': address }, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      var location = results[0].geometry.location; 
      that.lat = location.lat(); 
      that.lng = location.lng(); 
      that.markers.push({ 
       lat: that.lat, 
       lng: that.lng, 
       label: 'A', 
       draggable: false 
      }) 
     } 
    }); 
} 

答えて

0

問題がタイムアウトしていたです。 setTimeoutで後でコードをプッシュすると、正しく動作します。

geocoder.geocode({ 'address': address }, function (results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      var location = results[0].geometry.location; 
      that.lat = location.lat(); 
      that.lng = location.lng(); 
     } else { 
      that.step1["gmapError"] = "Geocode was not successful for  the following reason: " + status; 
     } 
    }); 

    setTimeout(() => { 
      this.markers.push({ 
       lat: that.lat, 
       lng: that.lng, 
       label: 'A', 
       draggable: false 
      }); 
    }, 100); 
関連する問題