在网页地图图片上加注企业和“圳品”数量信息
Posted 紫郢剑侠
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在网页地图图片上加注企业和“圳品”数量信息相关的知识，希望对你有一定的参考价值。
继续编写“圳品”信息系统，要有一个“概要信息”，统计各县区的企业和“圳品”数量信息，并在地图上标注，这样更直观一些。
标注是将<div>放在地图图片上，每个县（区）一个div，将每个县（区）的企业和“圳品”数量信息放在对应的div里显示。
要让<div>显示在地图图片上，就要用到css的 z-index，地图图片不设置z-index，但将每个县（区）的div的z-index设置为 1。
为了让每个县（区）<div>显示在地图图片的对应区域内，我们需要计算每个县（区）<div>在地图图片的相对左上角坐标。
另外，地图上的每个 县（区）的区域大小不尽相同，区域狭小的 县（区）显示信息有时需要换行，我们这里用div的width来控制。
因为有11个县（区），就将每个县（区）<div>的参数放在一个数组 aAreaMapCoordinate里。
我们首先要取得地图图片左上角位置在网页中的绝对值，这里用getElementPagePosition()来获取，然后动态生成每个县（区）<div>。
实现的效果如下图：
完整的代码如下：
<html>
<body>
<div>
<img
src="http://img.mp.itc.cn/q_70,c_zoom,w_640/upload/20170507/4c68610712bc408d892d205d0e321655_th.jpeg" border="0" usemap="#planetmap" alt="Planets" style="margin-top:0px;" id="mapHc" />
<!-- //相对位置relative
<div id="areaTe" style="position: relative;top:-380px;left:100px; width:100px;border:2px solid red;z-index: 1;">天峨</div>
<div id="areaNd" style="position: relative;top:-420px;left:220px; width:100px;border:2px solid red;z-index: 1;">南丹</div>
<div id="areaHj" style="position: relative;top:-450px;left:350px; width:100px;border:2px solid red;z-index: 1;">环江</div>
<div id="areaLc" style="position: relative;top:-430px;left:460px; width:100px;border:2px solid red;z-index: 1;">罗城</div>
<div id="areaFs" style="position: relative;top:-370px;left:110px; width:100px;border:2px solid red;z-index: 1;">凤山</div>
<div id="areaDl" style="position: relative;top:-390px;left:200px; width:100px;border:2px solid red;z-index: 1;">东兰</div>
<div id="areaJcj" style="position: relative;top:-440px;left:280px; width:100px;border:2px solid red;z-index: 1;">金城江</div>
<div id="areaYz" style="position: relative;top:-440px;left:420px; width:100px;border:2px solid red;z-index: 1;">宜州</div>
<div id="areaBm" style="position: relative;top:-390px;left:130px; width:100px;border:2px solid red;z-index: 1;">巴马</div>
<div id="areaDh" style="position: relative;top:-380px;left:230px; width:100px;border:2px solid red;z-index: 1;">大化</div>
<div id="areaDa" style="position: relative;top:-430px;left:340px; width:100px;border:2px solid red;z-index: 1;">都安</div>
//-->
<script>
function getElementPagePosition(e)
//计算x坐标
var actualLeft = e.offsetLeft;
var current = e.offsetParent;
while (current !== null)
actualLeft += current.offsetLeft;
current = current.offsetParent;
//计算y坐标
var actualTop = e.offsetTop;
var current = e.offsetParent;
while (current !== null)
actualTop += (current.offsetTop+current.clientTop);
current = current.offsetParent;
//返回结果
return x: actualLeft, y: actualTop
//县区div在河池地图上的参数
//参数说明：1：div顶部偏移px，2：div左侧偏移px，3：div宽度px（指定style中的width）
aAreaMapCoordinate = new Array(
[0,0], //hc，0
[245,270],//jcj，1
[280,420],//yz，2
[190,480,70],//lc，3
[145,335],//hj，4
[150,220,70],//nd，5
[155,110,70],//te，6
[285,200,70],//dl，7
[350,140,70],//bm，8
[265,100,70],//fs，9
[360,350,70],//da，10
[380,250,70] //dh，11
);
//alert(document.getElementById("mapHc"));
var mapHcLeftTop = getElementPagePosition(document.getElementById("mapHc"));
var i;
for (i=0; i <12 ; i++)
document.write('<div class="ts" id="area', i, '" style="position: absolute;top:', aAreaMapCoordinate[i][0]+mapHcLeftTop.y, 'px;left:', aAreaMapCoordinate[i][1]+mapHcLeftTop.x,'px;',(typeof(aAreaMapCoordinate[i][2])!="undefined"? 'width:'+aAreaMapCoordinate[i][2]+'px': null),';z-index: 1;">','xx家企业xx个圳品','</div>');
</script>
</div>
</body>
</html> 以上是关于在网页地图图片上加注企业和“圳品”数量信息的主要内容，如果未能解决你的问题，请参考以下文章
用JavaScript编程控制网页上checkbox选择状态：全选全部取消反选