計算地圖多邊形寬度和高度

Question

比方說，我有這樣的地圖：

<map name="diffmap1" id="diffmap1" class="myMap"> 
<area shape="poly" coords="152,347,253,292,264,307,167,358" class="diff diff1"> 
<area shape="poly" coords="93,244,164,215,171,233,97,264" class="diff diff2"> 
</map> 

和jQuery：

$('.diff').click(function(e){ 
//code here 
}); 

如何計算每個多邊形的最大高度和寬度？

Answer 1

下面是HTML代碼：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#diffmap1"> 
<map name="diffmap1" id="diffmap1" class="myMap"> 
<area id="area1" shape="poly" coords="152,347,253,292,264,307,167,358" class="diff diff1"> 
<area id="area2" shape="poly" coords="93,244,164,215,171,233,97,264" class="diff diff2"> 
</map> 

和JS代碼：

function getDistance(p1,p2){ 
    return Math.sqrt((p2.y - p1.y)*(p2.y - p1.y) + (p2.x - p1.x)*(p2.x - p1.x)); 
} 
$(document).ready(function(){ 
    var area_distances_min_max = new Object(); 
    $.each($('area'), function(){ 
     var arr_coords = $(this).attr('coords').split(','); 
     var i = 0; 
     var k = 0; 
     var arr_real_coords = new Array(); 
     while(i<arr_coords.length){ 
      var obj = new Object(); 
      obj.x = arr_coords[i]; 
      obj.y = arr_coords[++i]; 
      arr_real_coords.push(obj); 
      i++; 
      k++; 
     } 

     var arr_distances = new Array(); 
     $.each(arr_real_coords, function(){ 
      var current_coord = this; 
      $.each(arr_real_coords, function(){ 
       if(getDistance(current_coord,this)>0)arr_distances.push(getDistance(current_coord,this)) 
      }) 
     }) 

     var obj = new Object(); 

     obj.max = Math.max.apply(Math,arr_distances); 
     obj.min = Math.min.apply(Math,arr_distances); 


     var id = $(this).attr('id') 
     area_distances_min_max[id] = obj; 
    }) 
    console.log(area_distances_min_max); 
}) 

在陣列area_distances_min_max將存儲分鐘和點之間的最大距離，你也可以檢查結果控制檯這裏：http://jsfiddle.net/aaa_borza/eer8k/18/。

此致敬禮！