我有一个带有bootstrap模式的页面，该模式在其中有一个表单，当我提交此表格时，应提交此表格，并且我使用了Action Artribute并重定向了所有表格数据到另一页。
我在两个页面中使用了Google Maps API
它在第一页上工作正常，但是当表单提交并将页面重定向到另一个页面时，我会遇到一个错误，说明Google.places未定义。
请看一下我到目前为止写的代码：
firstpage.html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<!-- Custom styles -->
<link rel="stylesheet" href="css/main-style.css">
<link rel="stylesheet" href="../css/loading-bar.min.css">
<link rel="stylesheet" href="../css/jquery.datetimepicker.css">
<link rel="stylesheet" href="../css/autocomplete.min.css">
<link rel="stylesheet" href="../css/sweetalert-min.css">
<script src="../js/jquery-3.1.0.min.js"></script>
</head>
<body ng-app="app">
<div class="dash1">
<div class="row stats-profile-picture">
<div class="col-md-3" style="margin-top: 20px;">
<div id="profile-change"></div>
<p class="text-center text-uppercase font-weight-bold" id="dbProfileName"></p>
</div>
<div class="col-md-2 profile-details" style="margin-top: 20px;">
<p><strong>#TWT005</strong></p>
<p><strong>GST NO : 123456</strong></p>
<p><strong>+91 9030590437</strong></p>
</div>
<a ui-sref="customerBooking.pending" class="col-md-2 col-md-offset-1">
<div class="bookings">
<p class="text-center"><img src="images/Pending-icon.png" alt="Pending" width="30%"></p>
<p class="text-center big-numbers"><strong>06</strong></p>
<p class="text-center"><strong>Pending</strong></p>
</div>
</a>
<a ui-sref="customerBooking.confirmed" class="col-md-2">
<p class="text-center"><img src="images/Confirmed-icon.png" alt="Confirmed icon" width="30%"></p>
<p class="text-center big-numbers"><strong>06</strong></p>
<p class="text-center"><strong>Confirmed</strong></p>
</a>
<a ui-sref="customerBooking.completed" class="col-md-2" style="border-right: none">
<p class="text-center"><img src="images/list.png" alt="completed" width="30%"></p>
<p class="text-center big-numbers"><strong>06</strong></p>
<p class="text-center"><strong>Completed</strong></p>
</a>
</div>
</div>
<div class="custom-dashed-border"></div>
<div class="container main-options">
<br/>
<div class="row">
<a href="javascript:void(0);" class="col-md-4 col-sm-6 col-xs-12 cards" data-toggle="modal" data-target="#new-booking">
<div class="row" style="margin-top: 9%;">
<div class="col-md-6">
<p class="text-center">
<img src="images/notebook.svg" width="60%" alt="notepad"/>
</p>
</div>
<div class="col-md-6" style="padding-left: 0px;margin-top: 3%;">
<p class="big-font"><strong>New Booking</strong></p>
<p class="small-font"><strong>Make a new Booking</strong></p>
<br/>
</div>
</div>
</a>
<!-- Modal for new Booking -->
<div id="new-booking" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<form method="get" action="SearchRedesign.html" name="target" id="target"
style="padding: 5px" autocomplete="off" novalidate>
<div class="modal-header">
<h4 class="text-center col-md-12">
<span style="border-bottom: 1px solid gray; padding-bottom: 5px;">New Booking</span>
</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<label for="fromPlace">From </label>
<input class="form-control" tabindex="1" autofocus g-places-autocomplete
force-selection="true" options="autocompleteOptions" ng-model="fromPlace"
placeholder="From Place" autocomplete="off" id="fromPlace" name="fromPlace">
<input ng-cloak type="hidden" name="sourceAddressLat" ng-model="sourceAddressLat" value="{{sourceAddressLat}}"
id="fromLat">
<input ng-cloak type="hidden" name="sourceAddressLang" ng-model="sourceAddressLang" value="{{sourceAddressLang}}"
id="fromLong">
<input ng-cloak type="hidden" name="sourceAddress" ng-model="sourceAddress" value="{{sourceAddress}}"
id="fromCity" required>
<p ng-cloak ng-show="target.fromPlace.$touched && target.sourceAddress.$invalid" class="text-danger"><strong>Please enter a valid place</strong></p>
</div>
<div class="col-md-6">
<label for="toPlace">To</label>
<input class="form-control" tabindex="2" id="toPlace" name="toPlace" g-places-autocomplete force-selection="true"
options="autocompleteOptions" placeholder="To Place" autocomplete="off" ng-model="toPlace">
<input ng-cloak type="hidden" name="destinationAddressLat" ng-model="destinationAddressLat"
value="{{destinationAddressLat}}" id="toLat">
<input ng-cloak type="hidden" name="destinationAddressLang" ng-model="destinationAddressLang"
value="{{destinationAddressLang}}" id="toLong">
<input ng-cloak type="hidden" name="destinationAddress" ng-model="destinationAddress"
value="{{destinationAddress}}" id="toCity" required>
<p ng-cloak ng-show="target.toPlace.$touched && target.destinationAddress.$invalid" class="text-danger"><strong>Please enter a valid place</strong></p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-6">
<label for="datepicker">Date of load:</label>
<input class="form-control" name="date" tabindex="3" id="datepicker" type="text" placeholder="Date" ng-model="datepicker"
autocomplete="off" required>
<p ng-cloak ng-show="target.date.$touched && target.date.$error.required" class="text-danger"><strong>Please select the date to continue</strong></p>
</div>
<div class="col-md-6">
<label for="reportTime">Time :</label>
<input type="text" name="reportTime" id="reportTime" ng-model="reportTime" class="form-control" tabindex="4" style="display: inline;" required/>
<p ng-cloak ng-show="target.reportTime.$touched && target.reportTime.$error.required" class="text-danger"><strong>Please select the time to continue</strong></p>
</div>
</div>
</div>
<div class="col-md-6">
<label for="material_type">Material Type:</label>
<select class="form-control" ng-change="update()" name="materialTypeHome" id="material_type"
ng-options="option as option for option in materialTypeOptions" ng-model="material_type"
tabindex="7" required>
<option value="">Please choose</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-6">
<label for="weight">Capacity<span
style="font-size: 9px;padding-left:1px;">(tons)</span>
<span class="glyphicon glyphicon-info-sign hidden-md hidden-lg" data-toggle="tooltip" data-placement="bottom"
title="Total Capacity of your Load" style="cursor: pointer"></span>
</label>
<input class="form-control" min="0.1" value="1" max="30" name="weight" style="display: inline;"
tabindex="5" placeholder="In tons" id="weight" type="number" step="any">
</div>
<div class="col-md-6">
<label for="noOfTrucks">No of Trucks
<span class="glyphicon glyphicon-info-sign hidden-md hidden-lg" data-toggle="tooltip1" data-placement="bottom"
title="How many trucks required for your Load" style="cursor: pointer"></span>
</label>
<input class="form-control" type="number" min="1" value="1" max="1000" step="1"
name="noOfTrucks" style="display: inline;" tabindex="6" placeholder="No Of Trucks"
id="noOfTrucks" required="required">
</div>
</div>
</div>
<div class="col-md-6">
<label for="truck_type">Type of truck </label>
<select class="form-control" ng-options="option as option for option in truckTypeOptions" id="truck_type"
ng-model="truck_type" tabindex="7" name="truckTypeHome" required>
<option value="">Please choose</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<div class="row">
<button type="submit" class="btn btn-default col-md-4 offset-md-4">Search
<img src="images/white-mag-glass.png" style="width:18px;height: 18px;margin-bottom: 5px;"/></button>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js"></script>
<script src="../js/angular.min.js"></script>
<script src="../js/angular-ui-router.min.js"></script>
<script src="../js/loading-bar.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
<script src="js/customer-main.js"></script>
<script src="js/cards.js"></script>
<script src="../js/state.js"> </script>
<script src="../js/jquery.datetimepicker.min.js"></script>
<script src="../js/autocomplete-min.js"></script>
<script src="../js/ui-bootstrap-tpls.min.js"></script>
<script src="../js/sweetalert.min.js"></script>
<script src="../js/jquery.validate.min.js"></script>
<script src="../js/transForm.js"></script>
</body>
</html>第二页
<!DOCTYPE html>
<html lang="en" ng-app="StarterApp">
<head>
<!-- for-mobile-apps -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="keywords" content=""/>
<script type="application/x-javascript">
addEventListener("load", function () {
setTimeout(hideURLbar, 0);
}, false);
function hideURLbar() {
window.scrollTo(0, 1);
} </script>
<!-- //for-mobile-apps -->
<link href="../css/bootstrap.css" rel="stylesheet" type="text/css" media="all"/>
<link href="../css/style.css" rel="stylesheet" type="text/css" media="all"/>
<link rel="stylesheet" href="../css/autocomplete.min.css">
<link rel="stylesheet" href="../css/newModel.css">
<link rel="stylesheet" href="../css/jquery.datetimepicker.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/angular.ng-notify/0.6.0/ng-notify.min.css">
<link rel="stylesheet" href="../newui/css/newdropdown.css">
<link rel="stylesheet" href="../css/dropdown.css">
<link rel="stylesheet" href="../css/font-awesome.min.css">
<link rel="stylesheet" href="../css/sweetalert-min.css">
<!-- js -->
<script type="text/javascript" src="../newui/js/jquery-1.11.1.min.js"></script>
<!--<script>
$(window).load(function(){
$('.loader').fadeOut('Slow');
})
</script>-->
<script src="../js/atmosphere.js"></script>
<!-- FlexSlider -->
<!-- //js -->
<link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic'
rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="../css/style.css">
</head>
<body id="index" ng-controller="searchCtrl">
<!--<div class="loader"></div>-->
<!-- header -->
</body>
<script src="../js/bootstrap.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
<script src="../js/jquery.datetimepicker.js"></script>
<script src="../js/jquery.validate.min.js"></script>
<script src="../js/jquery.blockUI.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="../js/angular.min.js"></script>
<script type="../text/javascript" src="js/autocomplete.js"></script>
<script src="../js/ui-bootstrap-tpls.min.js"></script>
<script src="https://cdn.jsdelivr.net/angular.ng-notify/0.6.0/ng-notify.min.js"></script>
<script src="../js/dirPagination.js"></script>
<script src="../js/notificationDirective.js"></script>
<script src="../js/sweetalert.min.js"></script>
<!-- angularjs controller file -->
<!-- angularjs controller file -->
<script type="text/javascript" src="js/searchRedesign.js"></script>
var app = angular.module('StarterApp', ['google.places','ui.bootstrap','ngNotify','angularUtils.directives.dirPagination','notificationsTruckway']);
听起来您在第二页上未正确加载API。
在这两个页面上，您都有一行：
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
确保您实际上在两个页面上从Google中正确替换了YOUR_API_KEY。