google-maps - 如何使 Google map 控件具有响应性?

标签 google-maps google-maps-api-3 responsive-design

我正在制作我的第一个整页 map 屏幕。我在 map 上添加了几个自定义控件。一个是图例,另一个是查询我们的系统并在 map 上放置图钉的方法。我已经能够将控件放置在 map 上并且效果很好。我在 TOP_RIGHT 中有一个,在 TOP_LEFT 中有一个。我现在想让这个响应。我希望图例占据 map 的整个底部,查询控件位于顶部。我找不到任何有关如何使其响应的信息。我该怎么做才能做到这一点?在线资源会很棒。

更新:我意识到我没有说清楚。在 PC/平板电脑上,我希望图例位于右上角,而在手机上,我希望它贯穿始终。类似于this page有效。

最佳答案

很简单,将 HTML 元素的宽度设置为 100%

确保这些控件不与默认控件重叠。

演示:http://jsfiddle.net/doktormolle/16r1777q/

关于google-maps - 如何使 Google map 控件具有响应性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27071480/

相关文章:

android - 更改 Google map v2 Android 中的 OnMylocationButtonClick 缩放

javascript - 获取 Google map 上标记的坐标

google-maps-api-3 - Bootstrap 3.0 和 Google map javascript API V3 样式

javascript - 点击悬停区域中的链接会在触摸时立即激活

android - 移动网站的响应式缩放以具有完整的手机宽度

ios - 如何在多个标记之间绘制折线?

javascript - 谷歌地图显示为灰色,但在调整浏览器大小时有效

html - 不知道图像大小的图像最大宽度

javascript - 如何将 Angular Js 与 Google map 结合使用,在单击标记时呈现人员列表?

javascript - 添加监听器时 Google Maps V3 map 未加载