我正在尝试使用带有AngularJS的Google Map获取当前位置。 这是我的代码： -
angular.module('indexAngularApp', ['uiGmapgoogle-maps'])
.controller('mapsController', function($scope, $http) {
//this is default coordinates for the map when it loads for first time
var options = {
enableHighAccuracy: true
};
navigator.geolocation.getCurrentPosition(function(pos) {
$scope.map = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
$scope.map.center.latitude = new google.maps.LatLng(pos.coords.latitude);
$scope.map.center.longitude = new google.maps.LatLng(pos.coords.longitude);
$scope.map.center.zoom = 15;
//$scope.position.latitude = 28.699955;
//$scope.position.longitude = 77.098159;
//var a = $scope.position.latitude;
//var b = $scope.position.longitude;
//console.log(JSON.stringify($scope.map));
//$scope.map.center.latitude = $scope.position.latitude;
//$scope.map.center.longitude = data.data.Long;
// $scope.map =
//{
// center:
// {
// latitude: a,
// longitude: b
// },
// zoom: 15
//}
},
function(error) {
alert('Unable to get location: ' + error.message);
}, options);
$scope.markers = [];
$scope.locations = [];
//to get all the locations from the server
$http.get('http://localhost:4582/Api/NewCompWebAPI').then(function(data) {
$scope.locations = data.data;
}, function() {
alert('Error');
});
//service that gets makers info from server
$scope.ShowLocation = function(locationID) {
$http.get('/home/GetMarkerData', {
params: {
locationID: locationID
}
}).then(function(data) {
$scope.markers = [];
$scope.markers.push({
id: data.data.LocationID,
coords: {
latitude: data.data.Lat,
longitude: data.data.Long
},
title: data.data.title, //title of the makers
address: data.data.Address, //Address of the makers
image: data.data.ImagePath //image --optional
});
//set map focus to center
$scope.map.center.latitude = data.data.Lat;
$scope.map.center.longitude = data.data.Long;
}, function() {
alert('Error'); //shows error if connection lost or error occurs
});
}
//Show or Hide marker on map using options passes here
$scope.windowOptions = {
show: true
};
})
//mapsController Ends Here<style>input {
padding: 5px;
border: 1px solid #A5A5A5;
}
input.ng-dirty.ng-invalid {
border: 1px solid red;
background-color: rgb(255, 244, 244);
}
.error {
color: red;
}
.angular-google-map-container {
height: 300px;
box-shadow: 2px 2px 3px 3px lightgrey;
}
.angular-google-map {
width: 80%;
height: 100%;
margin: auto 0px;
}
</style><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.4/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyD7d5zEqURlPCFVM_NcsHLGSms_Pnu4-M4"></script>
<script src="//rawgit.com/angular-ui/angular-google-maps/2.0.X/dist/angular-google-maps.js"></script>
<div ng-app="indexAngularApp">
<!--Div for mapsController Upload Started-->
<div class="col-md-12">
<div ng-controller="mapsController">
<!--It displays the markers links-->
<div class="position">{{map.center}}</div>
<div class="maps">
<!-- Add directive code (gmap directive) for show map and markers-->
<ui-gmap-google-map style="box-shadow:2px 2px 2px 2px lightgrey; width:100%" center="map.center" zoom="map.zoom">
<ui-gmap-marker ng-repeat="marker in markers" coords="marker.coords" options="marker.options" events="marker.events" idkey="marker.id">
<ui-gmap-window options="windowOptions" show="windowOptions.show">
<div style="max-width:200px">
<div class="header"><strong>{{marker.title}}</strong></div>
<div id="mapcontent" class="container">
<p>
<img ng-src="{{marker.image}}" class="img-responsive" style="width:100%; height:200px" />
<div>{{marker.address}}</div>
<b>No of Customers:</b>
</p>
</div>
</div>
</ui-gmap-window>
</ui-gmap-marker>
</ui-gmap-google-map>
</div>
<hr />
<div class="locations">
<ul>
<li class="text-success" ng-repeat="l in locations" ng-click="ShowLocation(l.UniqueName)"><a href="#">{{l.UniqueName}}</a></li>
</ul>
</div>
</div>
</div>
<!--Div for mapsController Upload Ended-->
<div class="clearfix"></div>
现在问题是我无法获得设备的当前纬度和经度。任何人都可以帮我这个吗？
答案 0 :(得分：1)
最后我刚刚更改了IndesAngular.js文件： -
angular.module('indexAngularApp', ['uiGmapgoogle-maps'])
.controller('mapsController', function ($scope, $http) {
//this is default coordinates for the map when it loads for first time
var options = {
enableHighAccuracy: true
};
navigator.geolocation.getCurrentPosition(function (pos) {
$scope.position = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
$scope.map = {
center:
{
latitude: pos.coords.latitude,
longitude: pos.coords.longitude
},
zoom:17
};
//console.log(JSON.stringify($scope.map));
},
function (error) {
alert('Unable to get location: ' + error.message);
}, options);
//$scope.map =
// {
// center:
// {
// latitude: 28.6315,
// longitude: 77.6315
// },
// zoom: 16
// }
$scope.markers = [];
$scope.locations = [];
//to get all the locations from the server
$http.get('http://localhost:4582/Api/NewCompWebAPI').then(function (data) {
$scope.locations = data.data;
}, function () {
alert('Error');
});
//service that gets makers info from server
//$scope.ShowLocation = function (locationID) {
// $http.get('/home/GetMarkerData',
// {
// params:
// {
// locationID: locationID
// }
// }).then(function (data) {
// $scope.markers = [];
// $scope.markers.push
// ({
// id: data.data.LocationID,
// coords:
// {
// latitude: data.data.Lat,
// longitude: data.data.Long
// },
// title: data.data.title, //title of the makers
// address: data.data.Address, //Address of the makers
// image: data.data.ImagePath //image --optional
// });
// //set map focus to center
// $scope.map.center.latitude = data.data.Lat;
// $scope.map.center.longitude = data.data.Long;
// }, function () {
// alert('Error'); //shows error if connection lost or error occurs
// });
//}
//Show or Hide marker on map using options passes here
$scope.windowOptions =
{
show: true
};
})
//mapsController Ends Here<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>