Javascript 谷歌地图api V3不显示任何内容,空白页
我试图使地图显示给我多条路线,但对我来说,它只是显示空白页,即使地图没有显示。我的代码有什么问题,我找不到。这只是一页空白 这是我的密码:Javascript 谷歌地图api V3不显示任何内容,空白页,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,我试图使地图显示给我多条路线,但对我来说,它只是显示空白页,即使地图没有显示。我的代码有什么问题,我找不到。这只是一页空白 这是我的密码: <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>&
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title></title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
float: left;
width: 63%;
height: 100%;
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: -24.345, lng: 134.46}
});
function renderDirections(result) {
var directionsRenderer = new google.maps.DirectionsRenderer({
draggable: true,
map: map,
});
directionsRenderer.setMap(map);
directionsRenderer.setDirections(result);
}
var directionsService = new google.maps.DirectionsService;
function requestDirections(start, end) {
directionsService.route({
origin: start,
destination: end,
travelMode: 'DRIVING'
}, function(result) {
renderDirections(result);
});
}
requestDirections('Huntsville, AL', 'Boston, MA');
requestDirections('Bakersfield, CA', 'Vancouver, BC');
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6POCSerSPAK1t9zhKiFbiTDzh5TDPeYg&callback=initMap">
</script>
</body>
</html>
html,正文{
身高:100%;
保证金:0;
填充:0;
}
#地图{
身高:100%;
浮动:左;
宽度:63%;
身高:100%;
var map=new google.maps.map(document.getElementById('map'){
缩放:4,
中心:{纬度:-24.345,液化天然气:134.46}
});
函数renderDirections(结果){
var directionsrender=new google.maps.directionsrender({
真的,
地图:地图,
});
方向渲染器.setMap(map);
directionsRenderer.setDirections(结果);
}
var directionsService=新的google.maps.directionsService;
函数请求方向(开始、结束){
方向服务.路线({
来源:start,
目的地:完,
travelMode:“驾驶”
},函数(结果){
渲染方向(结果);
});
}
请求指示('Huntsville,AL','Boston,MA');
请求指示(“加利福尼亚州贝克斯菲尔德”、“不列颠哥伦比亚省温哥华”);
您忘记在代码中编写回调函数:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: -24.345, lng: 134.46}
});
function renderDirections(result) {
var directionsRenderer = new google.maps.DirectionsRenderer({
draggable: true,
map: map,
});
directionsRenderer.setMap(map);
directionsRenderer.setDirections(result);
}
var directionsService = new google.maps.DirectionsService;
function requestDirections(start, end) {
directionsService.route({
origin: start,
destination: end,
travelMode: 'DRIVING'
}, function(result) {
renderDirections(result);
});
}
requestDirections('Huntsville, AL', 'Boston, MA');
requestDirections('Bakersfield, CA', 'Vancouver, BC');
}
因为您在src中调用它,但从未实现它:
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6POCSerSPAK1t9zhKiFbiTDzh5TDPeYg&callback=initMap"