Google Map Api不会与AngularJs一起显示

Question

我正在使用Angular来显示用户Latitude，Longitude。和Altitude，然后生成一个谷歌地图，以向用户显示他们在地图上的位置。除了制作地图外，我已经能够完成所有这些工作。我已经能够生成没有错误的地图，但无法让地图明显地显示出来。

我已经阅读并看到包含div的相对大小的宽度和高度会阻止地图显示，但我已经解决了这个问题。

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>

<google-map  id="map-canvas" ng-controller="MapController as mapCtrl"></google-map>

CSS

#map-canvas{
width:500px;
height:500px;
}

map.js

   var app = angular.module('map', []);

    app.controller("MapController", function ($scope) {
    var map = this;

    navigator.geolocation.getCurrentPosition(function(position){
        var lng = position.coords.longitude;
        var lat = position.coords.latitude;
        var alt = position.coords.altitude;

        var mapOptions = {
            center: new google.maps.LatLng(lat, lng),
            zoom: 11,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
        };
        $scope.googleMap = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

        $scope.$apply(function () {
            map.lng = lng;
            map.lat = lat;
            map.alt = alt;

        });

谢谢

Answer 1

新HTML

 </div>
   <google-map ng-controller="MapController as mapCtrl"></google-map>
   <div id="map-canvas"></div>
</div>

通过将id="map-canvas"更改为单独的div而不是我的指令，地图会完全显示。我只是不确定什么是不允许我的地图显示在自己的指令内。控制器甚至不包含在单独的div中，所以我真的不知道为什么我的app.js中的代码甚至能够在div中显示控制器所在指令之外的地图。