博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
超棒的jQuery矢量地图生成插件 - JQVAMP
阅读量:5994 次
发布时间:2019-06-20

本文共 1067 字,大约阅读时间需要 3 分钟。

超棒的jQuery矢量地图生成插件 -  JQVAMP

 

是不是也考虑生成一个矢量类型的地图?今天我们将介绍的这款jQuery插件 - 可 以方便的帮助你生成漂亮的矢量地图。在现代浏览器中它使用了SVG(Scalable Vector Graphics)技术生成地图图片,如果你也需要支持老版本的浏览器,例如,IE6/7/8的话,它也可以通过VML来实现,非常不错的jQuery插 件,相信大家一定会喜欢!

主要特性

  • 支持现代浏览器,同时对于老版本浏览器也可以通过其它fallback方式支持
  • 支持缩放,拖动查看
  • 提供丰富的地图生成参数
  • 目前支持:世界地图,美国地图,欧洲,德国地图
  • 你可以自己定义自己的地图(当然,这个过程比较繁琐)
  • 实时更新地图
  • 需要jQuery类库支持
  • 完整清晰的文档说明

如何使用

JQVAMP使用非常简单,导入jQuery类库和插件类库,如下:

地图插件生成代码:

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方法。相信大家肯定有机会应用到自己的网站开发和设计中,希望大家喜欢,如果你有任何问题和建议请给我们留言,谢谢!

转载地址:http://zsqlx.baihongyu.com/

你可能感兴趣的文章
2019春第三周作业
查看>>
Angular开发者指南(一)入门介绍
查看>>
IDEA之Git分支以及Stash使用
查看>>
DOM(九)使用DOM设置文本框
查看>>
Kafka如何实现每秒上百万的高并发写入
查看>>
css ::selection 的妙用
查看>>
JAVA高并发秒杀API项目的学习笔记
查看>>
web测试之功能测试总结
查看>>
开发工程师人生之路
查看>>
用python实现把数字人民币金额转换成大写的脚本程序
查看>>
Python实现网页截图(PyQT5)
查看>>
【Android】15.3 Notification基础知识
查看>>
ES6学习笔记(五)—— 编程风格
查看>>
Chapter 8. 面向对象(类、对象、字段、方法、属性、构造函数)
查看>>
[BZOJ 3680]吊打XXX(模拟退火)
查看>>
多线程基础知识总结
查看>>
Android 项目隐藏标题栏
查看>>
(九)Maven坐标详解
查看>>
正在与拖延症病魔抗争中
查看>>
[转载]100盏灯泡的开关问题
查看>>