如何制作带有浮出控件的 Google 地图工具提示

• 下载源代码 - 106 KB

引言

这是我对第一篇文章 "Flyout - 一种节省网页空间的好方法" 的后续。 在上一篇文章中，我展示了如何轻松地将 免费 Flyout 组件 集成到您的项目中。 在本文中，我想展示 Flyout 的一项特殊功能，即它能够附加到映射图像的区域。

背景

为了附加到图像的某个区域，您只需要设置 AttachTo = "imageId[areaId]"。 非常简单。

动手编码

假设您有一张带有摄像头位置标记的图像

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

您有一个如下所示的弹出框样式表

.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 附加到例如 威斯康星州麦迪逊市 的摄像头，您可以设置 AttachTo = "theMap[c1]"

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

现在，我们在地图上有一个像 Google 地图那样的工具提示。 这非常快，不是吗？ 您可以在我们的网站上发布的 使用 Flyout 创建 Google 地图工具提示 示例中查看我们的结果。

Flyout 不仅可以附加到矩形区域，还可以附加到其他区域形状，例如圆形或多边形，您可以在 这里 查看详细信息。

结论

虽然此功能非常简单，但我认为它非常特别和独特，因为我还没有找到任何行业中的工具提示组件提供此功能。 当您想在鼠标悬停时显示图片中人物的姓名或信息时，它似乎可以使生活更轻松。 希望您觉得它有用。

正如我在上一篇 Flyout 文章中提到的，Flyout 无论用于个人还是商业用途都是完全免费的。 很多人问我们是否计划将来将 Flyout 商业化。 答案是，一旦免费，就永远免费。 我很高兴向您介绍一款免费且优秀的组件。 您可以随时在 oboutSuite 中获取 Flyout 的最新版本。