如何覆盖谷歌地图上的相对定位答案

【问题标题】：How to override relative positioning on Google Map如何覆盖谷歌地图上的相对定位
【发布时间】：2018-10-14 17:24:50
【问题描述】：

我尝试使用以下代码将 Google 地图添加到我的 Umbraco 网站。 Div #map_canvas 从 api 获取相对定位，因此不会显示在页面上。如果我在带有静态定位的检查器中手动覆盖它，则会出现地图，但我已经尝试以各种方式永久覆盖它，使用 Stack Overflow 上其他地方的建议，但没有成功。谁能建议一种方法来做到这一点？

编辑：Turnip，这是尽可能接近的，因为该页面继承了一些 Umbraco 代码并显示在 Umbraco 的预览窗口中，但我认为问题不会存在。

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage<ContentModels.MasterTemplate2>
@using ContentModels = Umbraco.Web.PublishedContentModels;
@{
Layout = null;
}<!DOCTYPE html>

<html>
<head>
    <title>"testpage"</title>

<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<link rel="stylesheet" type="text/css" href="/css/wsha-style.css">

<script src="~/umbraco/lib/jquery/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAbVhWKXQ2uj-n0lX1JsZh_DqG9RI-XDhE"></script>

</head>

<body>


<div id="map_canvas" style="height:100%;"></div>



<script>
$(document).ready(function () {

    var map_position = new google.maps.LatLng(55.8735958,-4.3387407)

    var map = new google.maps.Map(document.getElementById("map_canvas"), {
        center: map_position,
        zoom: 3
    });

    var marker = new google.maps.Marker({
        position: map_position,
        map: map,
        title: 'Marker'
    });

});


</script>

</body>

【问题讨论】：

我无法想象为什么相对定位会阻止地图显示。您能否创建一个 minimal reproducible example 来显示该问题？
height。简短回答：将height: 100% 替换为height: 100vh 或您想要的px。更多信息请访问here
@Hikarunomemory - 成功了！谢谢你。您可以发布答案以便我接受吗？

标签： javascript jquery css google-maps umbraco7

【解决方案1】：

简答：将 height: 100% 替换为 height: 100vh 或 px 你想要的。

百分比是相对于高度计算的生成框的包含块。如果包含的高度块没有明确指定（即，它取决于内容高度），并且这个元素不是绝对定位的，值计算为“自动”。

【讨论】：

【解决方案2】：

你可以在你的地图DIV中使用任何位置，但是你应该先给你的父DIV一个不同的位置，例如：

#parentDIV {
 position: relative;
}
#map_canvas {
 position: absolute
}

【讨论】：

不确定这有什么关系。我无法为我的 div 提供任何定位，这是由谷歌代码为我确定的。我尝试在 `#map_canvas' div 周围放置另一个 div 并更改其位置，但这无济于事。