如何在ng-autocomplete中添加用戶的當前位置

我正在使用ng-Autocomplete從Google加載地點。見下圖。但我想在最後一行添加按鈕來獲取用戶的當前位置。有沒有辦法做？ this is the image for your reference 如何在ng-autocomplete中添加用戶的當前位置

來源

2016-02-25 nasr18

下面是一個使用片斷NG-地圖和G-地方，自動完成（但你可以使用自己的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>

來源

2016-02-25 08:28:02 beaver

感謝您的回覆。但兩個按鈕都不起作用。 :(@beaver – nasr18

對不起，有一個片段上的SO問題，嘗試Plunker版本：http://plnkr.co/edit/hQEBnHvv6YmJJSeHW8kk?p=preview – beaver

這是plnkr好嗎？ – beaver

如何在ng-autocomplete中添加用戶的當前位置

回答

相關問題