日期:2014-05-16  浏览次数:20402 次

html中的地图
最近需求:需要在网页上画一幅中国地图,每个省的版块上都需要定义鼠标滑过、单击等事件!
  而且要能随意更换任何省份版块的底色!

  现在,我已经使用<shape>标签实现了,可是,此实现在IE7下没有任何效果,也不报错!
  只有IE8才支持!现在真感觉有点无助了,要是哪位高手能帮上忙的话,还望不吝赐教,感谢之至!

代码如下:
<div><shape id="bigMap_shape$01" onmouseover="this.fillcolor='#cccc00';" onmouseout="this.fillcolor='#d7f0f2';" style="POSITION: absolute; WIDTH: 10px; DISPLAY: inline-block; HEIGHT: 10px; TOP: 0px; BEHAVIOR: url(#default#VML); LEFT: 0px" xmlns="urn:schemas-microsoft-com:vml" coordsize = "120,120" filled = "t" fillcolor = "#d7f0f2" stroked = "t" strokecolor = "#332c2b" strokeweight = "1pt" path = "m6120,1550 l6120,1550,6160,1570,6210,1600,6240,1640,6280,1670,6300,1650,6320,1630,6360,1630,6410,1720,6450,1740,6490,1710,6490,1660,6540,1650,6590,1630,6600,1650,6660,1690,6710,1710,6690,1680,6690,1640,6650,1530 6610,1460,6630,1430,6660,1420,6680,1400,6750,1400,6810,1390,6820,1360,6820,1310,6830,1240,6820,1110,6850,1060,6870,990,6810,930,6810,860,6810,830,6770,830,6710,870,6620,950,6590,1000,6540,1030 6460,1060,6410,1030,6380,980,6350,910,6290,910,6230,840,6210,850,6140,840,6010,840,6010,800,5960,740,5950,690,5880,610,5870,580,5760,430,5670,380,5580,390,5510,350,5430,370,5380,390 5320,420,5360,480,5310,530,5380,590,5410,530,5450,540,5490,570,5500,620,5530,670,5590,660,5650,670,5670,630,5700,600,5770,600,5810,690,5810,760,5770,840,5810,940,5790,990,5820,1060 5820,1130,5790,1150,5770,1080,5740,1060,5730,1100,5710,1140,5680,1170,5670,1220,5630,1260,5620,1310,5670,1370,5710,1380,5730,1350,5760,1340,5760,1390,5740,1410,5710,1430,5730,1450,5740,1450,5770,1450 5790,1490,5840,1530,5910,1550,5980,1530,6020,1480,6040,1490,6040,1540,6080,1570,6120,1550 e"></shape>
<!-- 云南地图版块 -->
<shape id="bigMap_shape$02" onmouseover="this.fillcolor='#cccc00';" onmouseout="this.fillcolor='#d7f0f2';" style="POSITION: absolute; WIDTH: 10px; DISPLAY: inline-block; HEIGHT: 10px; TOP: 0px; BEHAVIOR: url(#default#VML); LEFT: 0px" xmlns="urn:schemas-microsoft-com:vml" coordsize = "120,120" filled = "t" fillcolor = "#d7f0f2" stroked = "t" strokecolor = "#332c2b" strokeweight = "1pt" path = "m2880,4420 l2880,4420,2810,4430,2820,4440,2820,4480,2880,4550,2880,4620,2870,4700,2830,4800,2770,4850,2700,4920,2700,5080,2740,5090,2780,5060,2830,5070,2860,5140,2880,5200,2930,5240,2920,5270,2910,5350,2940,5380 3000,5400,3050,5460,3090,5470,3160,5430,3190,5450,3180,5510,3240,5550,3270,5550,3280,5540,3270,5500,3260,5470,3270,5430,3270,5400,3250,5350,3280,5320,3300,5340,3340,5340,3370,5320,3410,5310,3440,5330 3470,5330,3530,5310,3590,5330,3640,5300,3680,5310,3720,5270,3760,5220,3810,5210,3840,5200,3900,5180,3910,5100,3860,5110,3830,5080,3760,5070,3700,5010,3710,4880,3660,4860,3690,4750,3690,4710,3660,4690 3600,4700,3580,4670,3580,4600,3630,4560,3700,4560,3760,4580,3800,4530,3800,4480,3770,4470,3710,4490,3670,4460,3640,4370,3570,4360,3550,4400,3520,4430,3540,4460,3550,4520,3510,4560,3460,4590,3470,4660 3500,4720,3460,4770,3380,4790,3300,4780,3240,4720,3260,4680,3250,4630,3190,4480,3120,4470,3070,4410,3060,4380,3020,4320,3000,4330,3000,4400,2980,4420,2940,4320,2900,4280,2870,4290,2880,4420 e"></shape></div>


------解决方案--------------------
IE7自身bug诸多 坑苦了一票人 
没研究过这块 帮顶了~~~
------解决方案--------------------
探讨
后期开发肯定会采用flex来做,只是前期的模型开发,客户要求就采用简单的静态网页来实现!我也没办法,哎~~~

------解决方案--------------------
同情 lz。。。
------解决方案--------------------
flash
------解决方案--------------------