Rails 4 - wie eine Javascript-Quelle in Vendor-Datei zu referenzieren

Question

Ich habe gerade festgestellt, dass ich meine GMaps für Rails-Setup ändern muss, indem Sie Javascript-Dateien direkt in meiner App einfügen. Rails 4 - Gmaps4Rails - map won't render

Ich habe beide Infobox und markerclusterer Repos geklont und bin jetzt stecken in versuchen, die relevanten Dateien in meiner App zu verweisen.

Ich habe die Ordner der Dateien, die mit dem Klon in meiner Vendor-Datei geliefert wurden.

ich die JavaScript-Dateien zu verstehen, die ich brauche zu verwenden sind: infobox.js und markerclusterer.js

Diese Dateien befinden sich in:

vendor/js-marker-clusterer/src/makerclusterer.js 
vendor/v3-utility-library/src/infobox.js 

ich sie anstelle des Codes verwenden möchten in dieser Ansicht:

<script src="//maps.google.com/maps/api/js?v=3.18&sensor=false&client=&key=&libraries=geometry&language=&hl=&region="></script> 
<script src="//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js"></script> 
<script src='//google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox_packed.js' type='text/javascript'></script> <!-- only if you need custom infoboxes --> 

Muss ich auf die Javascript-Dateien in app/application.js verweisen? Wenn ja, an welchem ​​Punkt des Pfades muss ich starten (diese Dateien befinden sich nicht im Ordner vendor/assets/javascripts)?

Auch ich verstehe, ich muss die markerclusterer Bilder irgendwie integrieren. Diese wurden auch im geklonten Repo durchgespielt und im Ordner vendor/js-markerclusterer/images gespeichert. Wie referenziere ich diese, damit sie in der Ansicht funktionieren?

Answer 1

Die logischste Sache zu tun wäre, um Ordner zu platzieren js-marker-clusterer und v3-utility-library unter vendor/assets/javascripts so können Sie die Dateien verweisen, die Sie in application.js als

benötigen

//= js-marker-clusterer/src/makerclusterer 
//= v3-utility-library/src/infobox 

Wenn jedoch können Sie nicht, dass Sie aus irgendeinem Grund tun kann einen benutzerdefinierten Pfad in config.assets.paths hinzufügen, so kann der Autoloader sie

// application.rb 
config.assets.paths << Rails.root.join("vendor", "js-marker-clusterer") 
config.assets.paths << Rails.root.join("vendor", "v3-utility-library") 

Und dann verweisen sie genauso

finden

//= src/makerclusterer 
//= src/infobox 

Answer 2

Es ist immer gut, cdn oder in Ihrem Fall googlecode Server zu verwenden, da die Dateien schneller von ihren Servern geladen werden. Also, ja, das wird keinen Schaden anrichten.

<script src="//maps.google.com/maps/api/js?v=3.18&sensor=false&client=&key=&libraries=geometry&language=&hl=&region="></script> 
<script src="//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js"></script> 
<script src='//google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox_packed.js' type='text/javascript'></script> <!-- only if you need custom infoboxes --> 

Lassen Sie uns sagen Sie ihnen über die Manifest-Datei geladen werden soll (dh application.js), Sie markerclusterer.js und infobox.js in Ihrem app/assets/javascripts Ordner kopieren und sie in application.js wie diese

//application.js file's content 
//= markercluster 
//= infobox 

nun seit Diese beiden Dateien müssen nach Ihrer Google Maps API-Datei geladen werden, Sie sollten application.js nach dem Aufruf von Maps API hinzufügen. Welche sicherstellt, dass das Google Maps-API zuerst geladen wurde und das Objekt google.maps für Sie verfügbar ist.

<script src="//maps.google.com/maps/api/js?v=3.18&sensor=false&client=&key=&libraries=geometry&language=&hl=&region="></script> 
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> 

Und zusätzlich können Sie alle Bilder in Ordnern innerhalb app/assets/images anschnallen und sie nur wie jedes andere Bild aus darauf zugreifen würde.