Question

我正在尝试使用谷歌地图指示在提交表单后向我返回指示和时间，然后将距离和时间与其他相关信息一起保存到数据库中。我有一个html网站，我可以点击航点并显示地图没有问题。然而，当我使用尝试在表单提交后执行它并使其自我触发我得到错误，没有输出。我无法弄清楚为什么一个页面上的相同确切代码运行而另一个页面上显示解析器错误和initmap不是函数。我已将代码中的解析器错误标记为注释。任何帮助都将非常感激。

if (!empty($_POST['employee_id'])) {
print_r($_POST); echo "<br>";
if(!empty($_POST['orders_id'])){
          foreach($_POST['orders_id'] as $order_id) { 
           $lat = $_POST['latitude'][$order_id];
          $lon = $_POST['longitude'][$order_id];
          $waypoints[] = '{location: "' . $lat  . ',' . $lon  .'", stopover: true}';
          }  //End foreach($_POST['orders_id'] as $order_id)
  print_r($waypoints);
  ?>

  <script>
function initMap() {
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 13,
  center: {lat: 27.714617, lng: -82.393298}
}); // close var map

    directionsDisplay.setMap(map);

    document.getElementById('submit').addEventListener('click', function() {
      calculateAndDisplayRoute(directionsService, directionsDisplay);
    }); //close event listener
  }// close initMap

  var waypts = <?php echo json_encode($waypoints); ?>;
 // function calculateAndDisplayRoute(directionsService, directionsDisplay) {
    //var waypts = [];
    //var checkboxArray = document.getElementById('waypoints');
    //for (var i = 0; i < checkboxArray.length; i++) {
      //if (checkboxArray.options[i].selected) {
    //    waypts.push({
     //     location: checkboxArray[i].value,
     //     stopover: true
     //   });
     // } 
//    }

    var startLocation = {lat: 27.714617, lng: -82.393298};
    var endLocation = {lat: 27.714617, lng: -82.393298};

    directionsService.route({
      //origin: document.getElementById('start').value,
      //destination: document.getElementById('start').value,
      origin: startLocation,
      destination: endLocation,
      waypoints: waypts,
      optimizeWaypoints: true,
      travelMode: 'DRIVING'
    }, function(response, status) {
      if (status === 'OK') {
        directionsDisplay.setDirections(response);
        var route = response.routes[0];
        var summaryPanel = document.getElementById('directions-panel');
        summaryPanel.innerHTML = '';
        // For each route, display summary information.
        var total = 0;
        var totaltrip = 0;
        var time = 0;
        for (var i = 0; i < route.legs.length; i++) {
          var routeSegment = i + 1;
          total += route.legs[i].distance.value;
          time += route.legs[i].duration.value;

          summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment +
              '</b><br>';
          summaryPanel.innerHTML += route.legs[i].start_address + ' to ';
          summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
          summaryPanel.innerHTML += route.legs[i].duration.text + '<br>';
          summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>';
        } 
        totaltrip = total/1606.47058823; 
        totaltime = (((routeSegment-1) * 120) + time)/60;
        document.getElementById('total').innerHTML = totaltrip + ' ' + totaltime + " minutes";
      } else {
        window.alert('Directions request failed due to ' + status);
      }
    });
  }   //<--- Parser error???
  function computeTotalDistance(result) {
    var total = 0;
    var myroute = result.routes[0];
    for (var i = 0; i < route.legs.length; i++) {
      total += route.legs[i].distance.value;
    }
    total = total / 1000;
    document.getElementById('total').innerHTML = total + ' km';
  }
 initmap();
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA8_rOr43NZxg-bzVbvL5YEsVholHAeAB4&callback=initMap">
</script>
<?php    

} //End if(!empty($_POST['orders_id'])){
} // End if (!empty($_POST['employee_id']))

Answer 1

您对Google Maps API的回调说callback=initMap

因此，当https://maps.googleapis.com/maps/api/js期望函数initMap()可以运行时。

以下解决问题：

答：在不需要initMap()功能的网页上，添加脚本，不用回调。即：https://maps.googleapis.com/maps/api/js?key={YOUR_KEY}

B：如果回调包含在每个页面上但不是真的需要。即：https://maps.googleapis.com/maps/api/js?key={YOUR_KEY}&callback=initMap然后只需在该页面添加一个空白函数，即：

<script> function initMap() { console.log('i am not needed here'); } </script>

C：这是拼写错误吗？在上面的示例中，请注意initmap()与initMap()（cammelcase）不同。

分析器错误和initmap不是函数

1 个答案: