计算地图多边形的宽度和高度

Question

Let's say I have this map:

<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>

and jquery:

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

How can I calculate the maximum height and width of each polygon?

Answer 1

Here is the HTML code:

<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>

and the JS code:

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);
})

In array area_distances_min_max will be stored min and max distances between points, also you can check the result in console here: http://jsfiddle.net/aaa_borza/eer8k/18/ .

Best regards!