如何在ng-autocomplete中添加用户的当前位置

我正在使用ng-Autocomplete来从谷歌加载地点。 看下面的图片。 但我想在最后一行添加button来获取用户的当前位置。 有没有办法做? 这是供您参考的图像

这是一个使用ng-mapg-places-autocomplete的代码片段(但是你可以使用你自己的lib):

Plunker: http ://plnkr.co/edit/hQEBnHvv6YmJJSeHW8kk?p=preview

angular.module('app', ['google.places', 'ngMap']) .controller('MapCtrl', ['$scope', 'NgMap', '$http', function($scope, NgMap, $http) { $scope.result1 = null; NgMap.getMap().then(function(map) { console.log("getMap"); $scope.map = map; }); $scope.$on('g-places-autocomplete:select', function(event, place) { console.log('new location: ' + JSON.stringify(place)); $scope.data = { lat: place.geometry.location.lat(), lng: place.geometry.location.lng() }; $scope.map.setCenter(place.geometry.location); console.log($scope.data); }); $scope.$watch('result1', function(newValue, oldValue) { console.log("watch"); if ($scope.map) { console.log($scope.result1); } }, true); $scope.centerOnMe = function() { if (!$scope.map) { return; } navigator.geolocation.getCurrentPosition(function(pos) { $scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude)); }, function(error) { alert('Unable to get location: ' + error.message); }); }; $scope.getMyAddr = function() { navigator.geolocation.getCurrentPosition(function(pos) { var latlng = pos.coords.latitude + "," + pos.coords.longitude; console.log('geolocation: ' + latlng); $http.get('https://maps.googleapis.com/maps/api/geocode/json?latlng=' + latlng) // + '&key=XXXXXXXXXX') .success(function(data) { console.log('geocode: ', data); $scope.address = data.results[0].formatted_address; if (!$scope.$$phase) $scope.$apply(); }); }, function(error) { alert('Unable to get location: ' + error.message); }); } } ]); 
 .map { width: 100%; height: 500px !important; } 
 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" /> <title></title> <script src="https://maps.google.com/maps/api/js?libraries=visualization,drawing,geometry,places"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script> <script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script> <script src="https://rawgit.com/kuhnza/angular-google-places-autocomplete/master/dist/autocomplete.min.js"></script> <link href="https://rawgit.com/kuhnza/angular-google-places-autocomplete/master/dist/autocomplete.min.css" rel="stylesheet" /> <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> <link href="style.css" rel="stylesheet" /> <script src="app.js"></script> </head> <body ng-app="app" ng-controller="MapCtrl"> <h1 class="title">Angular ng-map</h1> <div class="has-header padding"> <div class="item item-input-inset"> <label class="item-input-wrapper"> <input type="text" g-places-autocomplete="" ng-model="location" placeholder="Insert address/location" /> </label> <button ng-click="location = ''" class="btn btn-default" ng-show="location">x</button> <button ng-click="centerOnMe()" class="btn btn-default">Find Me</button> <button ng-click="getMyAddr()" class="btn btn-default">My Addr</button> </div> <hr> <ng-map zoom="6" class="map"> <marker position="{{data.lat}}, {{data.lng}}"></marker> </ng-map> <br> <div><label>My address: </label>{{address}}</div> </div> </body> </html>