angularjs ng-mapは一見無意識のうちに自分の位置に自動的にフォーカスします

Question

ウェブアプリケーションで角度ng-mapを使用しています。私は選択されたユーザーのアドレスを取得し、そこにマーカーを置いてからズームインする機能を構築しました。しかし、setTimeoutを私のマーカーに集中させないと、私のアプリケーションのどこにでもgeolocateを使用しないにもかかわらず、マップは自動的に私のgeolocationにスナップします。誰がどのように/なぜこれが起こるか知っていますか？

コントローラー：

NgMap.getMap({id:'map'}).then(function(map) { 
      console.log('map', map); 
      vm.map = map; 
      //GEOCODER 
      var patientLat; 
      var patientLon; 
      var geocoder = new google.maps.Geocoder(); 
      geocoder.geocode({ "address": vm.myData.addressHome + ' ' + vm.myData.addressCity + ' ' + vm.myData.state + ' ' + 'USA'}, function(results, status) { 
       if (status == google.maps.GeocoderStatus.OK && results.length > 0) { 
        var location = results[0].geometry.location; 
        patientLat  = location.lat(); 
        patientLon  = location.lng(); 
       console.log("the patient is located at " + patientLat + " " + patientLon); 
       vm.patientLocation = [ 
        { 
        "patientLat" : patientLat 
        , "patientLon" : patientLon 
        } 
       ] 
       setTimeout(function(){ 
        patientPos(patientLat, patientLon); 
       }, 2000) <---------- here is the timeout i need 

       } 
      }); 
     }); 

     function patientPos(patientLat, patientLon) { 
      console.log(patientLat); 
      console.log(patientLon); 
      var bounds2 = new google.maps.LatLngBounds(); 
      var latLng2 = new google.maps.LatLng(patientLat, patientLon); 
      bounds2.extend(latLng2); 
      vm.map.fitBounds(bounds2); 
      vm.map.setZoom(10); 
     } 

HTML

<ng-map 
     id="map" 
     scrollwheel="false" 
     > 

     <marker 
     ng-repeat="q in vm.patientLocation" 
     position="{{q.patientLat}}, {{q.patientLon}}" 
     icon="{ 
      url:'app/assets/img/patienticon.png', 
      scaledSize:[30,30] 
     }" 
     id="lkj98" 
     ></marker> 

     <marker 
     ng-repeat="p in locatorGridData track by $index" 
     position="{{p.Location.Lat}}, {{p.Location.Long}}" 
     icon="{ 
      url:'app/assets/img/placeholder.png', 
      scaledSize:[30,30] 
     }" 
     id="{{p.id}}" 
     on-click="vm.showDetail(p)" 
     class="markers" 
     ></marker> 
     <shape id="circle" name="circle" centered="true" 
     stroke-color='#bc1212' stroke-opacity="0.8"stroke-weight="2" 
     center="current-position" radius={{vm.selectedRadius}} editable="false" ></shape> 
     <info-window id="infoWindow" visible-on-marker="lkj98yuih"> 
     <div ng-non-bindable=""> 
      <div class="practice-name">{{vm.p.Location.OrgName}}</div> 
      <div class="name-specialty">{{vm.p.Provider.firstName}} {{vm.p.Provider.lastName}}, {{vm.p.Provider.speciality}}</div> 
      <div class="other-text-for-info-window"> 
      {{vm.p.Location.Address1}}<br> 
      {{vm.p.Location.City}}, {{vm.p.Location.State}}<br> 
      {{vm.p.Location.Zip}} 
      </div> 
     </div> 
     </info-window> 
    </ng-map> 

Answer 1

あなたは値が角度のサイクルをダイジェスト$に更新していないので、コントローラが終了した前の位置を設定しようとしています。基本的には、これらの値をあまりにも早く設定しています。すぐ後にレンダリングするには、$scope.$$postdigestメソッドを利用できます。代わりにあなたができるタイムアウトの

：

$scope.$$postDigest(function(){ 
patientPos(patientLat, patientLon); 
}) 

または$timeout方法：

$timeout(function(){ 
    patientPos(patientLat, patientLon); 
},0,false); 
//Run immediately after digest (0 ms after) and do not trigger another digest cycle 

すでに含まあなたのコントローラで$scopeまたは$timeoutを得ていると仮定。

Answer 2

は、すべての

を解決した、私はそれを削除したときに、それ

<shape id="circle" name="circle" centered="true" 
    stroke-color='#bc1212' stroke-opacity="0.8"stroke-weight="2" 
    center="current-position" radius={{vm.selectedRadius}} editable="false" ></shape> 

でcurrent positionを持っていたshapeを持っていたが判明します