在 Google Maps Directions API 中使用 PHP 变量答案

【问题标题】：Using PHP variables in Google Maps Directions API在 Google Maps Directions API 中使用 PHP 变量
【发布时间】：2018-03-01 20:59:28
【问题描述】：

我正在使用 Google 提供的代码，显示他们的 Google Maps Directions API。我已经手动更改了起点和终点值，并且效果很好。但是，当尝试用 PHP 变量替换原始值和目标值时，地图不会加载。

这是我的代码，任何建议将不胜感激。

 <body>

  <?php
  $start = "Leeds";
  $end = "Nottingham";
  ?>

     <div id="right-panel"></div>


   <script type="text/javascript">

     var directionsService = new google.maps.DirectionsService();
     var directionsDisplay = new google.maps.DirectionsRenderer();

     var map = new google.maps.Map(document.getElementById('map'), {
       zoom:7,
       mapTypeId: google.maps.MapTypeId.ROADMAP
     });

     directionsDisplay.setMap(map);
     directionsDisplay.setPanel(document.getElementById('right-panel'));


     var request = {
       origin: <?php echo $start; ?>,
       destination: <?php echo $end; ?> ,
       travelMode: google.maps.DirectionsTravelMode.DRIVING
     };

     directionsService.route(request, function(response, status) {
       if (status == google.maps.DirectionsStatus.OK) {
         directionsDisplay.setDirections(response);
       }
     });
   </script>
</body>
</html>

【问题讨论】：

标签： javascript php json google-maps google-api

【解决方案1】：

我相信您在 PHP 周围缺少引号。尝试这个。在 PHP 中使用 echo 时，

$Example = "hey";

PHP 只会回显引号内的内容。因此，在您的 JavaScript 中，您必须手动添加它们，否则您的结果是

  origin: Start,
  destination: End

应该是

 origin: 'Start',
  destination: 'End'

   <script type="text/javascript">

     var directionsService = new google.maps.DirectionsService();
     var directionsDisplay = new google.maps.DirectionsRenderer();

     var map = new google.maps.Map(document.getElementById('map'), {
       zoom:7,
       mapTypeId: google.maps.MapTypeId.ROADMAP
     });

     directionsDisplay.setMap(map);
     directionsDisplay.setPanel(document.getElementById('right-panel'));


     var request = {
       origin:'<?php echo $start; ?>',
       destination:'<?php echo $end; ?>' ,
       travelMode: google.maps.DirectionsTravelMode.DRIVING
     };

     directionsService.route(request, function(response, status) {
       if (status == google.maps.DirectionsStatus.OK) {
         directionsDisplay.setDirections(response);
       }
     });
   </script>
</body>
</html>

【讨论】：

引用在这里看起来是正确的答案。 <?= "leeds"; ?> 将输出 leeds 并且 JavaScript 期望对象数组中的值像 'leeds' 那样被引用。引号也有助于 JavaScript 理解空格。例如origin: New York 会破坏 JavaScript 而origin: 'New York' 是有效的。
刚刚添加了
刚刚尝试在PHP中添加引号，似乎仍然无法加载地图。
我的源代码行和目标代码行现在格式正确。
好的。那么您的代码很好，是 Google API 引发了该错误 :) 尝试搜索 Google Maps API init not a function。我找到了这个 (stackoverflow.com/questions/32496382/…)