个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我想在用户单击按钮时放大(或缩小) map 。 map 将调整其左边缘，将其向左移动以变大，同时将右边缘留在同一位置。这基本上就是 google maps 本身所做的，当您单击小部件以放大 map (覆盖左侧栏)时。
我调整包含 map 的 div 的大小/重新定位没有问题，然后调用 google.maps.event.trigger( map ，“调整大小”)；唯一的问题是，正如预期的那样， map 的内容在屏幕上移动。我不想要那个，我想把 map 留在同一个位置，就像谷歌地图一样。换句话说，我希望右边缘的经纬度位置保持不变，因为 map 的右边缘不会改变。
当然，先调用 map.getCenter() 然后调用 map.setCenter() 并不能满足我的要求(虽然总比什么都不做要好)。 map.panBy() 可能有效，因为它以像素为单位接受参数(相对于纬度/经度)，但它会对其进行动画处理，这不是我想要的。
有什么想法吗？我是否必须将纬度/经度转换为像素，或者是否有更简单的方法来执行此操作？
最佳答案
诀窍不是调整 map 大小，而是在您创建的 map 上放置一个 mask ( map 以最大尺寸创建)，然后移动 mask (一个 div)。 map 始终保持相同大小。您可能需要调整 map 上其他控件的位置，例如缩放等(这可以使用标准 map API 来完成)或仅在右侧显示您的控件。
要记住的一点是，该 map 将有一个等于全尺寸 map 的边界框，因此如果您向 map 添加标记(并且您希望用户看到它们)，您需要跟踪 map 的边界框 map 的当前可见部分(latLng 到像素转换)- 如果您将标记添加到被掩码覆盖的部分，则可以滚动 map 。
这是一个使用 jquery 动画完成的示例(但您可以通过简单地关闭侧边栏的可见性来实现它)。 .另一个需要注意的重要事项是用于包装器和侧边栏以及 map 容器的 CSS。...享受:
<!DOCTYPE html>
<html>
<head>
<title>Resize map</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var overlay;
var sidebar_expanded = true;
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
$(document).ready( function() {
$("#hide").click( function(e) {
if (sidebar_expanded){
offset = "-=140";
text = "Show me"
} else {
offset = "+=140";
text = "Hide me"
}
$("#sidebar").animate({
left: offset,
}, 1000, function() {
// Animation complete.
//you probably want to change content of the hide me div to show me, etc)
$("#hide").text(text);
sidebar_expanded = (sidebar_expanded ) ? false : true;
});
})
})
</script>
<style>
body {
text-align: center;
}
#map_canvas {
position: absolute;
top: 0;
left: 0;
}
#wrapper {
position: relative;
width: 900px;
height: 500px;
overflow: hidden;
}
#sidebar {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 500px;
background: white;
z-index: 2000000;
border: 1px solid black;
}
</style>
</head>
<body onload="initialize()">
<div id="wrapper">
<div id="sidebar">
<div id="hide" style="text-align:right;padding: 6px;">
Hide me
</div>
</div>
<div id="map_canvas" style="width:900px;height: 500px;">
</div>
</div>
</body>
</html>
关于javascript - 通过移动左边缘来调整谷歌地图的大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6447138/
25
4
0
这个问题已经有答案了: Declaring multiple object pointers on one line causes compiler error (5 个回答) 已关闭 6 年前。 l
我目前正在学习语言处理器，经常出现的一个话题是语法中元素的使用方向。从左到右或从右到左。 我理解这个概念，但似乎有很多方法可以编写这些规则，我不确定它们是否都相同。到目前为止我看到的是: 右/左递归，
我有一个很长的线性(分支不多)流程图，在 graphviz 中显示为要么太高而无法放在单个页面上，要么太宽(如果方向是从左到右) 是否有一种简单的方法可以让 graphviz 以从左到右，然后向下，然
我一直摸不着头脑，但运气不好。设计器有一个包含 3 栏的站点、两个侧边栏和一个主要内容区域。 专为桌面设计，左栏、主要内容、右栏。但是，在较小的设备上，我们希望首先堆叠主要内容。 所以通常情况下，你可
我想要从上到下和从左到右组织的 css block 。 为了更好地解释这是一张图片，其中包含我到目前为止所获得的内容以及我希望使用 CSS 实现的内容: 代码如下: HTML: 1 2 3 4 5
当我问this question时，答案之一(现已删除)建议Either类型对应Curry-Howard correspondence中的XOR而不是OR，因为它不能同时是Left和Right。 真相
我有一个程序，如果用户按住向左或向右箭头键， Angular 色会逐渐朝那个方向加速，并最终达到最大速度。松开按键后， Angular 色逐渐减速，直至完全停止。 我的右方向键没问题，但左方向键坏了。
今天很简单的一个。我有一个专栏，我们称之为标题，有一堆项目标题。我需要从“:”的左侧拉出所有内容并进行左/右修剪(稍后我将在连接中使用它，但我现在只需要一个包含新数据的列) .下面是当前列的示例: 这
我正在尝试将图表中的列与左侧对齐。默认情况下，它们位于中间。 我在 API 文档中找不到任何关于此的信息。 Here是一个 jsFiddle 测试。 最佳答案 在 highcharts api 中，您
左旋转进位和右旋转进位指令有哪些实际用途？ 在我的汇编课上，我们无法想出一个有用的好例子。 最佳答案 如果您想将位从一个操作数移出并移入另一个操作数: SHL EAX, 1 ; mov
我有一个查询，它使用 eqjoin 从两个不同的表返回以下数据。我想将 left 和 right 结合起来，而不是执行 zip() (重写 name > 和 joined_at)，我想将右侧对象的属性
我使用 firebase API。发送和检索消息。但是，我在尝试为发送者/检索者设置布局时遇到麻烦，以便消息将左/右对齐。目前我只有发送者/检索者都使用的一种布局，但不确定如何设置不同的布局。 pub
我的菜单基本上是一个水平项目滑动条。所有菜单项都有特定的默认 CSS 属性。我希望这些项目在到达主容器的中心时更改其大小和左/右边距，并在离开主容器(或位于主容器之外)时重置为默认值。请参阅我的原理图
我有一个引用表，在这个表中有 3 个字段(Id、User1、User2)。 User2 字段可以为空，但我们在不使用时使用 0。 当我执行下面的 Linq 查询时，User2 == 0 的记录不是结果
不知道如何解决这个问题。 我有两个表结果和受访者 我需要查明受访者表中是否有任何行具有completion =“Complete”，但它们的respondent_id(在结果表和受访者表中)不在结果表
我正在尝试访问三个表以获得类似这样的内容: +------+------+------+ | ITEM | PCS | CSS | +------+------+------+ | 1099 |
left 和 right join 有区别吗，下面的sql 语句结果一样，但是两者的性能是一样的吗？ SELECT count(*) FROM writers RIGHT JOIN blogs O
当我使用 LEFT() 使用以下代码从数据库中获取值时 $select="SELECT LEFT(description,500) FROM tbl_news where id='$id'"; $qu
当我将鼠标悬停在水平导航菜单上的页面名称上时，相关子页面会 float 在下方。 目前这些显示居中，我如何对齐它们以便它们向左对齐(与导航菜单标题名称一致)。 你可以去看到这个 http://79.1
在下面的引导网格示例中，它使用 col-sm 和 col-sm-push/pull。col-sm-push 指定了左/右值(偏移量)。 我不太清楚它是如何工作的。 第二个 float 元素来到第一个
我是一名优秀的程序员,十分优秀！