我正在使用Google Maps API。加载页面时它工作正常，但对于我在onclick按钮时的要求，我想显示 Google 地图。我的工作代码：
function initMap() {
var directionsDisplay = new google.maps.DirectionsRenderer;
var directionsService = new google.maps.DirectionsService;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: {
lat: 12.9577129,
lng: 77.6764937
} // Starting Point Marathahalli
});
directionsDisplay.setMap(map);
calculateAndDisplayRoute(directionsService, directionsDisplay);
}
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
var selectedMode = document.getElementById('mode').value;
/* configure waypoints */
var waypts = [];
waypts.push({
location: {
lat: 12.9583665,
lng: 77.6635659
}, // HAL
stopover: true
}, {
location: {
lat: 12.9630167,
lng: 77.6268656
},
stopover: true
});
directionsService.route({
origin: {
lat: 12.9577129,
lng: 77.6764937
}, // Haight.
destination: {
lat: 12.9868068,
lng: 77.6070679
}, // Ending Point Shivaji Nagar.
travelMode: google.maps.TravelMode[selectedMode],
waypoints: waypts
}, function(response, status) {
if (status == 'OK') {
directionsDisplay.setDirections(response);
console.log(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto', 'sans-serif';
line-height: 30px;
padding-left: 10px;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Travel modes in directions</title>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC7lDrYPDmJz1JsQh2rbWA9uRZHcFk_xJY&callback=initMap">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<form id="testForm">
<select name="tripId">
<option value="">Select trip</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<button type="button" id="btn-submit">submit</button>
</form><br></br>
<div id="floating-panel">
<b>Mode of Travel: </b>
<select id="mode">
<option value="DRIVING">Driving</option>
</select>
</div>
<div id="map"></div>
</body>
</html>我尝试使用onclick事件的代码：
$('#btn-submit').click(function(e){
e.preventDefault();
$.ajax({
type:'POST',
url :"getLatLan.php",
data : $('#testForm').serialize(),
success: function(data) {
var res = jQuery.parseJSON(data);
console.log(res);
},
error:function(exception){
alert('Exeption:'+exception);
}
});
});
我在AJAX 中得到回复 (console.log(res);(：
{
"status": "success",
"count": 2,
"data": [
{
"tripId": "1",
"pickUpLatitidute": "",
"pickUpLongitude": "",
"cabNo": "Ad2K2001",
"driverId": "G2E100",
"routeId": "1",
"tripDate": "2017-08-01 15:45:55",
"startTime": "15:45:55",
"endTime": "14:48:55",
"shiftId": "1",
"tripStatus": "0",
"id": "1",
"empId": "G2E201",
"callStartTime": "",
"callEndTime": "",
"cabReachingTime": "",
"pickupTime": "15:50:02",
"dropTime": "",
"dropStatus": "0",
"otp": "421283",
"pickupotpStatus": "1",
"empPresentStatus": "0",
"latitdute": "12.9583665",
"longitude": "77.6635659"
},
{
"tripId": "1",
"pickUpLatitidute": "",
"pickUpLongitude": "",
"cabNo": "Ad2K2001",
"driverId": "G2E100",
"routeId": "1",
"tripDate": "2017-08-01 15:45:55",
"startTime": "15:45:55",
"endTime": "14:48:55",
"shiftId": "1",
"tripStatus": "0",
"id": "2",
"empId": "G2E200",
"callStartTime": "",
"callEndTime": "",
"cabReachingTime": "",
"pickupTime": "",
"dropTime": "",
"dropStatus": "0",
"otp": "",
"pickupotpStatus": "0",
"empPresentStatus": "0",
"latitdute": "12.9630167",
"longitude": "77.6268656"
}
]
}
我期望的答案：
在AJAX响应响应中，当我得到"status": "success",时，那个时候只有我想显示我的地图，我该怎么做？
如果不想在开头初始化 map，请删除 URL 上的回调函数。
&callback=initMap
否则：
当 API 准备就绪时，它将调用使用 回调参数。
之后，根据JSON检查status是否成功，并通过按钮初始化映射，然后调用initMap函数：
success: function(data) {
var res = jQuery.parseJSON(data);
if(res.status == "success")
{
initMap();
}
}