- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想知道我做错了什么。我正在使用 bMap ( http://www.blocsoft.com/bmap/ ) 获取 Google map ,在演示中,一切看起来都是正确的。
我的版本看起来不太好。我失去了所有的圆 Angular 。我的猜测是这是一个常见的错误,但我不知道,因为 map-baloon 样式应该是内联的。除此之外 - 我已经尝试完全禁用我的 CSS,并且 Angular 落仍然是方形的。不仅如此,盒子看起来有点乱。
我应该从哪里开始调试这个?
Inspector 的 HTML:
<div style="z-index: 106; position: absolute; left: 0px; top: 0px;"><div style="display: none;"><div style="width: 107px; height: 137px; overflow: hidden; position: absolute; left: 21px; top: 26px;"><img style="position: absolute; left: -784px; top: -102px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px; width: 1029px; height: 255px;" src="http://maps.gstatic.com/mapfiles/cb/mod_cb_scout/cb_scout_sprite_api_003.png"><div style="position: absolute; left: 7px; top: 5px; width: 94px; height: 75px; background-color: rgb(211, 211, 211); z-index: 1;"></div><div style="width: 95px; bottom: 38px; z-index: 1; left: 7px; font-family: Arial,sans-serif; font-size: 9px; color: gray; background-color: white; position: absolute;">Loading...</div><img style="position: absolute; left: 7px; top: 5px; width: 94px; height: 75px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px; opacity: 0.25;" src="http://maps.gstatic.com/mapfiles/transparent.png"></div><div style="width: 21px; height: 26px; overflow: hidden; position: absolute; left: 63px; top: 127px;"><img style="position: absolute; left: -441px; top: -102px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px; width: 1029px; height: 255px;" src="http://maps.gstatic.com/mapfiles/cb/mod_cb_scout/cb_scout_sprite_api_003.png"></div></div><div style="position: absolute; left: 257px; top: 84px; cursor: default; z-index: 307;"><div style="width: 48px; height: 8px; overflow: hidden; position: absolute; z-index: 1; -moz-user-select: none; left: 162px; top: 123px;"><img style="position: absolute; left: -49px; top: -715px; width: 690px; height: 786px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;" src="http://maps.gstatic.com/mapfiles/iw3.png"></div><div style="width: 44px; height: 8px; overflow: hidden; position: absolute; z-index: 1; -moz-user-select: none; left: 157px; top: 130px;"><img style="position: absolute; left: -44px; top: -722px; width: 690px; height: 786px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;" src="http://maps.gstatic.com/mapfiles/iw3.png"></div><div style="width: 40px; height: 8px; overflow: hidden; position: absolute; z-index: 1; -moz-user-select: none; left: 152px; top: 137px;"><img style="position: absolute; left: -39px; top: -729px; width: 690px; height: 786px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;" src="http://maps.gstatic.com/mapfiles/iw3.png"></div><div style="width: 36px; height: 8px; overflow: hidden; position: absolute; z-index: 1; -moz-user-select: none; left: 147px; top: 144px;"><img style="position: absolute; left: -34px; top: -736px; width: 690px; height: 786px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;" src="http://maps.gstatic.com/mapfiles/iw3.png"></div><div style="width: 31px; height: 8px; overflow: hidden; position: absolute; z-index: 1; -moz-user-select: none; left: 142px; top: 151px;"><img style="position: absolute; left: -29px; top: -743px; width: 690px; height: 786px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;" src="http://maps.gstatic.com/mapfiles/iw3.png"></div><div style="width: 27px; height: 8px; overflow: hidden; position: absolute; z-index: 1; -moz-user-select: none; left: 137px; top: 158px;"><img style="position: absolute; left: -24px; top: -750px; width: 690px; height: 786px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;" src="http://maps.gstatic.com/mapfiles/iw3.png"></div><div style="width: 23px; height: 8px; overflow: hidden; position: absolute; z-index: 1; -moz-user-select: none; left: 132px; top: 165px;"><img style="position: absolute; left: -19px; top: -757px; width: 690px; height: 786px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;" src="http://maps.gstatic.com/mapfiles/iw3.png"></div><div style="width: 18px; height: 8px; overflow: hidden; position: absolute; z-index: 1; -moz-user-select: none; left: 127px; top: 172px;"><img style="position: absolute; left: -14px; top: -764px; width: 690px; height: 786px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;" src="http://maps.gstatic.com/mapfiles/iw3.png"></div><div style="width: 14px; height: 8px; overflow: hidden; position: absolute; z-index: 1; -moz-user-select: none; left: 122px; top: 179px;"><img style="position: absolute; left: -9px; top: -771px; width: 690px; height: 786px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;" src="http://maps.gstatic.com/mapfiles/iw3.png"></div><div style="width: 10px; height: 8px; overflow: hidden; position: absolute; z-index: 1; -moz-user-select: none; left: 117px; top: 186px;"><img style="position: absolute; left: -4px; top: -778px; width: 690px; height: 786px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;" src="http://maps.gstatic.com/mapfiles/iw3.png"></div><div style="width: 97px; height: 25px; overflow: hidden; position: absolute; z-index: 1; -moz-user-select: none; left: 113px; top: 99px;"><img style="position: absolute; left: 0px; top: -691px; width: 690px; height: 786px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;" src="http://maps.gstatic.com/mapfiles/iw3.png"></div><div style="position: absolute; left: 0px; top: 0px; width: 321px; height: 122px; overflow: hidden; -moz-user-select: none; background-color: white; border: 1px solid rgb(171, 171, 171);"></div><div style="width: 321px; height: 122px;"><div style="width: 10px; height: 10px; overflow: hidden; position: absolute; opacity: 0.7; right: 12px; top: 12px; z-index: 10000; cursor: pointer;"><img style="position: absolute; left: -18px; top: -44px; width: 68px; height: 67px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;" src="http://maps.gstatic.com/mapfiles/mv/imgs8.png"></div><div style="cursor: default; position: absolute; left: 18px; top: 18px; z-index: 2; overflow: auto; width: 287px; height: 88px;"><div style="overflow: auto;"><h2>Frederikshåb Hundeskov</h2><a href="/?p=424"> More Information</a></div></div></div></div></div>
最佳答案
我怀疑您正在使用 Google map 的 V3,并将结果与 bMap 站点中的 V2 演示进行比较。气球 (InfoWindows) 在 V2 中有圆 Angular ,在 V3 中有方 Angular 。我没有看到 bMap 站点中提到的 CSS。
有一个用于圆 Angular 气球的实用程序库,名为 InfoBubble (example here)但我不确定与 bMap 结合起来有多容易。
关于盒子看起来乱七八糟,是吗like in this question ?有一个 CSS 修复可应用于您的 map div:
#map_canvas label { width: auto; display:inline; }
#map_canvas img { max-width: none; max-height: none; }
关于javascript - 谷歌地图气球丢失样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11064284/
是否有一个很好的模拟/等同于JEDI Desktop Alert(桌面右下角的一种气球)? 气球提示无法像堆栈一样显示(新提示位于其他提示的顶部),但 JEDI Desktop Alert 可以做到。
是否可以通过编程方式关闭 TTrayIcon 气球提示? 问题: 我有一个计时器,每分钟检查一次消息。当它发现一条消息(例如 ABC 服务已停止)时,它会显示带有消息的气球: procedure TF
如何更改 google 地球中地标气球的样式?不是kml数据,是气球本身。例如,我想圆润边界。我做了一个示例,但总是在我放置的样式周围看到空白边框。 Javascript代码: var ge=null
这是我当前的图像圈气球的 CSS .circle-image{ width: 64px; height: 64px; border-radius: 50%; backg
我有一个 TEdit,其中 PasswordChar 设置为 *,并且我希望如果 Caps Lock 模式已打开。仅当编辑器获得焦点或打开 Caps Lock 模式且焦点位于该编辑器中时,才会出现该标
我有 4 个股票图表想要比较。当我尝试为它们设置 ballon 属性时,我总是得到一些多余的属性。 我的第一个想法是只指定一个 StockGraph 但我得到了一个额外的对象。 let chart
让用户将鼠标悬停在链接/标签/文本上并快速弹出包含有关该项目的信息的了解更多气球的最佳方式是什么。有什么原生于 HTML5 的东西吗?我浏览了 w3schools 和网络上的其他一些资源,但没有发现任
我正在使用 osmdroid 和 osmdroid 奖励包来展示气球。在气球内部有一个 ScrollView ,其中包含一个线性布局(垂直)作为 subview 。 当我尝试向下滚动时,我的 map
每当我在 Visual Studio 中使用宏时,系统托盘中都会出现一个烦人的提示气球和伴随的“砰”声。它说: Visual Studio .NET macros To stop the macro
如何在 iOS 中触摸或点击标记时制作 map 气球?简而言之,我希望我的应用程序的 map 功能能够弹出 map 气球以显示有关标记所在位置的某些信息。 我正在使用谷歌地图,因为我听说它现在比 iO
我已经实现了一个融合表格 map 来为我的谷歌地图创建国家填充......但是我真的需要摆脱当你点击一个国家时弹出的信息窗口/卡片。我试着格式化卡片,这样就没有实际内容了,但它根本没有改变卡片。它们仍
我是一名优秀的程序员,十分优秀!