Впервые построена интерактивная карта пола

-1

У меня есть интересная задача создания интерактивной карты для компании по привлечению семьи на их сайте. Идея состоит в том, что люди могут нажимать на активность, и она будет отображаться на карте, где она находится с некоторой информацией в диалоговом окне. Также их должен быть вариант, который люди могут щелкнуть непосредственно на карте в здании, и это показывает ту же самую коробку с содержимым в ней.Впервые построена интерактивная карта пола

Это ново для меня, и я хотел бы иметь кого-то, кто может указать мне в правильном направлении, как я могу построить это или инструменты, которые могут мне помочь в этом. Я смотрю вокруг и вижу много о холсте HTML5, но я думал, если их другим способом (простой способ) для новичка построить интерактивную карту пола.

Спасибо всем за вашу помощь.

источник

2015-02-28 user3507500

Это просто прочная карта здания (например, план), или когда вы говорите «щелкните по карте и покажите, где она находится», вы также включаете город, страну, карты мира? – sinanspd

@sinanspd нет, это примерно так: http://i59.tinypic.com/r9rjn5.jpg – user3507500

Ребята благодарит за помощь, мне удалось создать карту с помощью Jquery, которая была проще, чем использование HTML-холста. Я использовал технику из Sam Dunn в качестве основы для своей карты и добавляю свои собственные функции поверх нее. Подробнее о том, как Сэм Данн можно сделать интерактивный образ, вы можете прочитать здесь: http://buildinternet.com/2009/11/making-an-interactive-picture-with-jquery/

Спасибо всем, что указал мне в правильном направлении. Этот пост можно закрыть.

Спасибо!

источник

2015-03-08 15:06:24 user3507500

-1

Я создал очень простой документ, который может помочь вам начать работу, я добавляю изображения в divs в 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(); 
}); 
});

источник

2015-02-28 06:07:57

Спасибо! Я попробую и дам вам знать, как все прошло. – user3507500

Это зависит от большого количества жесткого кодирования и большого количества дубликатов кода. Это не будет особенно удобно, если вы перейдете к 3 зданиям. –

Ну, это не предназначено для копирования прошлого или чего-то еще, я создал это, чтобы показать некоторое легкое взаимодействие jquery, которое он может использовать, и помочь ему начать работу. –

Если вы можете использовать обычную карту, я бы рекомендовал leaflet, это довольно легкий картохранилище ,

Я отредактирую свой ответ, если вы предоставите дополнительные сведения. Это действительно зависит от того, нужно ли вводить собственный план этажа или использовать карту. И насколько сложным является этот план этажа.

источник

2015-02-28 21:00:49

Это этажная карта, которую мне нужно использовать на веб-сайте. (Http://i59.tinypic.com/r9rjn5.jpg) И будет отображаться список ссылок за пределами этой карты этажей, в котором должно быть указано диалоговое окно при нажатии на ссылки на действия. – user3507500

Впервые построена интерактивная карта пола

ответ

Смежные вопросы