如何使用弹出按钮创建Google地图工具提示

分享于 

3分钟阅读

Web开发

  繁體

介绍

这是我的第一篇文章"弹出按钮在网页上节省空间的好方法。"。 在前一篇文章中,我展示了如何轻松地将弹出组件组件集成到你的项目中。 在本文中,我想展示弹出按钮的一个特殊特性,它是附加到映射图像区域的能力。

背景

为了附加到图像区域,你只需要设置 AttachTo ="imageId[areaId]"。 非常简单。

把代码写上

假设你有一个图像,它的中有相机点映射:

map.gif

<imgid="theMap"src="map.gif"usemap="#camera"/><mapname="camera"><areaid="c1"shape="rect"coords="149,164,173,185"/><areaid="c2"shape="rect"coords="177,265,202,296"/><areaid="c3"shape="rect"coords="283,169,308,190"/><areaid="c4"shape="rect"coords="307,312,332,332"/></map>

你有一个类似这样的弹出框样式表:

box.png

.box
{
 width:357px;
 height:165px;
 background-image:url(box.png);
 background-repeat:no-repeat;
 overflow:hidden;
 padding-left:10px;
 padding-right:100px;
 padding-top:10px;
 position:absolute;
}

例如要将 Flyout 附加到的相机,例如 WI,你可以设置:

<obout:Flyoutrunat="server"ID="c1_flyout"AttachTo="theMap[c1]"NoneEffect="true"><divclass="box"><!--<span class="code-comment"> Content of pop up --></span> 
 </div></obout:Flyout>

现在,我们在地图上有一个工具提示,就像 谷歌地图 中的那个。 速度非常快,不是? 在中,你可能会看到我们的结果:如何使用弹出按钮制作Google地图工具提示,例如在我们的网站上发布。

你可以在矩形或者多边形等区域形状上附着,你可以在这里查看详细信息。

结束语

虽然这个功能非常简单,但我认为它是非常特殊和独特的,因为我没有发现在行业提供这里功能的任何工具。 当鼠标悬停在图片中的人的名字或者信息时,它似乎会使生活变得更容易。 我希望你觉得它有用。

就像我在最后的弹出文章中提到的,Flyout 对于个人和商业用户来说是完全免费的。 许多人都问我们是否计划在未来商业化 Flyout。 答案是免费永远免费。 我很高兴向你们介绍一个免费的。 随时可以在oboutSuite中获取最新版本的Flyout


tool  MAKE  Tooltip  Flyout  
相关文章