勤勤学长的csdn 2012-05-14
日期:2012-5-14 来源:GBin1.com

是不是也考虑生成一个矢量类型的地图?今天我们将介绍的这款jQuery插件 - JQVMAP 可 以方便的帮助你生成漂亮的矢量地图。在现代浏览器中它使用了SVG(Scalable Vector Graphics)技术生成地图图片,如果你也需要支持老版本的浏览器,例如,IE6/7/8的话,它也可以通过VML来实现,非常不错的jQuery插 件,相信大家一定会喜欢!
JQVAMP使用非常简单,导入jQuery类库和插件类库,如下:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <script src="../jqvmap/jquery.vmap.js" type="text/javascript"></script> <script src="../jqvmap/maps/jquery.vmap.world.js" type="text/javascript"></script> <script src="../jqvmap/data/jquery.vmap.sampledata.js" type="text/javascript"></script>
地图插件生成代码:
jQuery(document).ready(function
() {
jQuery(
'#vmap').vectorMap({
map:
'world_en',
backgroundColor:
'#202020',
color:
'#5DB0E6',
hoverOpacity:
0.7,
selectedColor:
'#333333',
enableZoom:
true
,
showTooltip:
true
,
values: sample_data,
scaleColors: [
'#C8EEFF', '#006491'],
normalizeFunction:
'polynomial',
onRegionOver:
function
(element, code, region){
$(
'#region').html(region);
},
onRegionClick:
function
(element, code, region){
$(
'#region').html('You selected "' + region + '"');
}
});
});插件的文档非常完善,你可以很方便的查看相关的选项和callback方法。相信大家肯定有机会应用到自己的网站开发和设计中,希望大家喜欢,如果你有任何问题和建议请给我们留言,谢谢!