Question

我正在尝试设置Google地图的宽度和高度。我想在html页面上做大。我正在尝试更改样式，但地图的宽度和高度不会改变。似乎我的风格不影响地图。任何人都可以帮我解决问题

这是代码

        <!DOCTYPE html>
    <html ng-app="myApp">

    <head>
        <!-- Style Sheets includes -->
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <style>
    html, body, #map {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
    #map {
        position: relative;
    }
    </style>
        <link href="css/customstyle.css" rel="stylesheet" type="text/css">

        <!-- Script includes -->
        <script data-require="angular.js@*" data-semver="1.3.14" src="js/angular.js"></script>
        <script src="js/jquery-2.1.4.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/ui-bootstrap-tpls-0.12.0.js"></script>
        <script src="#"></script>
        <script src="https://maps.googleapis.com/maps/api/js"></script>
        <script src="data.js"></script>
        <script src="app.js"></script>
    </head>

    <body ng-controller="ApplicationController as appctrl">
        <div class="container">

<div id="map" ></div>

  </div>
 </body>

    </html>

Answer 1

如果div map位于其他div（例如：container）中，则所有父div必须设置高度和宽度..在您的情况下

<div class="container">

未设置

试试这种方式

html, body, .container,  #map {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#map {
    position: relative;
}

代码段：

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

}
google.maps.event.addDomListener(window, "load", initialize);

html, body, .container,  #map {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#map {
    position: relative;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div class="container">

  <div id="map"></div>

</div>

Google地图的宽度和高度

1 个答案: