Question

我一直在尝试使用这个非常酷的JVector Interactive地图插件和我的Rails 3应用程序，但我必须做错了，因为地图没有渲染。我没有在Rails中使用过JQuery，所以在这方面有点新鲜。我创建了一个名为Maps的控制器和一个名为Intro.html.erb的视图，其中包含了本教程中的html：http://developer.practicalecommerce.com/articles/2988-Create-an-Interactive-Map-with-jVectorMap

我还将我们的.js函数放在application.js中。由于这不起作用，我发现了一些我试图放入Intro.html.erb文件中的其他代码：

<!DOCTYPE html>
  <html>
  <head>
  <title>Test</title>
    <link rel="stylesheet" href="public/javascripts/jquery.vector-map.css"     type="text/css" media="screen" />   
    <script src="public/javascripts/jquery.min.js"></script>
    <script src="public/javascripts/jquery.vector-map.js"></script>
    <script src="public/javascripts/world-en.js"></script>
    <script>
      $(function(){
       $('#map').vectorMap();
    });
   </script>
 </head>
  <body>
    <div id="map" style="width: 600px; height: 400px;"></div>
  </body>
</html>

它仍然没有渲染。我正在尝试在我的开发环境中运行它，并指向本地文件。例如： public / javascripts / world-en.js“

非常感谢任何帮助。

Answer 1

您想使用“世界地图”，但在您的指导中，您正在定义“#map”。以下是您可能尝试的正确代码：

<!DOCTYPE html>
<html>
<head>
  <title>jVectorMap demo</title>
  <link rel="stylesheet" href="scripts/jquery-jvectormap-1.2.2.css" type="text/css" media="screen"/>
  <script src="scripts/jquery-1.8.2.js"></script>
  <script src="scripts/jquery-jvectormap-1.2.2.min.js"></script>
  <script src="scripts/jquery-jvectormap-world-mill-en.js"></script>
</head>
<body>
  <div id="world-map" style="width: 600px; height: 400px"></div>
  <script>
    $(function(){
      $('#world-map').vectorMap();
    });

  </script>
</body>
</html>

这是包含您需要的文档的文件夹。下载并将以下folder解压缩到您本地主机上的htdoc

Answer 2

同样的问题，通过将导入的映射指定到js初始化

来修复

  $('#world-map').vectorMap(
  {
    map: 'world-en',
  }

JVector交互式地图不在Rails中渲染3

2 个答案: