Vue 实现世界地图展示,根据国家中数量的多少区分(类似世界疫情地图)

Vue 实现世界地图


在这里插入图片描述
由于测试数据较少,所以,空白地方较多。鼠标悬浮时展示国家和对应数量。

1.因为是根据国家进行展示,所以我们需要国家的数据,我建了一张表来存储国家的中英文,下面是对应的SQL

SET FOREIGN_KEY_CHECKS=0;

-- ----------------------------
-- Table structure for country
-- ----------------------------
DROP TABLE IF EXISTS `country`;
CREATE TABLE `country` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(50) DEFAULT NULL,
  `name_en` varchar(50) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=197 DEFAULT CHARSET=utf8;

-- ----------------------------
-- Records of country
-- ----------------------------
INSERT INTO `country` VALUES ('1', '美国', 'United States');
INSERT INTO `country` VALUES ('2', '印度', 'India');
INSERT INTO `country` VALUES ('3', '巴西', 'Brazil');
INSERT INTO `country` VALUES ('4', '俄罗斯', 'Russia');
INSERT INTO `country` VALUES ('5', '法国', 'France');
INSERT INTO `country` VALUES ('6', '英国', 'United Kingdom');
INSERT INTO `country` VALUES ('7', '土耳其', 'Turkey');
INSERT INTO `country` VALUES ('8', '意大利', 'Italy');
INSERT INTO `country` VALUES ('9', '西班牙', 'Spain');
INSERT INTO `country` VALUES ('10', '阿根廷', 'Argentina');
INSERT INTO `country` VALUES ('11', '德国', 'Germany');
INSERT INTO `country` VALUES ('12', '哥伦比亚', 'Colombia');
INSERT INTO `country` VALUES ('13', '墨西哥', 'Mexico');
INSERT INTO `country` VALUES ('14', '波兰', 'Poland');
INSERT INTO `country` VALUES ('15', '伊朗', 'Iran');
INSERT INTO `country` VALUES ('16', '乌克兰', 'Ukraine');
INSERT INTO `country` VALUES ('17', '秘鲁', 'Peru');
INSERT INTO `country` VALUES ('18', '南非', 'South Africa');
INSERT INTO `country` VALUES ('19', '荷兰', 'Netherlands');
INSERT INTO `country` VALUES ('20', '印度尼西亚', 'Indonesia');
INSERT INTO `country` VALUES ('21', '捷克', 'Czech Rep.');
INSERT INTO `country` VALUES ('22', '比利时', 'Belgium');
INSERT INTO `country` VALUES ('23', '罗马尼亚', 'Romania');
INSERT INTO `country` VALUES ('24', '智利', 'Chile');
INSERT INTO `country` VALUES ('25', '伊拉克', 'Iraq');
INSERT INTO `country` VALUES ('26', '加拿大', 'Canada');
INSERT INTO `country` VALUES ('27', '孟加拉', 'Bangladesh');
INSERT INTO `country` VALUES ('28', '菲律宾', 'Philippines');
INSERT INTO `country` VALUES ('29', '巴基斯坦', 'Pakistan');
INSERT INTO `country` VALUES ('30', '摩洛哥', 'Morocco');
INSERT INTO `country` VALUES ('31', '瑞士', 'Switzerland');
INSERT INTO `country` VALUES ('32', '以色列', 'Israel');
INSERT INTO `country` VALUES ('33', '葡萄牙', 'Portugal');
INSERT INTO `country` VALUES ('34', '瑞典', 'Sweden');
INSERT INTO `country` VALUES ('35', '沙特阿拉伯', 'Saudi Arabia');
INSERT INTO `country` VALUES ('36', '奥地利', 'Austria');
INSERT INTO `country` VALUES ('37', '匈牙利', 'Hungary');
INSERT INTO `country` VALUES ('38', '塞尔维亚', 'Serbia');
INSERT INTO `country` VALUES ('39', '约旦', 'Jordan');
INSERT INTO `country` VALUES ('40', '尼泊尔', 'Nepal');
INSERT INTO `country` VALUES ('41', '巴拿马', 'Panama');
INSERT INTO `country` VALUES ('42', '格鲁吉亚', 'Georgia');
INSERT INTO `country` VALUES ('43', '厄瓜多尔', 'Ecuador');
INSERT INTO `country` VALUES ('44', '阿塞拜疆', 'Azerbaijan');
INSERT INTO `country` VALUES ('45', '日本', 'Japan');
INSERT INTO `country` VALUES ('46', '克罗地亚', 'Croatia');
INSERT INTO `country` VALUES (
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值