angularjs 和 google 地图 - 未显示

Question

我试图在我的应用程序中添加 google 地图，但每当我使用 google 的地理编码器调用它时，它都没有显示。我只有一个地址，需要找到它的经度和纬度。但是如果我手动分配一个 latitude/longitude，它就会显示。这是 fiddle 的 link。

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"
            };
          }
        }
      };
    });
  }
});

angularjs 和 google 地图 - 未显示

angularjs and google maps - not displaying

angularjs

google-maps

maps