Question

因此，我正在尝试使用角度并尝试调用指令（谷歌地图https://github.com/davidepedone/angular-google-places-map）并执行反向地理编码。我认为这将是一个更一般的指令问题。

我正在尝试调用指令中的函数来更新谷歌地图的地方信息以及地图。我在想的方式是，我需要通过控制器传递一个变量，将该变量作用于指令，然后该指令将运行该函数？

更新：

 <div class="row">
 <places-map selectedid="selectid(place.id)"></places-map>
 </div>
 <button ng-click="selectid(place.id)">{{place.id}}</button> </div>

点击此按钮，我想转到控制器，

$scope.selectid= function (pickplaceid){
   $scope.selectedid(pickplaceid);
}

然后selectplaceid应该在指令的范围变量中。

        scope: {
            customCallback: '&?',
            picked: '=?',
            address: '=?',
            fallback: '=?',
            mapType: '@?',
            readonly: '@?',
            responsive: '@?',
            draggable: '@?',
            toggleMapDraggable: '=?',
            placeNotFound: '=?',
            updateMarkerLabel: '=?',
            selectedid:'='
        },

并可以调用我的方法：

 link: function ($scope, element, attrs, controller) {
 //everything else from angular-google-places

            $scope.selectedid= function (selectedplace)
            {
 ///Whatever I want to do to geocode with the placeid
            }

我想我可能只是完全错了，因为根本没有运气指令。我正在尝试根据我点击的位置更新我的地图，并从placeId中提取该特定地点的信息。任何帮助都会很棒。

Answer 1

我有几乎相同的工作，我用一个接收placeId的服务解决了它（在我的代码中它叫做addressId，但它是Google Maps期望的placeId）。在我的服务中，我使用placeId来检索地址详细信息：

  app.service('AddressDetailsService', ['$q', function ($q) {

    this.placeService = new google.maps.places.PlacesService(document.getElementById('map'));

    this.getDetails = function (addressId, address) {
      var deferred = $q.defer();

      var request = {
        placeId: addressId
      };

      this.placeService.getDetails(request, function (place, status) {
        if (status === google.maps.places.PlacesServiceStatus.OK) {
          address.placeId = addressId;
          address.street = getAddressComponent(place, 'route', 'long');
          address.countryCode = getAddressComponent(place, 'country', 'short');
          address.countryName = getAddressComponent(place, 'country', 'long');
          address.cityCode = getAddressComponent(place, 'locality', 'short');
          address.cityName = getAddressComponent(place, 'locality', 'long');
          address.postalCode = getAddressComponent(place, 'postal_code', 'short');
          address.streetNumber = getAddressComponent(place, 'street_number', 'short');
          address.latitude = place.geometry.location.lat();
          address.longitude = place.geometry.location.lng();

          if (address.streetNumber) {
            address.streetNumber = parseInt(address.streetNumber);
          }
          deferred.resolve(address);
        }
      });

      return deferred.promise;
    };

    function getAddressComponent(address, component, type) {
      var country = null;
      angular.forEach(address.address_components, function (addressComponent) {
        if (addressComponent.types[0] === component) {
          country = (type === 'short') ? addressComponent.short_name : addressComponent.long_name;
        }
      });

      return country;
    }
  }]);

然后你注入它并从你的指令中调用服务。这是我使用的，你可能需要调整它，但你看到了这个想法。我没有使用链接功能，而是使用指令控制器：

  .directive('mdAddressDetails', function mdAddressDetails() {
    var directive = {
      restrict: 'EA',
      scope: {
        address: '='
      },
      bindToController: true,
      templateUrl: 'modules/address/addressDetails.html',
      controller: AddressDetailsController,
      controllerAs: 'dir'
    };

    AddressDetailsController.$inject = ['AddressDetailsService', '$q'];

    function AddressDetailsController(AddressDetailsService, $q) {
      var dir = this;

      dir.selectAddress = selectAddress;

      function selectAddress(address) {
        if ((address) && (address.place_id)) {
          AddressDetailsService.getDetails(address.place_id, dir.address).then(
            function (addressDetails) {
              dir.address = addressDetails;
            }
          );
        }
      }
    }

    return directive;
  });

然后您只需使用所需参数调用该指令：

  <md-address-details address="myAddress"></md-address-details>

从指令调用方法

1 个答案: