javascript - JVector 交互式 map 不在 Rails 3 中呈现

标签 javascript jquery ruby-on-rails jvectormap

我一直在尝试将这个非常酷的 JVector Interactive map 插件与我的 Rails 3 应用程序一起使用,但我一定是做错了什么,因为 map 没有呈现。我在 Rails 中使用 JQuery 的次数不多,所以对这方面有点陌生。我创建了一个名为 Maps 的 Controller 和一个名为 Intro.html.erb 的 View ,其中包括本教程中的 html:http://developer.practicalecommerce.com/articles/2988-Create-an-Interactive-Map-with-jVectorMap

我还通过将它们放在 application.js 中来拆分我的 .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"

如有任何帮助,我们将不胜感激。

最佳答案

您想使用“世界地图”,但在您的小说中定义了“#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给你本地主机上的 htdocs

关于javascript - JVector 交互式 map 不在 Rails 3 中呈现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7642863/

相关文章:

javascript - 如何在 DOJO 中将属性映射到 DOM 节点?

javascript - 单击时从内存中删除功能

jquery - 使用 jquery 获取包含表中的所有输入

ruby-on-rails - Rails 从对象创建路由

ruby-on-rails - 使用 ActionMailer 发送带有内嵌图像的 HTML 电子邮件

ruby-on-rails - 仅当密码在参数中时验证 has_secure_password 的存在

javascript - 延迟到下一个数据项,一个一个追加,一次又一次

javascript - jquery 已加载,但未执行正确的 UI 功能

javascript - 创建带有按钮的多级汉堡菜单,可扩展汉堡级别

javascript - 如何使用 Node.js Express.js 和 Sequelize ORM 在 2 个表之间建立关系