Question

我正在建立一个网站，其中集成了使用JVectorMap库创建的地图，每个区域都必须具有代表该区域的背景图像，而不是被着色，直到现在为止，问题是在插入图像在整个区域中重复出现而没有显示所有尺寸，我要做的是只显示一次图像。

这是我来自JVectorMap的代码：

<!DOCTYPE html>
     <html>
        <head>
           <title>IDTravel</title>
           <link rel="stylesheet" href="jquery-jvectormap-2.0.3.css" type="text/css" media="screen"/>
  <script src="jquery.js"></script>
  <script src="jquery-jvectormap-2.0.3.min.js"></script>
  <script src="jquery-jvectormap-world-mill.js"></script>
  <style>
     html, body{
        width: 100%;
        height: 100%;
        margin: 0px;
        padding: 0px;

     }
     pattern img{
      width: 100%;
     }
  </style>
</head>
<body>
  <div id="world-map" style="width: 100%; height: 100%;"></div>
  <script>
    $(function(){
      new jvm.Map({
        container: $('#world-map'),
        map: 'world_mill',
        series: {
          regions: [{
            scale: {
              redGreen: 'img.jpg',
              yellowBlue: 'img1.jpg'
            },
            values: {
              "US": 'redGreen',
              "MX": 'yellowBlue'
            },
          }]
        }
      });
    });
  </script>
</body>
</html>

这是结果：

在jvectormap的区域中设置大小和位置图像

0 个答案: