我在区域坐标方面遇到了一些问题。我有一个地图的图像，我已经设置了坐标，但是当我调整地图图像的大小时，则调整位置变化。我想在地图图像增加或减少时定位相同的坐标。我附上了以下代码：
<html>
<head>
<title>Property Map Detail</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<link type="text/css" rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
//样式代码
<style>
#testing{
border:4px solid #33B792;
background:#2f4e5f;
width:200px;
min-height:75px;
height:auto;
border-radius:5px 5px 5px 5px;
display:none;
position:absolute;
color:#fff;
text-align:center;
z-index:999999;
}
.traker {
position:relative;
cursor:pointer;
width:15%;
float:left;
right:-18px;
top:-16px;
}
#dataSetss{
padding-top:5px;
padding-bottom:5px;
width:85%;
float:left;
}
</style>
//指针上的警报弹出脚本和ajax上的onclick事件获取数据
<script>
var mouseX,mouseY,windowWidth,windowHeight;
var popupLeft,popupTop;
$(document).ready(function(){
$(document).mousemove(function(e){
mouseX = e.pageX;
mouseY = e.pageY;
if( this.offsetLeft !=undefined)
mouseX = e.pageX - this.offsetLeft;
if( this.offsetTop != undefined)
mouseY = e.pageY; - this.offsetTop;
if(mouseX < 0)
mouseX =0;
if(mouseY < 0)
mouseY = 0;
windowWidth = $(window).width()+$(window).scrollLeft();
windowHeight = $(window).height()+$(window).scrollTop();
});
$("#info").draggable()
});
function alertPopup(plotNo,sector,scheme){
if(plotNo.trim() != '') {
$.ajax({
type: "POST",
url: "enquiry_ajax.php",
async: true,
data:"plot="+plotNo+"§or="+sector+"&scheme="+scheme,
success: function(result){
if(result != ''){
document.getElementById("dataSetss").innerHTML = result;
$('#testing').show();
var popupWidth = $('#testing').outerWidth();
var popupHeight = $('#testing').outerHeight();
if(mouseX+popupWidth > windowWidth)
popupLeft = mouseX-popupWidth;
else
popupLeft = mouseX;
if(mouseY+popupHeight > windowHeight)
popupTop = mouseY-popupHeight;
else
popupTop = mouseY;
if(popupLeft < $(window).scrollLeft()){
popupLeft = $(window).scrollLeft();
}
if(popupTop < $(window).scrollTop()){
popupTop = $(window).scrollTop();
}
if(popupLeft < 0 || popupLeft == undefined)
popupLeft = 0;
if(popupTop < 0 || popupTop == undefined)
popupTop = 0;
$('#testing').offset({top:popupTop,left:popupLeft});
} else {
document.getElementById("dataSetss").innerHTML = 'No Record Found';
$('#testing').show();
var popupWidth = $('#testing').outerWidth();
var popupHeight = $('#testing').outerHeight();
if(mouseX+popupWidth > windowWidth)
popupLeft = mouseX-popupWidth;
else
popupLeft = mouseX;
if(mouseY+popupHeight > windowHeight)
popupTop = mouseY-popupHeight;
else
popupTop = mouseY;
if(popupLeft < $(window).scrollLeft()){
popupLeft = $(window).scrollLeft();
}
if(popupTop < $(window).scrollTop()){
popupTop = $(window).scrollTop();
}
if(popupLeft < 0 || popupLeft == undefined)
popupLeft = 0;
if(popupTop < 0 || popupTop == undefined)
popupTop = 0;
$('#testing').offset({top:popupTop,left:popupLeft});
}
}
});
} else {
document.getElementById("dataSetss").innerHTML = 'No Record Found';
$('#testing').show();
}
}
function closePopup(){
$('#testing').hide();
}
// image resize script
$(document).ready(function () {
$('#zoom-in').click(function () {
$('#info').width($('#info').width()*1.2)
$('#info').height($('#info').height()*1.2)
})
$('#zoom-out').click(function () {
$('#info').width($('#info').width()/1.2)
$('#info').height($('#info').height()/1.2)
})
});
</script>
</head>
<body>
<div id="testing"><div id="dataSetss"></div><img src="fancy_close.png" alt="" class="traker" id="trim" onClick="closePopup();"></div>
<div class="col-sm-9 col-md-2 main" style="background:#6898F6; height:100%;">
<div class="buttons">
<button class="zoom-in" id="zoom-in">Zoom In</button>
<button class="zoom-out" id="zoom-out">Zoom Out</button>
</div>
</div>
<div class="col-sm-9 col-md-10 sidebar" style="overflow:scroll; width:80%; height:100%">
//绘制地图图像
<img src="1-b.png" alt="b2" name="info" usemap="#planetmap" id="info" border="0">
</div>
<div>
//区域坐标集
<map name="planetmap">
<area shape="poly" coords="504,1945,504,2052,531,2052,554,2052,572,2052,576,2051,576,2022,576,1973,575,1945" alt="b1" onClick="alertPopup('1','B','1');" style="cursor:pointer;">
<area shape="poly" coords="582,1947,583,2051,604,2051,622,2051,638,2052,639,1946" alt="b2" onClick="alertPopup('2','B','1');" style="cursor:pointer;">
<area shape="poly" coords="645,1946,645,2052,704,2051,704,1946" alt="b3" onClick="alertPopup('3','B','1');" style="cursor:pointer;">
<area shape="poly" coords="708,1946,708,2052,768,2052,768,1947,772,1946" alt="b4" onClick="alertPopup('4','B','1');" style="cursor:pointer;">
<area shape="poly" coords="771,1945,771,2051,831,2052,831,1945,836,1945" alt="b5" onClick="alertPopup('5','B','1');" style="cursor:pointer;">
<area shape="poly" coords="836,1945,837,2052,896,2052,896,1947,900,1945" alt="b6" onClick="alertPopup('6','B','1');" style="cursor:pointer;">
<area shape="poly" coords="900,1945,900,2051,960,2053,960,1946" alt="b7" onClick="alertPopup('7','B','1');" style="cursor:pointer;">
<area shape="poly" coords="965,1948,965,2053,1024,2054,1024,1948" alt="b8" onClick="alertPopup('8','B','1');" style="cursor:pointer;">
<area shape="poly" coords="1028,1945,1029,2053,1088,2053,1088,1947" alt="b9" onClick="alertPopup('9','B','1');" style="cursor:pointer;">
<area shape="poly" coords="1092,1946,1092,2051,1152,2053,1152,1947" alt="b10" onClick="alertPopup('10','B','1');" style="cursor:pointer;">
<area shape="poly" coords="1156,1947,1156,2052,1216,2052,1216,1946" alt="b11" onClick="alertPopup('11','B','1');" style="cursor:pointer;">
</map>
</div>
</body>
</html>
任何人都可以帮助我。我希望我的坐标位置在调整大小时保持不变。 谢谢 Image
