Dans mon application Rails, j'ai une méthode d'assistance location qui obtient les coordonnées d'une adresse IP donnée et les rend disponibles sur tous les contrôleurs et vues. Par exemple, location.latitude renvoie la latitude de l'utilisateur. Vous avez eu l'idée.

J'ai également du Javascript qui dessine une carte de l'API Google Maps basée sur une paire lat / lon donnée. Le problème est que je n'ai aucune idée de comment passer les paramètres location dans le JavaScript!

Le JavaScript réside dans 'application.js' et ressemble à ceci:

$(document).ready(function() 
  { 

    //Map options...I want the params to go into the var 'MapOptions' below

    function initialize() {
      var mapOptions = {
        center: new google.maps.LatLng(40.764698,-73.978972),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
        };

    //Setup and Draw the Map...
    //....................................
  };

La carte elle-même est appelée ainsi dans le HTML. Il n'y a pas de moyen évident de passer les paramètres.

<div id="map_canvas">
  <!-- The Map gets drawn here! -->
</div>

Je sais que c'est probablement une question évidente, mais je n'ai jamais eu à passer un paramètre de mon application à Javascript de cette façon auparavant.

5
thoughtpunch 25 nov. 2011 à 20:58

4 réponses

Meilleure réponse

Je pense que les attributs de données fonctionne bien ici.

Html

<div id="map_canvas" data-latitude="40.764698" data-longitude="-73.978972">
  <!-- The Map gets drawn here! -->
</div>

Ou avec vos assistants

<div id="map_canvas" data-latitude="<%= location.latitude %>" data-longitude="<%= location.longitude %>">
  <!-- The Map gets drawn here! -->
</div>

Js

$(document).ready(function() { 

  //Map options...I want the params to go into the var 'MapOptions' below

  function initialize() {
    var mapDiv = $('#map_canvas');
    var lat = mapDiv.data('latitude'),
        lng = mapDiv.data('longitude');

    var mapOptions = {
      center: new google.maps.LatLng(lat,lng),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

  //Setup and Draw the Map...
  //....................................
};
8
Joe Steele 25 nov. 2011 à 17:40

La transmission de données en javascript peut être simplifiée à l'aide de Gon gem
Par exemple, définissez n'importe quoi avec gon dans votre contrôleur:

class FooController < ApplicationController

  def show_map
    #....
    gon.mapLatLong = [40.764698,-73.978972]

Ensuite, affichez cette balise erb dans votre vue

<%= include_gon %>

Les valeurs gon définies dans ce contrôleur seront transformées en variables javascript dans vos vues. Ainsi, vous pouvez l'écrire comme ceci dans votre javascript

center: new google.maps.LatLng(gon.mapLatLong[0],gon.mapLatLong[1]),

Référence:
https://github.com/gazay/gon
http://railscasts.com/episodes/324-passing-data-to-javascript

1
Aizzat Suhardi 24 janv. 2014 à 09:22

Jetez un œil à la page suivante qui explique comment transmettre des données à JavaScript: http://railscasts.com/episodes/324-passing-data -to-javascript? view = asciicast

En bref, utilisez simplement:

<%= javascript_tag do %>
   window.productsURL = '<%= j products_url %>';
<% end %>

Et puis référez-vous à productsURL n'importe où dans vos scripts.

0
Dmitri Lihhatsov 10 janv. 2015 à 01:41

Vous pouvez attribuer lat et long aux champs masqués de la vue. Et dans votre script applicatons.js, obtenez-les simplement comme $("#lat").val() Pas la solution ultime, mais cela devrait bien fonctionner.

2
Mikhail Nikalyukin 25 nov. 2011 à 17:17
8272147