javascript - 如何在 angularjs 中将经度和纬度传递给谷歌地图指令

Question

我正在研究 AngularJS。我正在尝试根据选定的经度和纬度显示谷歌地图。所以我按照以下步骤操作，

1、包含Google map 脚本

<script src="https://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>

2、为Google Map编写一个angularJS指令

.directive('map', function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<div></div>',
        link: function(scope, element, attrs) {
            var markersArray = [];
            var myOptions = {
                zoom: 14,
                center: new google.maps.LatLng(attrs.glat,attrs.glang),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById(attrs.id), myOptions);

            google.maps.event.addListener(map, 'click', function(e) {
                scope.$apply(function() {
                    addMarker({
                    lat: e.latLng.lat(),
                    lng: e.latLng.lng()
                  }); 

                    console.log(e);
                });

            }); // end click listener

            addMarker= function(pos){
            for (var i = 0; i < markersArray.length; i++ ) {
    markersArray[i].setMap(null);
  }
  markersArray.length = 0;
               //map.clearOverlays();
                //alert(pos.lat);alert(pos.lng);
               var myLatlng = new google.maps.LatLng(pos.lat,pos.lng);
               marker = new google.maps.Marker({
                    position: myLatlng, 
                    map: map,
                    title:"Hello World!"
                });
                scope.pinLatLang={"lat":pos.lat,"lang":pos.lng};
                scope.$apply();
                markersArray.push(marker);
google.maps.event.addListener(marker,"click",function(){});
            } //end addMarker
        }
    };
})

3、按照标记编写，

<map id="map_canvas" glat="33.6408" glang="-84.4457" class="col-md-10"></map>

当我确实像上面那样时，它工作得很好。但在我的场景中，我需要调用网络服务并获取经度和纬度，例如，

 $http({
                    method: 'GET',
                    url: "myUrl" + $routeParams.param1,

                }).success(function (data, status, headers, config) {
                  //Here i will set scope variables
    $scope.GLongitude=data.Longitude;
    $scope.GLatitude=data.Latitude;
    });

并在我的指令元素标记中使用这些范围变量，例如

 <map id="map_canvas" glat="{{GLongitude}}" glang="{{GLatitude}}" class="col-md-10"></map>

但它没有加载 map ，我认为当指令创建标记时范围变量尚未初始化。我怎样才能做到这一点。请指导我。

Answer 1

尝试使用Google Maps for AngularJS - AngularJS 指令将 Google map 集成到您的应用程序中。

大多数广泛使用的 Google map 对象都有指令，包括标记、窗口、线条和形状。

示例:

<google-map center='{expression}' 
zoom='{expression}'
draggable='{string}'
dragging='{expression}'
refresh='{expression}'
options='{expression}'
events='{expression}'
bounds='{expression}'>

<!-- other directives here -->
</google-map>