ima*_*oki 0 html javascript css google-maps
我正在尝试设置谷歌地图的宽度和高度.我想在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>
如果div映射在其他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>| 归档时间： |
|
| 查看次数： |
7844 次 |
| 最近记录： |