我正在寻找更好的解决方案.
我试图用Google Map填充浏览器屏幕的中间位置.(在菜单和页脚之间)在IE上,下面的代码工作正常.有时它适用于Chrome,但几乎总是只在Firefox上25%的map_canvas中显示地图.
现在页面呈现后整个map_canvas div为灰色并填充区域,因此100%适用于所有浏览器.如果我调整浏览器的大小,则地图会填充整个区域,因此调整大小事件可以在所有浏览器中使用.问题出在Chrome和Firefox中,地图只占map_canvas div灰色区域的25%左右.
因此,我唯一能想到的是在IE中,div的CSS在地图渲染之前发生,在Chrome和Firefox中它发生在地图渲染之后.我不知道这是因为我使用bootstrap还是其他问题.
我有一个临时使用此代码的工作.通过将map_canvas高度设置为文档高度减去菜单/页脚,地图始终显示在所有浏览器中.这个问题是如果用户调整屏幕大小,地图不会调整大小,这很尴尬,看起来很糟糕.我想在绝望中我可以重载windows resize事件,只是不断更改map_canvas大小,但这听起来像一个丑陋的黑客.寻找不那么难看的东西.
$("#map_canvas").css("min-height", $(document).height() - 70);
浏览器sudo代码
<!DOCTYPE html>
<html lang="en">
<head>
<!-- header stuff -->
<style>
<!-- in CSS file -->
#map_canvas
{
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<header class="hidden-print">
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
menus
</div>
</div>
</header>
<div class="container-fluid">
<div id="map_canvas" class="map_canvas">
</div>
</div>
<footer class="navbar-default navbar-fixed-bottom">
<div class="row">
stuff
</div>
</footer>
<script type="text/javascript">
$(function () {
var mapDiv: HTMLElement = …我有一个同时使用 Bing 和 Google 地图的网站。每个功能都有 Bing 和 Google 版本。我在 Bing 地图中复制 google.maps.geometry.poly.containsLocation 函数时遇到问题。有这样的事情吗？
基本上，我构建了一个多边形，并希望确定图钉是否位于地图上的多边形内。