Google地图不适用于AngularJS指令 [英] Google Maps not working in AngularJS directive

问题描述

我是 ng-map 的创建者。

我试图在AngularJS中开发一个指令来显示Google地图。我可以显示地图，但我想更进一步。我的指令将接受坐标或地址。如果坐标被设置，它会显示一个标记。然而，如果coords不可用，那么它应该尝试使用地址和Geocode显示一个标记。

我的问题是当我尝试运行地理编码函数指令，这个请求看起来是异步的，其余的代码在得到响应之前被执行。

请参阅我的plunker： http://plnkr.co/edit/QRj6jXQYxSRR3CseavQY?p=preview

 < div class =span12> 
 
 {{center}} 
< label>地址< / label> 
< input type =textng-model =completeAddressclass =input-xxlarge input-height-largeplaceholder =输入您的商家地址...> 
< map id =map_canvasstyle =height：452px; margin-bottom：20px;>< / map> 
 
< button class =btn btn-primary btn-large pull-rightstyle =margin-bottom：inheritng-click =setBusinessLocation（）> Save< / button> 
< / div> 
  

您可以注意到，在一个城市（Gijon）（地理编码之后）有一个标记，但是地图是以前在其他城市（赫塔菲）的中心创建的。

感谢，
Roberto。

1. 从指令中，传递 map


2. 使用$ q将GeoCoder作为服务创建，并使用$ rootScope。$申请异步。处理


3. 使用控制器中的GeoCoder，并且如果需要，从您的map指令中以
格式GeoCoder（address）.then（...） / code>在地理编码查找完成时显示标记



这是服务部分。 b


  app.service（'GeoCoder'，function（$ q，$ rootScope）{
 return {
 getLocations：function（address） {
 var deferred = $ q.defer（）; 
 var geocoder = new google.maps.Geocoder（）; 
 console.log（'address'，address）; 
 geocoder.geocode（{'address'：address}，function（results，status）{
 $ rootScope。$ apply（function（）{
 if（status == google.maps.GeocoderStatus.OK） {
 deferred.resolve（results）; 
} 
}）; 
}）; 
 return deferred.promise; 
} 
} 
}）; 
  

，这是从控制器中的地址添加标记的功能



  $ scope.addMarkerFromAddress = function（）{
 GeoCoder.getLocations（$ scope.address）.then（function（results）{
 var latLng = results [0] .geometry.location; 
 var marker = new google.maps.Marker（{
 map：$ scope.map，
 position：latLng 
}）; 
 $ scope.map.setCenter（latLng）; 
}）; 
}; 
  

最后，这是演示， http://plnkr.co/edit/9gkanMqVZCldZjYZ5oA2?p=preview

I am the creator of ng-map.

I´m trying to develop a directive in AngularJS to show a Google Maps. I can show the map, but I want to go one step further. My directive will accept coords or an address. In case the coords are set, it will show a marker with them. However if the coords are not available, then it should try to show a marker using the address and Geocode.

My problem is when I try to run the geocode function inside the directive, this request looks asynchronous and the rest of the code is executed before I get the response.

How can I force to execute this request?

Please see my plunker: http://plnkr.co/edit/QRj6jXQYxSRR3CseavQY?p=preview

<div class="span12">

    {{center}}
    <label>Address</label>
    <input type="text" ng-model="completeAddress" class="input-xxlarge input-height-large" placeholder="Type your business address...">     
    <map id="map_canvas" style="height: 452px; margin-bottom: 20px;"></map> 

    <button class="btn btn-primary btn-large pull-right" style="margin-bottom: inherit" ng-click="setBusinessLocation()">Save</button>  
</div>

You can notice, there is a marker in one city (Gijon) (after geocode), but the map is created before with the center in other city (Getafe).

Thanks, Roberto.

解决方案

To resolve the issue,

1. From directive, pass map to controller for the map access.
2. Create GeoCoder as a service using $q, and $rootScope.$apply for async. processing
3. Use GeoCoder from controller, and if required from your map directive as the form of GeoCoder(address).then(...) to show marker when geocode lookup is done

This is the service part.

app.service('GeoCoder', function($q, $rootScope) {
    return {
      getLocations : function(address) {
        var deferred = $q.defer();
        var geocoder = new google.maps.Geocoder();
        console.log('address', address);
        geocoder.geocode({'address': address }, function (results, status) {
          $rootScope.$apply(function() {
            if (status == google.maps.GeocoderStatus.OK) {
              deferred.resolve(results);
            }
          });
        });
        return deferred.promise;
      }
    }
});

and this is function to add marker from address in controller

  $scope.addMarkerFromAddress = function() {
    GeoCoder.getLocations($scope.address).then(function(results) {
      var latLng = results[0].geometry.location;
      var marker = new google.maps.Marker({
        map: $scope.map, 
        position: latLng
      });
      $scope.map.setCenter(latLng);
    });
  };

And finally, this is demo, http://plnkr.co/edit/9gkanMqVZCldZjYZ5oA2?p=preview

这篇关于Google地图不适用于AngularJS指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！