如何动态加载路由计算？

Posted 2023-02-23

【中文标题】如何动态加载路由计算？

【英文标题】：How to dynamically load the route calculation?

【发布时间】：2019-11-22 03:58:35

【问题描述】：

我在动态加载 Google 地图路线时需要帮助。我在控制台中看到了未定义的错误：

Uncaught ReferenceError: calcularRuta is not defined
    at htmlInputElement.onclick (index.html:1)

我试图更改有问题的位置 (calculateRuta()) 但没有。这是唯一失败的事情，所以我知道其余的都是正确的。 我也尝试过以不同的方式加载它，但仍然出现相同的错误。

这是地图的功能，最后我放置了功能calcularRuta()，这是我的错。

var gMapsLoaded = false;
window.gMapsCallback = function() 
  gMapsLoaded = true;
  $(window).trigger('gMapsLoaded');


window.loadGoogleMaps = function() 
  if (gMapsLoaded) return window.gMapsCallback();
  var script_tag = document.createElement('script');
  script_tag.setAttribute("type", "text/javascript");
  script_tag.setAttribute("src", "https://maps.googleapis.com/maps/api/js?key=AIzaSyBDaeWicvigtP9xPv919E-RNoxfvC-Hqik&callback=gMapsCallback");
  (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);


$(document).ready(function() 
      var mapa;
      var mostrar_direcciones;

      var servicios_rutas;

      function initialize() 
        servicios_rutas = new google.maps.DirectionsService();
        mostrar_direcciones = new google.maps.DirectionsRenderer();
        var milatlng = new google.maps.LatLng(40.4450489, -3.6103049)
        var mapOptions = 
          zoom: 12,
          center: milatlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP

        ;
        map = new google.maps.Map(document.getElementById('mapa'), mapOptions);

        mostrar_direcciones.setMap(mapa);
        mostrar_direcciones.setPanel(document.getElementById("ruta"));

        var marker = new google.maps.Marker(
          position: milatlng,
          map: map,
        );

      

      function calcularRuta() 
        var partida = document.getElementById("partida").value;
        var destino = document.getElementById("destino").value;
        var opciones = 
          origin: partida,
          destination: destino,
          travelMode: google.maps.DirectionsTravelMode.DRIVING
          //indicamos en este caso que hacemos el viaje en coche/moto
        ;

        servicios_rutas.route(opciones, function(response, status) 
          if (status == google.maps.DirectionsStatus.OK) 
            mostrar_direcciones.setDirections(response);
          
        );
      

      $(window).bind('gMapsLoaded', initialize);
      window.loadGoogleMaps();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="contenedorMapa">
  <h2>ENCUÉNTRAME AQUÍ</h2>
  <div id="mapa">

    <p>Cargando, espere por favor...</p>

  </div>
  <div id="ruta" style="width: 100px; height: 100px; background-color: green;"></div>
  <input type="text" id="partida" name="partida">
  <input type="destino" id="destino" name="destino">
  <input type="button" name="button" id="button" value="aaaaaaaaaaa" onclick="calcularRuta()">
</div>

【问题讨论】：

在 Stack Overflow 上询问时，您可以方便地使用英文变量名，这样人们可以更清楚地了解代码的含义。这不是强制性的（与用英语写问题本身相反），只是方便。对于西班牙语，存在Stack Overflow en español，您可能会觉得很方便。

@Adriaan 我认识一些人用英文命名他们的变量，他们完全没有意义:)

请提供一个Minimal, Reproducible Example 来证明该问题。缺少 CSS。您的部分 JS 丢失（文档准备功能关闭）。

【参考方案1】：

您的calcularRuta 函数不在全局范围内（它在$(document).ready(function() 匿名函数的范围内）。

要用作 HTML onclick 侦听器函数，它必须在全局范围内。

最简单的修复，删除$(document).ready(function() 。

proof of concept fiddle

代码 sn-p：

var gMapsLoaded = false;
var map;
window.gMapsCallback = function() 
  gMapsLoaded = true;
  $(window).trigger('gMapsLoaded');


window.loadGoogleMaps = function() 
  if (gMapsLoaded) return window.gMapsCallback();
  var script_tag = document.createElement('script');
  script_tag.setAttribute("type", "text/javascript");
  script_tag.setAttribute("src", "https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=gMapsCallback");
  (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);


var mapa;
var mostrar_direcciones;

var servicios_rutas;

function initialize() 
  servicios_rutas = new google.maps.DirectionsService();
  mostrar_direcciones = new google.maps.DirectionsRenderer();
  var milatlng = new google.maps.LatLng(40.4450489, -3.6103049)
  var mapOptions = 
    zoom: 12,
    center: milatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP

  ;
  mapa = new google.maps.Map(document.getElementById('mapa'), mapOptions);

  mostrar_direcciones.setMap(mapa);
  mostrar_direcciones.setPanel(document.getElementById("ruta"));

  var marker = new google.maps.Marker(
    position: milatlng,
    map: map,
  );



function calcularRuta() 
  var partida = document.getElementById("partida").value;
  var destino = document.getElementById("destino").value;
  var opciones = 
    origin: partida,
    destination: destino,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
    //indicamos en este caso que hacemos el viaje en coche/moto
  ;

  servicios_rutas.route(opciones, function(response, status) 
    if (status == google.maps.DirectionsStatus.OK) 
      mostrar_direcciones.setDirections(response);
    
  );


$(window).bind('gMapsLoaded', initialize);
window.loadGoogleMaps();

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

#mapa 
  height: 100%;



/* Optional: Makes the sample page fill the window. */

html,
body 
  height: 100%;
  margin: 0;
  padding: 0;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="contenedorMapa" style="height:100%; width:100%;">
  <h2>ENCUÉNTRAME AQUÍ</h2>
  <div id="mapa">

    <p>Cargando, espere por favor...</p>

  </div>
  <div id="ruta" style="width: 100px; height: 100px; background-color: green;"></div>
  <input type="text" id="partida" name="partida" value="New York, NY">
  <input type="destino" id="destino" name="destino" value="Newark, NJ">
  <input type="button" name="button" id="button" value="aaaaaaaaaaa" onclick="calcularRuta()">
</div>