Question

我正在使用ng-Autocomplete从谷歌加载地点。见下图。但我想在最后一行添加按钮以获取用户的当前位置。有什么办法吗??? this is the image for your reference

Answer 1

以下是使用 ng-map 和 g-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>

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

1 个答案: