我有一个带有引导模式的页面，这个模态中有一个表单，当我提交此表单时，应该提交此表单并且我已经使用了动作atrribute并将所有表单数据重定向到另一个页面。
我在两个页面中都使用了谷歌地图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>
Second-page.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']);
答案 0 :(得分：0)
听起来您没有在第二页上正确加载API。
在两个页面上都有一行：
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
确保您确实在两个网页上正确地用谷歌的密钥替换了YOUR_API_KEY。