2016-09-28 8 views
0

ich die ng-map api in meinem Projekt verwenden, aber ich bin jetzt stecken, weil ich versuche, eine Suchfunktion zu finden, wo ich zum Beispiel der Tankstellen um eine bestimmten Koordinaten lokalisieren kann, aber ich kann nicht finden, Es könnte also jemand mir helfen und mich leiten, ob ich mit dieser Bibliothek fortfahren soll oder nicht.Winkel Google Maps fehlt für Suchfunktion

Antwort

2

Sie könnten PlacesService.nearbySearch function von Google Places API verwenden, die:

eine Liste von Orten Ruft in der Nähe von einem bestimmten Ort, basierend auf Schlüsselwörter oder Typ.

Das folgende Beispiel zeigt, wie und Anzeige Tankstellen in einem gewissen Radius finden:

angular.module('mapApp', ['ngMap']) 
 

 
    .controller('mapController', function ($scope, NgMap, $http) { 
 

 
    $scope.location = [59.3260668,17.8419725]; 
 

 
    NgMap.getMap().then(function (map) { 
 
     $scope.map = map; 
 

 

 
     var service = new google.maps.places.PlacesService($scope.map); 
 
     var request = { 
 
     location: new google.maps.LatLng($scope.location[0], $scope.location[1]), 
 
     radius: '10000', 
 
     types: ['gas_station'] 
 
     }; 
 
     service.nearbySearch(request, $scope.displayResults); 
 
    }); 
 

 
    $scope.gasStations = []; 
 
    $scope.displayResults = function (results, status) { 
 
     if (status == google.maps.places.PlacesServiceStatus.OK) { 
 
     $scope.$apply(function() { 
 
      $scope.gasStations = results.map(function (item) { 
 
      return { 
 
       id: item.id, name: item.name, pos: [item.geometry.location.lat(), item.geometry.location.lng()] 
 
      }; 
 
      }); 
 
     }); 
 
     } 
 
    }; 
 

 

 
    });
<script src="https://code.angularjs.org/1.4.8/angular.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script> 
 
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script> 
 

 
<div ng-app="mapApp" ng-controller="mapController"> 
 
     
 
     <ng-map default-style="true" zoom="11" center="{{location}}"> 
 
      <marker ng-repeat="gs in gasStations" position="{{gs.pos}}" title="{{gs.name}}" id="{{gs.id}}"> 
 
      </marker> 
 
     </ng-map> 
 
</div>

Codepen

Verwandte Themen