如何覆盖 Google 地图上的相对定位

Question

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

编辑：Turnip，鉴于该页面继承了一些 Umbraco 代码并显示在 Umbraco 的预览中 window，这已经是我能得到的最接近的了，但我认为问题无论如何都不会存在.

@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>

Answer 1

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

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

Answer 2

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

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.

在 here

进一步阅读：the height property from W3C recommendation

如何覆盖 Google 地图上的相对定位

How to override relative positioning on Google Map

javascript

css

jquery

google-maps

umbraco7