Question

我試圖添加谷歌地圖在我的應用程序，但每當我使用谷歌的地理編碼器調用它，它不顯示。我只有一個地址，需要找到它的經度&緯度。但如果我手動分配經度/緯度，它正在顯示。這裏有一個鏈接到fiddle。

HTML

<div ng-app="myAppApp"> 
    <div ng-controller="MainCtrl"> 
     <ui-gmap-google-map center='map.center' zoom='map.zoom'> 
      <ui-gmap-marker coords="marker.coords" options="marker.options" events="marker.events" idkey="marker.id"></ui-gmap-marker> 
     </ui-gmap-google-map> 
    </div> 
</div> 

JS

angular.module('myAppApp', [ 
    'uiGmapgoogle-maps']) 

    .controller('MainCtrl', function ($scope) { 
    /* uncomment below to show that manually assigning lat/long will display a map 
    var lat = 40.7127; 
    var long = -74.0059; 
    $scope.map = { center: { latitude: lat, longitude: long }, zoom: 16 }; 
    */ 

    /* Lets find latitude & long based on an address */ 
    var geocoder = new google.maps.Geocoder(); 
    geocoder.geocode({ 
     "address": "Brussels" 
    }, function (results, status) {a 
     if (status == google.maps.GeocoderStatus.OK && results.length > 0) { 
      var location = results[0].geometry.location, 
       lat = location.lat(), 
       lng = location.lng(); 
      console.info("Latitude: " + lat); 
      console.info("Longitude: " + lng); 

      $scope.map = { 
       center: { 
        latitude: lat, 
        longitude: lng 
       }, 
       zoom: 16 
      }; 

      $scope.marker = { 
       id: 0, 
       coords: { 
        latitude: lat, 
        longitude: lng 
       }, 
       options: { 
        draggable: true 
       }, 
       events: { 
        dragend: function (marker, eventName, args) { 
         $log.log('marker dragend'); 
         var lat = marker.getPosition().lat(); 
         var lon = marker.getPosition().lng(); 
         $log.log(lat); 
         $log.log(lon); 

         $scope.marker.options = { 
          draggable: true, 
          labelContent: "lat: " + $scope.marker.coords.latitude + ' ' + 'lon: ' + $scope.marker.coords.longitude, 
          labelAnchor: "100 0", 
          labelClass: "marker-labels" 
         }; 
        } 
       } 
      }; 

     } 
    }); 




}); 

Answer 1

它不工作，因爲地理編碼器回調函數設置你的$ scope.map和$ scope.marker不觸發髒檢查。您需要$scope.$apply()：

/* Lets find latitude & long based on an address */ 
var geocoder = new google.maps.Geocoder(); 
geocoder.geocode({ 
    "address": "Brussels" 
}, function(results, status) { 
    if (status == google.maps.GeocoderStatus.OK && results.length > 0) { 
    $scope.$apply(function() { 
     var location = results[0].geometry.location, 
     lat = location.lat(), 
     lng = location.lng(); 
     console.info("Latitude: " + lat); 
     console.info("Longitude: " + lng); 

     $scope.map = { 
     center: { 
      latitude: lat, 
      longitude: lng 
     }, 
     zoom: 16 
     }; 

     $scope.marker = { 
     id: 0, 
     coords: { 
      latitude: lat, 
      longitude: lng 
     }, 
     options: { 
      draggable: true 
     }, 
     events: { 
      dragend: function(marker, eventName, args) { 
      $log.log('marker dragend'); 
      var lat = marker.getPosition().lat(); 
      var lon = marker.getPosition().lng(); 
      $log.log(lat); 
      $log.log(lon); 

      $scope.marker.options = { 
       draggable: true, 
       labelContent: "lat: " + $scope.marker.coords.latitude + ' ' + 'lon: ' + $scope.marker.coords.longitude, 
       labelAnchor: "100 0", 
       labelClass: "marker-labels" 
      }; 
      } 
     } 
     }; 
    }); 
    } 
});