angular google 地图缺少搜索功能

Question

我在我的项目中使用了 ng-map api 但我现在卡住了，因为我试图找到一个搜索功能，我可以在其中找到例如特定坐标周围的加油站，但我找不到它如果我是否应该继续使用这个库，谁能帮助我并指导我。

Answer 1

您可以利用 PlacesService.nearbySearch function 个 Google 个 API 地方：

Retrieves a list of places near a particular location, based on keyword or type.

下面的例子展示了如何查找和显示一定半径范围内的加油站：

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

angular google 地图缺少搜索功能

angular google maps lacks for search functionality

google-maps

angularjs

ng-map