Google地图API不适用于angular JS$scope.data输入

Google API for Map is not working with angular JS $scope.data Inputs

本文关键字:scope data 输入 JS angular 地图 API 不适用 适用于 Google      更新时间:2023-09-26

我有以下角度脚本。我面临着在http请求的成功方法中收到的数据的数据类型的问题。已接收的数据用于使用javascript在谷歌地图上显示当前位置。问题是,位置标记和地图没有显示接收到的经度和纬度。但是,如果我硬编码并传递静态值(对静态输入进行注释),则会显示地图和位置标记。请帮我解决这个问题。提前非常感谢。

var app = angular.module("myApp", []);
app.controller("myCtrl",function ($scope,$rootScope,$http) {    
      var city = 'Mumbai';
      $scope.uploadResultFinal= false;
      $http({
          method: 'POST', 
          url: ''HomeServlet2',
          headers: {
             'Content-Type': 'application/json'
          },   
          params: {
             City:city
          }
      });
      .success(function(data) {
          console.log(angular.toJson(data));                    
          $scope.data1= data.Addresses;
          $scope.latlang =[$scope.data1[2].Latitude,$scope.data1[2].Longitude];
          $scope.uploadResultFinal= true;
      })
      .error(function(data, status, header, config) {
          console.log('Error');
      });

      $scope.$watch('uploadResultFinal', function() {
          alert($scope.latlang[0]);
          alert($scope.latlang[1]);
          var l1 =$scope.latlang[0]; 
          var l2 =$scope.latlang[1]; 
          /* static values are commented.*/
          /*
          var l1= "19.72";
          var l2= "72.63";
          */
          var myCenter=new google.maps.LatLng(l1,l2);

          function initialize() {
              var mapProp = {
              center:myCenter,
              zoom:5,
              mapTypeId:google.maps.MapTypeId.ROADMAP
          };
          var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
          var marker=new google.maps.Marker({
            position:myCenter,
            animation:google.maps.Animation.BOUNCE
            });
          marker.setMap(map);
          var infowindow = new google.maps.InfoWindow({
            content:"You Are Here!"
          });
          infowindow.open(map,marker);
     }
        google.maps.event.addDomListener(window, 'load', initialize);

},true); 
   }
);

只是猜测,您可以尝试添加$scope$apply()在成功中&错误函数。或者最好在$http中添加.finally()。

.finally(function(){
    $scope.$apply();
})

希望能有所帮助。