Использование jQuery для изменения значений координат карты изображения - PullRequest
Новая
       22

Использование jQuery для изменения значений координат карты изображения

4 голосов
/ 31 июля 2010

У меня довольно сложная карта изображений, которую я хотел бы уменьшить вдвое.Для этого потребуется разделить все значения координат на 2. Поскольку существуют тысячи значений координат, я подумал, что мог бы использовать jQuery для обхода DOM, чтобы найти значения координат, и разделить их на два.Я довольно любитель, когда дело доходит до JavaScript и jQuery, и я написал следующий код, который не работает для выполнения моей задачи: 

$(function(){
    $('area').each(function(){
        coord_vals= $('area'[coords]).split(',');
        new_vals= coord_vals/2;
        $('area'[coords]).val(new_vals + ',');
    });
});

Вот первые несколько строк HTML, которые я пытаюсь пройти: 

<div id="map">
    <img class="map" src="images/us_map.jpg" width="960" height="593" usemap="#usa">
    <map name="usa">
    <area href="#" title="SC" shape="poly" coords="735,418, 734,419, 731,418, 731,416, 729,413, 727,411, 725,410, 723,405, 720,399, 716,398, 714,396, 713,393, 711,391, 709,390, 707,387, 704,385, 699,383, 699,382, 697,379, 696,378, 693,373, 690,373, 686,371, 684,369, 684,368, 685,366, 687,365, 687,363, 693,360, 701,356, 708,355, 724,355, 727,356, 728,360, 732,359, 745,358, 747,358, 760,366, 769,374, 764,379, 762,385, 761,391, 759,392, 758,394, 756,395, 754,398, 751,401, 749,404, 748,405, 744,408, 741,409, 742,412, 737,417, 735,418"></area>
    <area href="#" title="HI" shape="poly" coords="225,521, 227,518, 229,517, 229,518, 227,521, 225,521"></area>
    <area href="#" title="HI" shape="poly" coords="235,518, 241,520, 243,520, 244,516, 244,513, 240,512, 236,514, 235,518"></area>

Ответы [ 5 ]

7 голосов
/ 01 августа 2010

Вы можете сделать это так: 

$("area").each(function() {
    var pairs = $(this).attr("coords").split(', ');
    for(var i=0; i<pairs.length; i++) {
        var nums = pairs[i].split(',');
        for(var j=0; j<nums.length; j++) {
            nums[j] = parseFloat(nums[j]) /2;
        }
        pairs[i] = nums.join(',');
    }
    $(this).attr("coords", pairs.join(', '));
});

Это поддерживает форматы и тщательно преобразует каждый из них, вот вывод: 

<div id="map">
  <img class="map" src="images/us_map.jpg" width="960" height="593" usemap="#usa"> 
  <map name="usa"> 
    <area href="#" title="SC" shape="poly" coords="367.5,209, 367,209.5, 365.5,209, 365.5,208, 364.5,206.5, 363.5,205.5, 362.5,205, 361.5,202.5, 360,199.5, 358,199, 357,198, 356.5,196.5, 355.5,195.5, 354.5,195, 353.5,193.5, 352,192.5, 349.5,191.5, 349.5,191, 348.5,189.5, 348,189, 346.5,186.5, 345,186.5, 343,185.5, 342,184.5, 342,184, 342.5,183, 343.5,182.5, 343.5,181.5, 346.5,180, 350.5,178, 354,177.5, 362,177.5, 363.5,178, 364,180, 366,179.5, 372.5,179, 373.5,179, 380,183, 384.5,187, 382,189.5, 381,192.5, 380.5,195.5, 379.5,196, 379,197, 378,197.5, 377,199, 375.5,200.5, 374.5,202, 374,202.5, 372,204, 370.5,204.5, 371,206, 368.5,208.5, 367.5,209">
    <area href="#" title="HI" shape="poly" coords="112.5,260.5, 113.5,259, 114.5,258.5, 114.5,259, 113.5,260.5, 112.5,260.5">
    <area href="#" title="HI" shape="poly" coords="117.5,259, 120.5,260, 121.5,260, 122,258, 122,256.5, 120,256, 118,257, 117.5,259"> 
  </map>
</div>

Вы можете попробовать здесь .

2 голосов
/ 16 января 2013

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

Первое, что он делает - сохраняет исходные координаты карты изображения, а затем запускает функцию mapResize при каждом изменении размера страницы. 

$(function() {
  $("area").each(function() { $(this).attr('data-coords', $(this).attr('coords')) });
  $(window).resize(mapResize);
  setTimeout(mapResize, 1);
});

var mapResize = function() {

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

Затем код делит текущую ширину изображения на его оригинальную ширину. Позже мы используем это число, умноженное на координаты, чтобы получить новое значение координат. 

  $("map").each(function() {
    var img = $("img[usemap='#" + $(this).attr("name") + "']");

    if (img[0].naturalWidth) {
      widthchange = img.width() / img[0].naturalWidth;
    }
    else {
      widthchange = 1;
      setTimeout(mapResize, 1000);
    }
    //borrowed this from Nick's answer.  It was spot on!
    $("area").each(function() {
      var pairs = $(this).attr("data-coords").split(', ');
      for(var i=0; i<pairs.length; i++) {
          var nums = pairs[i].split(',');
          for(var j=0; j<nums.length; j++) {
              nums[j] = parseFloat(nums[j]) * widthchange;
          }
          pairs[i] = nums.join(',');
      }
      $(this).attr("coords", pairs.join(', '));
    });
  });
}

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

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

1 голос
/ 23 августа 2012 
 jQuery('#planetmap area').each(function (e) {
            jQuery(this).mousemove(function () {
                jQuery('#dataval').html(jQuery(this).attr('coords'));
                jQuery(this).click(function () {
                    jQuery(this).attr('title', 'SHASHANK');
                    var current_cordinate = jQuery(this).attr('coords').split(',');
                    var nextX = Math.ceil(current_cordinate[2]) + 1;
                    var NextY = Math.ceil(current_cordinate[3]);
                    var downX = Math.ceil(current_cordinate[2]) + 1;
                    var downY = Math.ceil(downX) + 1;
                    //var new_next_coordinate = jQuery(this).attr('coords', ('0,0,' + nextX + ',' + NextY))
                    //alert(new_next_coordinate.text());
                    jQuery(jQuery(this).find('coords','0,0,'+nextX+','+NextY)).attr('title', 'SHASHANK');
                    alert("SUBMIT");

                });
            });
        });
1 голос
/ 01 августа 2010

Я думаю, что было бы лучше написать некоторый код для создания нового кода для вас.Это сократит время инициализации и сделает ваших пользователей счастливее.Я бросил вместе демо , в основном он заполняет текстовое поле преобразованным кодом, которым вы просто заменяете оригинал.

HTML 

<div id="map">
 <img class="map" src="images/us_map.jpg" width="960" height="593" usemap="#usa">
 <map name="usa">
  <area href="#" title="SC" shape="poly" coords="735,418, 734,419, 731,418, 731,416, 729,413, 727,411, 725,410, 723,405, 720,399, 716,398, 714,396, 713,393, 711,391, 709,390, 707,387, 704,385, 699,383, 699,382, 697,379, 696,378, 693,373, 690,373, 686,371, 684,369, 684,368, 685,366, 687,365, 687,363, 693,360, 701,356, 708,355, 724,355, 727,356, 728,360, 732,359, 745,358, 747,358, 760,366, 769,374, 764,379, 762,385, 761,391, 759,392, 758,394, 756,395, 754,398, 751,401, 749,404, 748,405, 744,408, 741,409, 742,412, 737,417, 735,418"></area>
  <area href="#" title="HI" shape="poly" coords="225,521, 227,518, 229,517, 229,518, 227,521, 225,521"></area>
  <area href="#" title="HI" shape="poly" coords="235,518, 241,520, 243,520, 244,516, 244,513, 240,512, 236,514, 235,518"></area>
 <!-- ETC -->
 </map>
</div>

<textarea id="newAreaTags"></textarea>

Script 

$(document).ready(function(){
 var newmap = '', coords;
 $('map[name=usa]').find('area').each(function(){
  newmap += '<area href="#" title="' + $(this).attr('title') +
   '" shape="' + $(this).attr('shape') + '" coords="';
  coords = $(this).attr('coords').replace(/\s+/g,'').split(',');
  for (var i = 0; i < coords.length; i++){
   coords[i] = Math.round(parseInt( coords[i], 10) / 2);
  }
  newmap += coords.join(',') + '"></area>\n';
 });
 $('#newAreaTags').val(newmap);
})
0 голосов
/ 01 августа 2010

Вы были на правильном пути, просто вы не использовали $ (это) в вашем цикле.Также, чтобы получить координаты, вы можете использовать attr ('координаты')

Фиксированная версия 

$(function(){ 
   $('area').each(function(){
      var coord_vals = $(this).attr('coords').split(',');
      var new_vals;
      for(var i=0; i<coord_vals.length; i++) {
          new_vals[i] = coord_vals[i] / 2;
      }
      new_vals = new_vals.join(",");
      $(this).attr('coords').val(new_vals);
   });
});
...