angularjs ng-map会自动关注我的位置,看似没有理由

时间:2017-02-22 20:03:59

标签: angularjs google-maps ng-map

我在我的网络应用中使用角度ng-map。我构建了一个函数,它将获取所选用户的地址,在那里放置一个标记,然后放大它。但是,如果我不使用setTimeout来关注我的标记,地图将自动捕捉到我的地理位置,尽管事实上我不会在我的应用程序中的任何地方使用geolocate。有谁知道这是怎么回事?为什么会这样?

控制器:

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>

2 个答案:

答案 0 :(得分:1)

您正试图在控制器完成之前设置一个位置,因此值在$ digest循环中没有更新。基本上你过早地设置这些值。在您可以利用$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

答案 1 :(得分:0)

原来我的shape中有current position

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

当我删除它时,一切都解决了