Question

我有一个有趣的任务，就是在他们的网站上为家庭吸引力公司建立一个互动地图。这个想法是人们可以点击一个活动，它会在地图上显示它所在的位置，并在对话框中显示一些信息。此外，他们必须是一个选项，人们可以直接点击建筑物上的地图，并显示包含内容的同一个框。

这对我来说是新的，我希望有一个人可以指出我正确的方向，我可以如何构建这个或可以帮助我的工具。我环顾四周，看了很多关于HTML5画布的内容，但我在考虑是否为初学者提供另一种方式（简单方法）来构建交互式楼层地图。

感谢大家的帮助。

Answer 1

如果您可以使用常规地图，我会推荐leaflet，它是非常轻量级的地图库。

如果您提供一些其他详细信息，我会编辑我的答案。这实际上取决于您是否需要输入自己的平面图，或者是否可以使用地图。这个平面图有多复杂。

Answer 2

伙计感谢您的帮助，我设法使用Jquery构建地图，这比使用HTML画布更容易。我使用Sam Dunn的技术作为我的地图的基础，并在其上添加我自己的功能。有关Sam Dunn制作交互式图像的更多信息，请点击此处阅读：http://buildinternet.com/2009/11/making-an-interactive-picture-with-jquery/

感谢大家指出我正确的方向。这篇文章可以关闭。

谢谢！

Answer 3

我创建了一个非常基本的文档，可能会帮助您入门，我在div中添加html中的图像，将它们放在css中，并使用jquery和jquery ui使它们交互。

HTML：

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.min.js"></script>
<script type='text/javascript' src='scripts.js'></script>
<meta charset="utf-8" />
<link rel='stylesheet' type='text/css' href='http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css'/>
<link rel='stylesheet' type='text/css' href='styles.css' />
</head>
<body>
<div id="building1"><img src="http://www.dundjinni.com/forums/uploads/dragonwolf/ACE_Shack_big_td_dgw-b.png" alt="building1" width="100px" height="200px"></div>
<div id="building2"><img src="http://www.dundjinni.com/forums/uploads/dragonwolf/ACE_Shack_big_td_dgw-b.png" alt="building2" width="100px" height="200px"></div>
<div id="building3"><img src="http://www.dundjinni.com/forums/uploads/dragonwolf/ACE_Shack_big_td_dgw-b.png" alt="building3" width="100px" height="200px"></div>
<div id="building4"><img src="http://www.dundjinni.com/forums/uploads/dragonwolf/ACE_Shack_big_td_dgw-b.png" alt="building4" width="100px" height="200px"></div>

 <!-- Text in the accordion when you click on the first building (Left top) -->
    <div id="information1">
        <h3>1Something</h3>
        <div>
        <p>1A bit of information.</p>
    </div>
        <h3>1Something more</h3>
        <div>
        <p>1A bit more information.</p>
    </div>
         <h3>1Something more, again.</h3>
        <div>
         <p>1A bit of extra information.</p>
    </div>
    </div>     

    <!-- Text in the accordion when you click on the second building (Right top) -->

    <div id="information2">
    <h3>2Something</h3>
        <div>
        <p>2A bit of information.</p>
    </div>
        <h3>2Something more</h3>
        <div>
        <p>2A bit more information.</p>
    </div>
         <h3>2Something more, again.</h3>
        <div>
         <p>2A bit of extra information.</p>
    </div></div>

    <!-- Text in the accordion when you click on the third building (Left bottom) -->

    <div id="information3">
    <h3>3Something</h3>
        <div>
        <p>3A bit of information.</p>
    </div>
        <h3>3Something more</h3>
        <div>
        <p>3A bit more information.</p>
    </div>
         <h3>3Something more, again.</h3>
        <div>
         <p>3A bit of extra information.</p>
    </div></div>

    <!-- Text in the accordion when you click on the fourth building (Right bottom) -->

    <div id="information4">
    <h3>4Something</h3>
        <div>
        <p>4A bit of information.</p>
    </div>
        <h3>4Something more</h3>
        <div>
        <p>4A bit more information.</p>
    </div>
         <h3>4Something more, again.</h3>
        <div>
         <p>4A bit of extra information.</p>
    </div></div>
</body>
</html>

的CSS：

#building1 {
    position: fixed;
    left: 10px;
    top: 10px;
}

#building2 {
    position: fixed;
    left: 300px;
    top: 10px;
}

#building3 {
    position: fixed;
    left: 10px;
    top: 300px;
}

#building4 {
    position: fixed;
    left: 300px;
    top: 300px;
}

#information1 {
    position: fixed;
    left: 600px;
    top: 10px;
}

#information2 {
    position: fixed;
    left: 600px;
    top: 10px;
}

#information3 {
    position: fixed;
    left: 600px;
    top: 10px;
}

#information4 {
    position: fixed;
    left: 600px;
    top: 10px;
}

jQuery的：

$(document).ready(function(){
$('#information1').hide();
$('#information2').hide();  /* Hide all the information accordions  */
$('#information3').hide();
$('#information4').hide();
$('#building1').click(function(){
$('#information2').hide();
$('#information3').hide();  /* Hide all the information accordions except the first one, that one will show if you click the first building */
$('#information4').hide();
$('#information1').show();
$('#information1').accordion();  /* simple menu when you use jquery ui */
});
$('#building2').click(function(){
$('#information1').hide();
$('#information3').hide();   /* Hide all the information accordions except the second one, that one will show if you click the second building */
$('#information4').hide();
$('#information2').show();
$('#information2').accordion();
});
$('#building3').click(function(){
$('#information1').hide();
$('#information2').hide();   /* Hide all the information accordions except the third one, that one will show if you click the third building */
$('#information4').hide();
$('#information3').show();
$('#information3').accordion();
});
$('#building4').click(function(){
$('#information1').hide();
$('#information2').hide();   /* Hide all the information accordions except the fourth one, that one will show if you click the fourth building */
$('#information3').hide();
$('#information4').show();
$('#information4').accordion();
});
});

第一次建立互动地板图

3 个答案: