Question

我正在尝试更改地图的宽度和高度。我想在页面的整个宽度上显示地图。地图在页面的一半上可见，没有任何样式。但是当我尝试实现样式来改变高度时，地图会从页面中消失。

这里是我的html的完整代码，其中head标签中的样式和map div位于底部。

    <html ng-app="myApp">

<head>
    <!-- Style Sheets includes -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <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="https://maps.googleapis.com/maps/api/js"></script>
    <script src="data.js"></script>
    <script src="app.js"></script>
    <script src="initmap.js"></script>
    <style>
    html, body, #map {
        width: 25%;
        height: 25%;
        margin: 0;
        padding: 0;
    }
    #map {
        position: relative;
    }
    </style>
</head>

<body ng-controller="ApplicationController as appctrl">



    <div class="container">



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

这是Initialize map

的功能

//Initializes the map.
function initialize() {

    // Initial options. Centers on Sierra Leone.
    var mapOptions = {
            center: { lat: 8.4494988, lng: -11.7868289},
            zoom: 8
    };
    // Creates the map.
    map = new google.maps.Map(document.getElementById("map"),
            mapOptions);

}

Answer 1

然后您更改地图div的大小，您需要调整地图的大小（调整Google地图的事件大小）以获得正确的内容视图

在您的情况下，在改变div的大小后，您可以轻松（重新）调用您的初始化函数... （如果你在将map设置为null之前更好）

Answer 2

您可以从Google地图中嵌入基本地图，街景图像，行车路线或搜索到您的网站或博客。

当您的观看者登录Google时，他们还可以在地图中查看他们的家庭和工作，保存的地点等。

获取代码

<强> Open Google Maps 确保您要嵌入的地图或街景图像显示在地图上。在左上角，单击主菜单。单击“共享”或“嵌入地图”。在显示的框的顶部，选择“嵌入地图”选项卡。选择所需的大小，然后复制代码并将其粘贴到您的网站或博客的源代码中。注意：如果您在精简模式下使用地图，则无法嵌入地图。

在更改样式以增加宽度和高度后映射Disappers

2 个答案: