Интерактивная карта JVector не отображается в Rails 3

Я пытался использовать этот действительно классный плагин интерактивной карты JVector с моим приложением Rails 3, но я, должно быть, делаю что-то не так, потому что карта не отображается. Я мало использовал JQuery с Rails, так что я новичок в этом. Я создал контроллер под названием 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"

Любая помощь будет принята с благодарностью.


ruby-on-rails javascript jquery jvectormap
person wolfbagel    schedule 04.10.2011    source источник
comment
Какие-нибудь сообщения об ошибках в консоли? Все ли файлы JS действительно загружаются?   -  person Dave Newton    schedule 04.10.2011
comment
Нет, ошибок нет. Я даже попробовал небольшой тест с использованием всплывающего диалогового окна предупреждения javascript, и это сработало. Но как мне узнать наверняка, загружаются ли файлы JVector .js?   -  person wolfbagel    schedule 04.10.2011
comment
Проверьте в Firebug/console/etc. браузера и убедитесь, что он указан в коллекции скриптов.   -  person Dave Newton    schedule 04.10.2011
comment
Хорошо, я проверил Firebug и убедился, что мои файлы jquery для карты JVector не загружаются с ошибкой 404, не найденной. Значит, что-то с дорогой. Это очень помогает! Спасибо.   -  person wolfbagel    schedule 04.10.2011
comment
Знаете ли вы, где должны располагаться файлы плагинов .js в приложении Rails?   -  person wolfbagel    schedule 04.10.2011
comment
Они могут пойти куда угодно, что общедоступно. Обычно вы используете javascript_tag для их загрузки; он обрабатывает создание URL для вас.   -  person Dave Newton    schedule 04.10.2011
comment
Наконец-то у меня есть карта! Мне пришлось перечислить каждый файл .js отдельно в моем application.html.erb вместо использования: ‹%= javascript_include_tag :default %›   -  person wolfbagel    schedule 04.10.2011
comment
Вы также можете определить файлы javascript, которые вы хотите загружать по умолчанию, в config/application.rb, если вам надоело печатать;) Рад, что у вас получилось.   -  person Dave Newton    schedule 04.10.2011

Ответы (2)


arrow_upward
1
arrow_downward

Вы хотите использовать «карту мира», но в своей работе вы определяете «#карту». Вот правильный код, который вы можете попробовать:

<!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>

Вот папка с нужными вам документами. Загрузите и распакуйте следующую папку в htdocs на локальном хосте.

person CHEBURASHKA    schedule 25.04.2013

arrow_upward
0
arrow_downward

Та же проблема, исправлена ​​путем указания импортированной карты в инициализации js

  $('#world-map').vectorMap(
  {
    map: 'world-en',
  }
person TheQult    schedule 31.01.2016