0

我正在使用 AngularJS 框架的 Google Maps Geocoder 服务，但到目前为止还无法显示任何标记。

其他一切似乎都运行良好，但我真的需要标记。

这是我的 app.js：

angular.module('modelApp', ['ngAnimate', 'ui.bootstrap', 'google-maps'])

  .factory('MarkerCreatorService', function () {

      var markerId = 0;

      function create(latitude, longitude) {
          var marker = {
              options: {
                  animation: 1,
                  labelAnchor: "28 -5",
                  labelClass: 'markerlabel'
              },
              latitude: latitude,
              longitude: longitude,
              id: ++markerId
          };
          return marker;
      }

      function invokeSuccessCallback(successCallback, marker) {
          if (typeof successCallback === 'function') {
              successCallback(marker);
          }
      }

      function createByAddress(address, successCallback) {
          var geocoder = new google.maps.Geocoder();
          geocoder.geocode({'address' : address}, function (results, status) {
              if (status === google.maps.GeocoderStatus.OK) {
                  var firstAddress = results[0];
                  var latitude = firstAddress.geometry.location.lat();
                  var longitude = firstAddress.geometry.location.lng();
                  var marker = create(latitude, longitude);
                  var results =  results[0];
                  invokeSuccessCallback(successCallback, marker);
              } else {
                  alert("Unknown address: " + address);
              }
          });
      }


      return {
          create: create,
          createByAddress: createByAddress
      };

  })

  .controller('modelCtrl', function ($scope, $http, $timeout, $q, $log, MarkerCreatorService){

    // $ajax Init
    $scope.model= [];

    $http.get('resources/model.json')
    .success(function(data){

      $scope.model= data;
    })

    $scope.address = '';

    $scope.map = {
        center: {
          latitude: 0,
          longitude: 0
        },
        zoom: 2,
        markers: [],
        control: {},
        options: {
            scrollwheel: false
        }
    };

    $scope.map.markers.push($scope.autentiaMarker);

    $scope.addAddress = function() {
        var address = $scope.address;

        if (address !== '') {
            MarkerCreatorService.createByAddress(address, function(marker) {
                $scope.map.markers.push(marker);
                refresh(marker);
            });
        }
    };

    function refresh(marker) {
        $scope.map.control.refresh({
            latitude: marker.latitude,
            longitude: marker.longitude});
        $scope.map.zoom = 5;
    }
  })

这是 index.html：

<google-map center="map.center"
            zoom="map.zoom"
            draggable="true"
            options="map.options"
            control="map.control">
  <markers models="map.markers" coords="'self'" options="'options'" 
           isLabel="true">
  </marker>
</google-map>

所以，我基本上需要显示标记。你知道我的代码有什么问题吗？

任何帮助，将不胜感激。

4

1 回答 1

0

一种方法是将基于回调的 API 转换为基于 Promise 的 API：

app.factory('MarkerCreatorService', function ($q) {

  //...

  function createByAddress(address) {
      var geocoder = new google.maps.Geocoder();
      var deferred = $q.defer();
      geocoder.geocode({'address' : address}, function (results, status) {
          if (status === google.maps.GeocoderStatus.OK) {
              var firstAddress = results[0];
              var latitude = firstAddress.geometry.location.lat();
              var longitude = firstAddress.geometry.location.lng();
              var marker = create(latitude, longitude);
              var results =  results[0];
              deferred.resolve(marker);
          } else {
              alert("Unknown address: " + address);
              deferred.reject("Unknown address: " + address);
          }
      });
      return deferred.promise;
  }

  //...

});

用法

$scope.addAddress = function() {
    var address = $scope.address;
    if (address !== '') {
        MarkerCreatorService.createByAddress(address).then(function(marker) {
            $scope.map.markers.push(marker);
            refresh(marker);
        });
    }
};

通过将其转换为 AngularJS 承诺，它将 API 集成到 AngularJS 框架及其摘要循环中。只有在 AngularJS 执行上下文中应用的操作才能受益于 AngularJS 数据绑定、异常处理、属性监视等。

于 2019-07-31T15:56:43.207 回答