Question

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

编辑：萝卜，这是我能得到的尽可能接近，因为页面继承了一些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>

Answer 1

您可以使用地图DIV中的任何位置，但您应首先为您的父DIV提供不同的位置，例如：

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

Answer 2

简答：更换身高：100％身高：100vh或px你想要的。

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

在here

了解详情

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

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

2 个答案: