定制 shiguangxiaotou/jvectormap-maps-data 二次开发

按需修改功能、优化性能、对接业务系统,提供一站式技术支持

邮箱:yvsm@zunyunkeji.com | QQ:316430983 | 微信:yvsm316

shiguangxiaotou/jvectormap-maps-data

Composer 安装命令:

composer require shiguangxiaotou/jvectormap-maps-data

包简介

jvectormap 地图数据整理.

README 文档

README

jvectormap 地图数据整理

jVectorMap 是一个基于矢量、跨浏览器和跨平台的组件,用于在 Web 上进行与地理相关的交互式数据可视化。它提供了许多功能,如平滑缩放和平移、完全可定制的样式、标记、标签和工具提示。

您可以在 官方网站上找到地图、文档、示例等。示例子位于 👉💻

安装:

$ npm install jvectormap-maps-data
$ git clone git@github.com:shiguangxiaotou3/jvectormap-maps-data.git
$ composer require shiguangxiaotou/jvectormap-maps-data

使用:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./../dist/css/jquery-jvectormap.css">
</head>
<body>
     <div id="world-map" style="height: 500px; width: 100%;"></div>
</body>
<!-- jvectormap -->
<script src="./../node_modules/jquery/dist/jquery.js"></script>
<script src="./js/jquery-jvectormap-1.2.2.min.js"></script>
<script src="./js/jquery-mousewheel.js"></script>
<script>
    jQuery(function ($) {
        let visitorsData = {
            US: 398, GB: 320, RU: 3000,
            SA: 400, CA: 1000, IN: 800
        };
        $('#world').vectorMap({
            map: 'world-merc',
            backgroundColor: 'transparent',
            regionStyle: {
                initial: {
                    fill: '#e4e4e4',
                    'fill-opacity': 1,
                    stroke: 'none',
                    'stroke-width': 0,
                    'stroke-opacity': 1
                }
            },
            series: {
                regions: [
                    {
                        values: visitorsData,
                        scale: ['#ebf4f9', '#92c1dc'],
                        normalizeFunction: 'polynomial'
                    }
                ]
            },
            onRegionLabelShow: function (e, el, code) {
                if (typeof visitorsData[code] != 'undefined')
                    el.html(el.html() + ': ' + visitorsData[code] + ' new visitors');
            }
        });
</script>
</html>

统计信息

  • 总下载量: 0
  • 月度下载量: 0
  • 日度下载量: 0
  • 收藏数: 1
  • 点击次数: 1
  • 依赖项目数: 0
  • 推荐数: 0

GitHub 信息

  • Stars: 1
  • Watchers: 1
  • Forks: 0
  • 开发语言: PHP

其他信息

  • 授权协议: ISC
  • 更新时间: 2022-10-18

承接程序开发

PHP开发

VUE

Vue开发

前端开发

小程序开发

公众号开发

系统定制

数据库设计

云部署

网站建设

安全加固