1
我正在AngularJS上工作。我試圖根據選定的經度和緯度顯示Google地圖。所以我按照下面的步驟，如何通過經度和緯度谷歌地圖direcive in angularjs
1中，包括谷歌地圖腳本
<script src="https://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
2，寫的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>
當我喜歡它上面，它工作正常。但在我的情況，我需要調用Web服務，並得到經度和緯度一樣，
$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>
，但沒有加載地圖，我認爲當指令創建標記時，範圍變量尚未初始化。我怎樣才能做到這一點。請指導我。