Question

我想在谷歌地图中显示一个标记。 static lat long marker我能够显示但是我无法将动态lat long值传递给函数。

如何将{{names.lat}}，{{names.longitude}}传递给该函数。表明我可以获得动态标记。

我使用角度js和webapi来获得动态坐标。

的响应数据

{"id":232,"lat":"17.4462","longitude":"78.3823","deviceid":"1","updatedDate":"2018-04-09T14:59:27.76","DeviceTime":null}

码

<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
       <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script>
        var app = angular.module('ngApp', []);
        app.controller('myCtrl', function ($scope, $http) {
            $scope.marker = null;
            $scope.map = null;

            function initMap() {
                $scope.map = new google.maps.Map(document.getElementById('map'), { zoom: 4 });
            }
            $http.get('url')
                .then(function (response) {
                    console.log(response)
                    $scope.names = response;
                    $scope.marker = new google.maps.Marker(
                        {
                            map: $scope.map,
                            position: new google.maps.LatLng({ $scope.names.lat, $scope.names.longitude }),
                            title: 'Hello World!'
                        }
                    );
                });
        });
    </script>
</head>
<body ng-app="ngApp" ng-controller="myCtrl">
    <div id="map"></div>
    <script
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDci4vYApOxVdKqwlpXSv9h77AcWbNuzmQ&callback=initMap">
    </script>
</body>

error

Answer 1

你可以在控制器中试试这个：

$scope.$watch('names', function() {
    marker.setPosition(new google.maps.LatLng($scope.names.lat, $scope.names.lng));
});

Answer 2

请勿在该功能中使用ChangeDetectorRef.detectChanges()，而是使用$watch代替$scope variables和map

markers

Answer 3

使用web api和angular js制作谷歌地图标记的代码

<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style>
        #map {
            height: 100%;
        }
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
    <script 
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDci4vYApOxVdKqwlpXSv9h77AcWbNuzmQ">
    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script>
            var app = angular.module('ngApp', []);
            app.controller('myCtrl', function ($scope, $http) {
            $scope.marker = null;
            $scope.map = null;
            $scope.lat = null;
            $scope.longitude = null;
            function initMap() {
                $scope.map = new google.maps.Map(document.getElementById('map'), { zoom: 14, center: { lat: 17.4462, lng: 78.3823}});
            }
            $http.get('api url')
                .then(function (response) {
                    console.log(response.data.longitude)
                    $scope.names = response.data;
                    $scope.lat = response.data.lat;
                    $scope.longitude = response.data.longitude;
                    $scope.marker = new google.maps.Marker(
                        {
                            map: $scope.map,
                            position: new google.maps.LatLng($scope.lat, $scope.longitude),
                            title: 'Tracker'
                        }
                    );
                });
            initMap();
        });
    </script>
</head>
<body ng-app="ngApp" ng-controller="myCtrl">
    <div id="map"></div>
  </body>

如何从角度js传递javascript函数中的动态lat long值

3 个答案: