Question

我的Angular / Ionic应用程序中有1个视图。当视图最初加载时，div显示谷歌地图设置为高度：1px，因此无法看到。当用户单击时，div的高度将设置为窗口的高度。但是，当我运行它时，虽然看起来整个div都在整个窗口，但我只能看到地图的一部分。

如果我将高度硬编码为某个数字，例如1000px，则div显示该大小并显示完整的地图。但我想有条件地展示它。

有关如何解决这个问题的建议吗？

查看：

<div id = "map" data-tap-disabled="true" style = "height: {{height_of_map}}px;"></div>

控制器：

$scope.height_of_map = 1; //Initial height of window on load (it's essentially hidden on load)

//Height should change when getMap function gets called
$scope.getMap = function() {
    google.maps.event.trigger(map, "resize");
    $scope.height_of_map = window.innerHeight;
    console.log($scope.height_of_map); //logs the correct height of window

  }

其他Google地图代码：

[![$scope.initialise = function() {
          var myLatlng = new google.maps.LatLng(37.758446, -122.411789);
          var markersArray = \[\];

          //Initial settings for the map
          var mapOptions = {
                  center: myLatlng,
                  zoom: 2,
                  mapTypeId: google.maps.MapTypeId.ROADMAP,
                  styles: \[{ featureType: "poi", elementType: "labels", stylers: \[{ visibility: "off" }\]}\]

              };

          //Load the initial map
           var map = new google.maps.Map(document.getElementById("map"), mapOptions); 

          //Event listener to add a marker      
          google.maps.event.addListener(map, 'click', function(e) {
            clearOverlays();
            placeMarker(e.latLng, map);
            $scope.coordinates = e.latLng;
            localStorage.userLat = $scope.coordinates.lat();
            localStorage.userLong = $scope.coordinates.lng();
          });

          //Actual function to add a marker
          function placeMarker(position, map) {
            var marker = new google.maps.Marker({
              position: position,
              map: map
            });
            map.panTo(position);
            markersArray.push(marker);
          }

          function clearOverlays() {
            for (var i = 0; i < markersArray.length; i++ ) {
              markersArray\[i\].setMap(null);
            }
            markersArray.length = 0;
          }

          // $scope.map=map;

    };
    // End of initialise

  google.maps.event.addDomListener(window, 'load', $scope.initialise);][1]][1]

在附图中，我可以在地图下方的白色空间中平移，因为我相信它在技术上仍然是地图，但我无法看到它。

有关如何解决这个问题的建议吗？

如何以编程方式更改谷歌地图的高度？

0 个答案: