Javascript-форум - Интерактивная карта с комментарием

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Интерактивная карта с комментарием (https://javascript.ru/forum/misc/35262-interaktivnaya-karta-s-kommentariem.html)

Deff,
Ничего вычислять не надо, все координаты и так есть в ареа, мы просто забираем их в текстовый массив, делим сплитом на цифровые переменные (я назвал этот массив coords).

Если канвас совпадает по размеру с картой, то никаких проблем, координаты арии и будут координатами канваса.

function draw(canvas, coords, lineColor, fullColor) {
            ctx = canvas.getContext("2d");
            ctx.strokeStyle = lineColor;
            ctx.fillStyle = fullColor;
            ctx.lineWidth = 1;
            ctx.beginPath();
            ctx.moveTo(coords[0], coords[1]);
            for (var i = 2; i < coords.length; i = i + 2) {
                ctx.lineTo(coords[i], coords[i + 1]);
            }
            ctx.stroke();
            if (fullColor != null) {
                ctx.fill();
            }
            ctx.closePath();
        }

Просто и функционально) (Делал интерактивную карту России)

Цитата:

Сообщение от tsigel

Если канвас совпадает по размеру с картой, то никаких проблем, координаты арии и будут координатами канваса.

Тогда - ясно
Хотя имхо картинкой не сложнее, и чище *часто по пойнтерам в coords более грубый край, нежели реально в самой картинке Карты, поэтому есть ограничения по плавности краёв. Картинка может сгладить эти края и вдобавок, каждой области можно всунуть отмасштабированную в меньшем размере, с увеличением при клике(где уже видны: города - заводы улицы и .т.д)
Вообще занимался впихиванием фреймом гугол-карты в области

Deff,
Нууу... Тут как сказать, я бы не сказл что Ваш вриант лучше, большое количество картинок увеличивает вес сайта, он дольше грузится, необходимо догружать картинки, чтобы они не мигали при первом наведении (если они дисплей нун). И нужно делать кучу картинок.

С другой стороны канвас медленно работает в ИЕ (и то только со скриптом) и т.д.

Каждый делает так как ему удобнее, мне было удобнее так ;)

Цитата:

Сообщение от tsigel (Сообщение 231987)

Для того чтобы отображать комментарии в карте с использованием area Вам надо научиться связывать элементы. Это можно делать с помощью data() или можно сделать просто и наглядно.

Добавляем арии и метке одинаковый класс (например <area class='area lebel1' /> будет соответствовать метке <label class='label label1'></label>), тогда мы можем написать:

$('.area').hover(function() {//наведение на область
  var class; //Объявляем переменную "class"
  class = $(this).attr('class');//записали в переменную класс арии (class = "area lebel1")
  class = class.replace('area ', '');//Удалили из переменной класс арии (class = "lebel1")
  $('.' + class).css('display', 'block');//показали метку
 }, function () {//потеря наведения на арию
  $('.label').each(function() {//цикл по всем элементам с классом label
    $(this).css('display', 'none');//скрываем все метки
  })
})

Конечно можно намного короче, постарался разжевать каждый шаг. Надеюсь что у вас остается понимание кода.

Создали карту, написали скрипт, а куда саму верстку комментария девать?:cray:

У Deff'a карта отличная, почти то что нужно, но комментарий там просто текст, а не блок с элементами =( надеюсь до меня дойдет, как все это делать =(

например так:

<div class='labels'>
  <div class='label label1'>...</div>
  <div class='label label2'>...</div>
  <div class='label label3'>...</div>
  <div class='label label4'>...</div>
</div>
<map>
  <area class='area label1' coords='...' />
  <area class='area label2' coords='...' />
  <area class='area label3' coords='...' />
  <area class='area label4' coords='...' />
</map>

Тогда скрипт можно немного оптимизировать, чтобы пошустрее бегал:

var map = $('map'),
  labels = $('.labels');

map.find('.area').hover(function() {//наведение на область
  var class; //Объявляем переменную "class"
  class = $(this).attr('class');//записали в переменную класс арии (class = "area lebel1")
  class = class.replace('area ', '');//Удалили из переменной класс арии (class = "lebel1")
  labels.find('.' + class).css('display', 'block');//показали метку
 }, function () {//потеря наведения на арию
  labels.find('.label').each(function() {//цикл по всем элементам с классом label
    $(this).css('display', 'none');//скрываем все метки
  })
})

Разница в том, что когда мы создали переменные мы сделали ссылки на конкретные элементы в документе и ищем area и label не во всем документе а в конкретных местах.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<style>
.area {
margin: 50px;
width: 150px;
height: 100px;
background-color: rgb(255, 222, 173);
}
.label {
background-color: rgb(250, 240, 230);
width: 40px;
height: 20px;
position: absolute;
margin: -20px -10px 0 0;
display:none;
}
</style>
<div class='area'></div>
<div class='label'></div>
<script>

function muve(e) {
  $('.label').css({
    'left' : e.pageX + 5,
    'top' : e.pageY + 5
  })
}

$('.area').hover(function(e) {
  $(document).bind('mousemove', muve);
  $('.label').css({
    'display' : 'block',
    'left' : e.pageX,
    'top' : e.pageY
  })
}, function() {
  $(document).unbind('mousemove', muve);
  $('.label').css('display', 'none');
})
</script>

Это должно навести вас на мысли как сделать подвижную метку. Будут вопросы - пишите!