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 (