请看一下这个例子。
代码如下所示:
<iframe src="https://www.google.com/maps/d/u/0/embed?mid=zUN79N8r2n1E.kLstghIFzhKU" width="640" height="480"></iframe>
我创建了自定义谷歌地图。现在无法从地图 iframe 顶部删除黑色标题(未命名地图写入)。谷歌了很多。什么都没找到。
有什么建议么?
请看一下这个例子。
代码如下所示:
<iframe src="https://www.google.com/maps/d/u/0/embed?mid=zUN79N8r2n1E.kLstghIFzhKU" width="640" height="480"></iframe>
我创建了自定义谷歌地图。现在无法从地图 iframe 顶部删除黑色标题(未命名地图写入)。谷歌了很多。什么都没找到。
有什么建议么?
您可以使用 css 隐藏所有按钮。在隐藏和您需要的大小上创建一个容器 div 宽度溢出。将新的 google maps iframe/embed 放入更大尺寸的内部。要定位地图 iframe,请使用负边距..
100% 宽度的示例:
<div style="width: 100%; overflow: hidden; height: 300px;">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d39797.07748547086!2d5.46683904751879!3d51.433965676849986!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c6d90575ca5e3d%3A0x55989f5f344b006!2sPrins+Hendrikstraat+5!5e0!3m2!1snl!2snl!4v1392716144537"
width="100%"
height="600"
frameborder="0"
style="border:0; margin-top: -150px;">
</iframe>
</div>
使 iframe 比您的容器 div 高 300 像素。150px 隐藏在下面,150px 隐藏在上面。要将这 150 隐藏在 iframe 的顶部,请使用:
边距顶部:-150px;
根据文档,您会使用frameborder="0" style="border:0"
,但这似乎不适用于您的地图。一个花哨的替代方法是稍微扩展地图的高度并用一些 CSS 覆盖边界。
添加负边距就足够了: - px; 到你的 iframe 作为内联 CSS
<iframe src="https://www.google.com/maps/d/embed?mid=xxxxxxxx"
width="100%"
height="500"
style="margin-top: -46px;">
</iframe>
这会将整个地图在 iframe 内向上移动 -46px,在我的例子中,这是那个丑陋的 gmaps 顶部边框的高度......
您还可以在 CSS 文件中使用该 iframe 的类和其他 CSS
工作示例
<iframe src="https://www.google.com/maps/d/embed?mid=1y4xAXW83GJO9OfXK1oDwAfqYDZQKIVBH" width="100%" height="500" frameborder="0" style="border:0; margin-top: -55px;"></iframe>