我的设备号

时间:2015-11-21 18:19:27

标签: angularjs

我收到Marker未定义且$ scope未定义错误。 我想通过从表中传递deviceid来获取latlong值。 我无法通过Angulrjs调用wcf服务 对于DeviceId以下,我的LatLong值(13.0357695,77.59702219999997)在我的表中

   

这是我的剧本

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html ng-app="RESTClientModule">
<head>
    <title>Google Map</title>
    <meta http-equiv="Content-Type" content="text/html; CHARSET=iso-8859-1">
    <!-- Bootstrap Core CSS -->

    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
    <%-- <script src="http://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"></script>
    <script src="http://localhost:65235/GmapService.svc/getmapdata"></script>--%>


    <script type="text/javascript">
        var app;
        var req;
        var markers;
        (function () {
            app = angular.module("RESTClientModule", []);
        })();
        app.controller("RESTClientController", function ($scope, RESTClientService) {
            $scope.lat = "0";
            $scope.lng = "0";
            $scope.markers = [];
            instance = this;
            instance.scope = $scope;
            $scope.gMapModel = { deviceID: '911314150053752' }

            req = $scope.gMapModel;

            var promiseGet = RESTClientService.get();


            promiseGet.then(function (pl) {
                var latlng = pl.data.LatLong;
                // alert(latlng);
                latlng = latlng.split(',');
                $scope.lat = latlng[0];
                $scope.lng = latlng[1];


            },
                      function (errorPl) {
                          $log.error('failure loading Employee', errorPl);
                      });


        });

        app.service("RESTClientService", function ($http) {
            //alert(req);

            this.get = function (result) {
                return          $http.post("http://localhost:65235/GmapService.svc/getmapdata", { "deviceID": "911314150055310" });
            };
        });

        markers = [

   {       "title": 'Bangalore',
       "lat": $scope.lat,
       "lng": $scope.lng,
       "description": 'Test'
   }

        ];

    </script>

    <script type="text/javascript">
        window.onload = function () {
            var mapOptions = {
                center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var infoWindow = new google.maps.InfoWindow();
            var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
            for (i = 0; i < markers.length; i++) {
                var data = markers[i]
                var myLatlng = new google.maps.LatLng(data.lat, data.lng);
                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title: data.title
                });
                (function (marker, data) {
                    google.maps.event.addListener(marker, "click", function (e) {
                        infoWindow.setContent(data.description);
                        infoWindow.open(map, marker);
                    });
                })(marker, data);
            }
        }
    </script>

THIS IS MY HTML WHERE I WANT TO GET LATLONG??
</head>
<body ng-controller="RESTClientController">
    <form id="form1" runat="server">
        <div>
            <div id="dvMap" style="width: 700px; height: 700px">
            </div>
        </div>
    </form>
</body>


</html>

1 个答案:

答案 0 :(得分:0)

您需要从控制器内部而不是google.maps.Map调用window.onload

HTML

<div ng-app="mapsApp" ng-controller="MapCtrl">
    <div id="map"></div>
</div>

JS

angular.module('mapsApp', []).controller('MapCtrl', function ($scope) {

    var mapOptions = {
        zoom: 4,
        center: new google.maps.LatLng(40.0000, -98.0000),
        mapTypeId: google.maps.MapTypeId.TERRAIN
    }

    $scope.map = new google.maps.Map(document.getElementById('map'),
       mapOptions);
});